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。

所以我的问题是如何将所选产品绑定到模态，然后显示模态withoud必须进行回发或无需重新加载当前页面

Answer 1

我建议您使用 AJAX 和一个编辑＆＃39;当用户点击“编辑”时，将会清除并重新填充的模式。对于每一行。

基本上，你将有一个部分视图，它将通过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>

MVC 5编辑引导程序模态弹出

1 个答案: