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，就像将该表单提交给您的控制器操作一样简单，然后将其称为数据访问层以保存新的供应商实体。当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
}
});

在您的控制器中：

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)
}

在你的控制器中：

// 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/

标准练习创建PopUp表单，然后更新父表单下拉列表而不刷新父页面？

1 个答案: