asp.net-mvc - 创建 PopUp 表单的标准做法，然后在不刷新父页面的情况下更新父表单下拉列表？

Question

我正在使用 MVC3、C#、Razor、EF4.1、SQLServer 2008。

我有一个带有“供应商”下拉列表的父表单。我希望添加一个“快速添加”链接/按钮，使用户能够快速将供应商添加到数据库，然后可以在下拉列表中进行选择。目前这是通过

Parent Page -> Add Supplier Page -> Parent Page(Page Refresh)

当然，在返回父页面时，它会刷新并删除所有未保存的数据 - 这是一个问题。最好有一个弹出窗口，然后保存供应商，然后只刷新父页面表单的下拉部分。所以我相信我正在寻找一种方法:

Parent Page -> Popup(Modal) -> DB Save -> Refresh DropDown in Parent Page (Ajax???) -> close Modal popup.

我希望能得到上述方面的指导，因为我对最佳实践和希望的简单方法有点迷茫。

非常感谢。

Answer 1

我通常会这样做:

创建一个将显示弹出窗口的“添加”按钮。 (我使用 jQuery 对话框。它们简单、免费，并且只需在 div 上调用 .dialog 即可轻松实现)。在这个对话框中有创建新供应商所需的适当字段。在此对话框中有一个“保存”按钮，并将其连接到 AJAX 帖子。 (同样，这使用 jQuery 非常简单)

如果您确实使用 jQuery，那么只需将该表单提交给您的 Controller 操作，然后 Controller 操作就会调用您的数据访问层来保存新的供应商实体。当 AJAX 调用成功返回时，您可以使用另一个 AJAX 帖子重新加载供应商网格的内容。所有的“魔力”都来自于真正实现 AJAX，这将允许您保留用户输入而不是重新加载整个页面。在用户输入新供应商并点击保存后执行的 AJAX 调用看起来像这样:

在你的 JavaScript 中:

$.ajax({
    url: "ControllerName/SaveNewSupplier",
    Data: $('#YourAddNewSupplierFormName').serialize(),
    Type: "POST"
    Success: function(result) {
    // this is what will get called after a successful save and return of your action method on your controller. This is where you will put the call to repopulate the supplier list with the updated list.
      UpdateSupplierList(); // This function is created below
}
});

在你的 Controller 中:

Public JsonResult SaveNewSupplier (NewSupplierModel newSupplier)
{
 // save your new supplier through your data access layer
// if save is successful then return
Return Json({success = true}, JsonRequestBehavior.AllowGet)
}

然后重新填充包含所有供应商的初始 div，执行如下操作:

在 JavaScript 中:

function UpdateSupplierList()
{
    $.ajax({
        url: "ControllerName/GetAllSuppliers",
        Type: "GET"
        Success: function(result) {
        $('#SuppliersDiv').html(result.suppliers)
}

在你的 Controller 中:

// remember that a lot of this is pseudo code and your will have to implement it better for your situation. But basically its just:

Public JsonResult GetAllSuppliers()
{
  var suppliers = db.GetSuppliers()
  return Jason({suppliers = suppliers}, JsonRequestBehavior.AllowGet);
}

编辑:如果您正在通过 jQuery 更新 SelectList，那么这篇文章几乎与我解释的内容相同，但更详细地介绍了更新选择列表。希望这可以帮助。 http://www.joe-stevens.com/2010/02/23/populate-a-select-dropdown-list-using-jquery-and-ajax/