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>