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

Posted 2023-04-13

【中文标题】MVC 5 编辑引导模式弹出窗口

【英文标题】：MVC 5 Edit Bootstrap Modal Popup

【发布时间】：2015-07-16 17:19:56

【问题描述】：

我有以下观点

@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 而无需回发或重新加载当前页面

【参考方案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>

【讨论】：

直到现在我还没有一个标准的方法来做这件事。这足够灵活，可以在我遇到的所有情况下无需太多修改即可工作。

我在您的 javascript 部分中对对我有用的代码进行了轻微更改，但它比x有效

有同样的问题。但通过添加 $(function() $('.editModal').modal(); ); 解决了它在 ajax 方法的成功部分内。

此示例中还有另一个错误 - 是的，对 modal() 的调用必须移到成功部分，并且 jQuery 选择器必须是“#editModal” - 它是一个 ID，而不是一个类。