MVC 5 Edit Bootstrap Modal Popup

Question

I have the following View

@model QuotationManagement.Models.ProductViewModel

@{
    ViewBag.Title = \"Products\";
}

Products



        

Answer 1

I would recommend using AJAX and a single 'Edit' modal which would be cleared and repopulated when the user clicks 'edit' for each row.

Essentially, you will have a partial view which will be called via AJAX and injected onto the page, the method will have a parameter of productId.

Template

Please note the important part here is the onclick attribute of the edit button.

@model QuotationManagement.Bussiness_Logic_Layer.Product
<tr>
    <td>
        @Html.HiddenFor(model => model.Id)
        @Html.DisplayFor(model => model.Name)
    </td>
    <td>
        @Html.DisplayFor(model => model.Price)
    </td>
    <td>
        @Html.DisplayFor(model => model.Gender)
    </td>
    <td>
        <a href="#" onclick="editProduct(productId)" class="btn btn-primary">Edit</a>            
    </td>
</tr>

Javascript

$(function() {
    $('.editModal').modal();
});

function editProduct(productId) {
    $.ajax({
        url: '/Product/GetProductDetailsModal/' + productId, // The method name + paramater
        success: function(data) {
            $('#modalWrapper').html(data); // This should be an empty div where you can inject your new html (the partial view)
        }
    });
}

Add the following to your top-level view

<div id="modalWrapper">
    @* Inject form here *@
</div>

Partial View

Your partial view will look something like this

@model ProductModel
<div class="modal fade" id="editModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Edit</h4>
            </div>
             <div class="modal-body">
                <form>
                    <input type="text" id="ProductName" value="@Model.Name"/>
                    <input type="submit" />
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>