Question

我有一个问题，也许有人可以帮我找到最佳解决方案。我希望用户能够在表单中动态地将项添加到下拉列表中。我有一个带有文本框和下拉列表的表单，并希望用户能够在下拉列表中添加项目，如果他们找不到它。我会让下拉列表文本框，但我想尝试保持名称一致。表单的一个示例是让用户输入名称，然后有颜色和形状的下拉列表。如果用户没有在下拉列表中看到颜色，我希望他们能够单击下拉列表旁边的链接并输入名称或颜色。另一个将形状添加到下拉列表的链接。

我试图在MVC Razor环境中这样做。我尝试使用部分视图通过链接打开部分视图的模式框来输入名称，但后来我在表单中有一个表单，无法提交内部表单。如果我打开一个小窗口输入名称，那么如何将其添加回原始父窗口窗体而不丢失它们已在文本框中输入的内容？我知道那里必须有一个很好的解决方案。

Answer 1

如果您希望保存用户的新输入以供以后使用，您可以使用Ajax将新数据提交到数据库中，然后让控制器返回带有新下拉列表的部分视图。

所以你的下拉列表就是这样的动作：

public PartialViewResult Dropdown()
{
   var model = new DropdownModel()
   {
      Data = yourdata; 
   }
   return PartialView("Dropdown.cshtml", model)
}

您插入新数据的操作看起来像这样：

public PartialViewResult AddDataToDropdown(string data)
{
   var newDropdown = repository.AddData(data);

   var model = new DropdownModel()
   {
      Data = newDropdown; 
   }
   return PartialView("Dropdown.cshtml", model)
}

所以，基本上，您可以在包含Ajax下拉列表的div中重新放置HTML，如下所示：

    $(".someButton").on("click", function () {


        var newData = ("$someTextbox").val();


        $.ajax({
            url: "/YourController/AddDataToDropdown",
            type: "GET",
            data: { data: newData}
        })
            .success(function (partialView) {
                $(".someDiv").html(partialView);
            });

    });

这样您可以保存数据并刷新下拉列表而不刷新整个页面

在表单中动态地将项添加到DropDownList

1 个答案: