Bootstrap和Ajax.BeginForm

Question

目標： 我有一個簡單的頁面，列出了一堆項目（庫存）。當他們點擊零件編號時，它會彈出一個編輯模式，點擊保存更改時它應該保存更改。

問題： 現在，當我點擊保存更改時，彈出的模式會彈出填充數據，它將在父窗口中返回部分視圖，而不是在模態中。關於如何從公共PartialViewResult Edit（EditInventoryItemViewModel模型）中獲取局部視圖的任何想法都返回到模態體？

這裏是我的代碼：

控制器：

/// <summary> 
    /// Returns a partial view with the inventory item populated 
    /// </summary> 
    public PartialViewResult Edit(int id) 
    { 
     var model = new EditInventoryItemViewModel(); 
     model.Status = ServiceContext.EnumService.InventoryItemStatus; 
     model.Locations = ServiceContext.EnumService.Locations; 

     model.InventoryItem = ServiceContext.InventoryService.GetInventoryItem(id); 

     return PartialView("_InventoryItemEdit", model); 
    } 

    /// <summary> 
    /// Save the changes. 
    /// </summary> 
    /// <param name="model"></param> 
    /// <returns></returns> 
    [HttpPost] 
    public PartialViewResult Edit(EditInventoryItemViewModel model) 
    { 
     model.Status = ServiceContext.EnumService.InventoryItemStatus; 
     model.Locations = ServiceContext.EnumService.Locations; 

     // save changes here 


     model.InventoryItem = ServiceContext.InventoryService.GetInventoryItem(model.InventoryItem.InventoryItemId); 

     return PartialView("_InventoryItemEdit", model); 
    } 

局部視圖（_InventoryItemEdit）

@model PPS.Model.ViewModel.Inventory.EditInventoryItemViewModel 
<div id="inventory-edit"> 
@using (Ajax.BeginForm("Edit", "Inventory", new AjaxOptions() { InsertionMode = InsertionMode.Replace, HttpMethod = "POST", UpdateTargetId = "inventory-edit" })) 
{ 
    <div class="row"> 
     <div class="col-lg-12"> 
      <div class="form-group"> 
       Part No.: 
       <div>@Model.InventoryItem.PartNumber</div> 
       @Html.HiddenFor(m=>Model.InventoryItem.InventoryItemId) 
      </div> 
      <div class="form-group"> 
       Location: 
       @Html.ValidationMessageFor(m => Model.InventoryItem.LocationId) 
       @Html.DropDownListFor(m => Model.InventoryItem.LocationId, new SelectList(Model.Locations, "LocationId", "Name"), "-- Select Location --", new {@class = "form-control", @data_bind = "value: locationId"}) 
      </div> 
      <hr /> 
      <h4>Optional</h4> 
      <div class="form-group"> 
       Serial No.: 
       @Html.TextBoxFor(m => Model.InventoryItem.SerialNumber, new {@class = "form-control", @data_bind = "value: serialNumber"}) 
      </div> 
      <div class="form-group"> 
       Item Status: 
       @Html.DropDownListFor(m => m.InventoryItem.InventoryItemStatusId, new SelectList(Model.Status, "Id", "Name"), "-- Status --", new {@class = "form-control", @data_bind = "value: statusId"}) 
      </div> 
      <div class="form-group"> 
       Description: 
       @Html.TextAreaFor(m => Model.InventoryItem.Description, new {@class = "input-xxlarge form-control", rows = 5, @data_bind = "value: description"}) 
      </div>  
      <input type="submit" class="btn btn-primary" value="Save Changes"/>  
     </div> 
    </div> 
} 
</div> 

淘汰賽功能：

 showEditModal: function (id, data, event) { 
       $.ajax({ 
        url: '@Url.Action("Edit", "Inventory")', 
        type: 'GET', 
        data: 'id=' + id, 
        success: function (data) { 
         if (data != null) { 
          $('#edit-modal-body').html(data); 
         } 
        } 
      }); 
      $('#edit-modal').modal(); 
     } 
    }; 

模態的html代碼：

<div class="modal fade" id="edit-modal"> 
     <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
      <h4 class="modal-title">Edit Inventory Item</h4> 
      </div> 
      <div class="modal-body" id="edit-modal-body"> 
      </div> 
      <div class="modal-footer"> 
      </div> 
     </div><!-- /.modal-content --> 
     </div><!-- /.modal-dialog --> 
    </div> 

Answer 1

我認爲this answer解決了類似的問題。

它在視圖中使用了TwitterBootstrapMVC，但是如果你不想要的話，你並不需要。