Bootstrap 和 Ajax.BeginForm

Question

目标： 我有一个简单的页面，列出了一堆项目（在库存中）。当他们点击零件号时，它会弹出一个编辑模式，当点击保存更改时，它应该保存更改。

问题： 现在，模态会按预期弹出填充数据，当我单击“保存更改”时，它会在父窗口中返回部分视图，而不是在模态中。关于如何从 public PartialViewResult Edit(EditInventoryItemViewModel model) 获取部分视图的任何想法返回到模态体？

这是我的代码：

控制器：

    /// <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，但如果您不想要，则不必这样做。