MVC 5 Edit Bootstrap Modal Popup

Question

I have the following View

@model QuotationManagement.Models.ProductViewModel

@{
    ViewBag.Title = "Products";
}

<h2>Products</h2>

<button id='newProduct' data-toggle="modal" data-target="#newProductModal" class="btn btn-primary">Add New Product</button>
<br />
@using (Html.BeginForm("Products", "Main", FormMethod.Post, new { encType = "multipart/form-data", name = "myform" }))
{
    <table class="table table-bordered table-condensed table-striped">
        <tr>
            <th>
                Name
            </th>
            <th>
                Price
            </th>
            <th>
                Gender
            </th>
            <td>
                Action
            </td>
        </tr>
        @Html.EditorFor(model => model.Products)
    </table>
}

<div id="newProductModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            @using (Html.BeginForm("NewProduct", "Main", FormMethod.Post, new { encType = "multipart/form-data", name = "newProdutForm", @class = "form-group" }))
            {
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">New Product</h4>
                </div>
                <div class="modal-body">
                    @Html.HiddenFor(model => model.NewProduct.Id)
                    Name:
                    @Html.TextBoxFor(model => model.NewProduct.Name, new { @class = "form-control" })
                    Price:
                    @Html.TextBoxFor(model => model.NewProduct.Price, new { @class = "form-control" })
                    Gender:
                    @Html.DropDownListFor(model => model.NewProduct.ForGender, new List<SelectListItem>() { new SelectListItem() { Text = "Male", Value = "1" }, new SelectListItem() { Text = "Female", Value = "2" } }, new { @class = "form-control" })
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save changes</button>
                </div>
            }
        </div>
    </div>
</div>

And then the Template

@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>
        @Html.ActionLink("Edit", "EditProduct","Main", Model ,new { @class = "btn btn-primary"})
    </td>
</tr>

Adding a new Product works, but now I want to change the edit Button to Bind the row item to the Boostrap Popup and then opens it for editing.

The current method I am trying is with the ActionLink which then takes the selected Product and binds it to ProductViewModel.NewProduct, which works but now my problem is I will need to reload the whole page and repopulate the table and then somehow open the Boostrap Modal.

So my question is How can I Bind the Selected Product to the Modal and then show the Modal withoud having to do a postback or without having to reload the current page

Solution

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>

Comments

[sanepete]

I didn't have a standard way of doing this until now. This is flexible enough to work without much modification in all situations I come across.

[Donald Jansen]

I made a slight change in your Javascript part to code which worked for me, but it worked thanx

[Aswin Arshad]

had the same problem.but solved it by adding the $(function() { $('.editModal').modal(); }); inside the success part of the ajax method.

[S Wilkinson]

There is another bug in this sample - yes, the call to modal() must be moved into the success part AND the jQuery selector must be "#editModal" - it's an ID, not a class.