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

    
        @Html.HiddenFor(model => model.Id)
        @Html.DisplayFor(model => model.Name)
    
    
        @Html.DisplayFor(model => model.Price)
    
    
        @Html.DisplayFor(model => model.Gender)
    
    
        Edit            
    

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

    @* Inject form here *@

Partial View

Your partial view will look something like this

@model ProductModel

    

        

            

                ×
                
Edit
            
             

                

                    
                    
                
            
            

                Close