MVC 5 编辑引导模式弹出窗口

Question

我有以下观点

@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>

然后是模板

@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>

添加新产品有效，但现在我想更改编辑按钮以将行项目绑定到 Boostrap 弹出窗口，然后将其打开进行编辑。

我正在尝试的当前方法是使用 ActionLink，然后它获取选定的产品并将其绑定到 ProductViewModel.NewProduct，它可以工作，但现在我的问题是我需要重新加载整个页面并重新填充表格，然后以某种方式打开Boostrap 模式。

所以我的问题是 如何将所选产品绑定到 Modal，然后显示 Modal 而无需回发或重新加载当前页面

Answer 1

我建议使用 AJAX 和单个“编辑”模式，当用户单击每一行的“编辑”时，该模式将被清除并重新填充。

本质上，您将拥有一个局部视图，该视图将通过 AJAX 调用并注入到页面中，该方法将具有 productId 参数。

模板

请注意这里的重要部分是编辑按钮的 onclick 属性。

@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)
        }
    });
}

将以下内容添加到您的顶级视图

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

局部视图

您的局部视图将如下所示

@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>