MVC 5编辑Bootstrap模式弹出窗口 [英] MVC 5 Edit Bootstrap Modal Popup

问题描述

我有以下视图

@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弹出窗口，然后将其打开以进行编辑.

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.

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

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

推荐答案

我建议使用

I would recommend using AJAX and a single 'Edit' modal which would be cleared and repopulated when the user clicks 'edit' for each row.

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

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.

模板

请注意，这里的重要部分是编辑按钮的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>

局部视图

您的局部视图将如下所示

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>

这篇关于MVC 5编辑Bootstrap模式弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！