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，但如果您不想要，则不必使用。