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 Popup，然后打开它进行编辑。

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

所以我的问题是 我如何可以将绑定在选择产品的模态，然后显示模态withoud不得不做回发或无需重新加载当前页面

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>