如何在不离开 MVC 应用程序页面的情况下允许将缺失的下拉列表项添加到数据库中？答案

【问题标题】：How do I allow missing dropdown list items to be added to a database without leaving the page in my MVC application?如何在不离开 MVC 应用程序页面的情况下允许将缺失的下拉列表项添加到数据库中？
【发布时间】：2018-04-23 11:10:39
【问题描述】：

这是我一直想知道的事情，而且在我知道的其他框架中更容易。我使用 razor 视图和 KendoUI 制作了一个 MVC5 Web 应用程序，并带有一个用于数据库访问的通用存储库。

在创建我拥有的实体之一的表单时，有一些 KendoUI 下拉列表小部件，即

@(Html.Kendo().DropDownList()
  .Name("Manager")
  .Filter("contains")
  .DataTextField("ManagerName")
  .DataValueField("ManagerName")
  .DataSource(source =>
  {
      source.Read(read =>
      {
          read.Action("GetData", "Data");
      }).ServerFiltering(false);
  }))

这很简单，从Datacontroller GetData 方法中获取其数据为JSON。无法保证我们的用户需要的所有 Managers 都会在此列表中，因此，为了让生活更轻松，我希望有一个链接可以显示模式或类似的东西，并允许他们添加缺少的 Manager，如果他们在列表中找不到它，但没有离开Create 视图。

最好的方法是什么？我应该看Asynchronous 控制器来实现这一点吗？有没有人们知道的例子？

注意：我的Create 表单是Ajax 格式。

【问题讨论】：

标签： javascript asp.net-mvc asynchronous razor kendo-ui

【解决方案1】：

您必须在通用控制器中创建通用操作。你混淆了异步控制器，它们不是你想要的。要了解 MVC 异步控制器的内容，请查看 this。

您只需要发布一个带有要创建的新项目的通用 AJAX 请求，并在成功获得结果后，将新创建的项目添加到下拉列表中。

JS代码：

$("#ddl").kendoDropDownList({
    dataSource: {
        data: [{ Id: 1, Name: "John Doe"}, { Id: 1, Name: "Jane Doe"}]
    },
    dataValueField: "Id",
    dataTextField: "Name"
});

$("#add").on("click", function() {
    wnd.center().open();
});

let wnd = $("#wnd-container").kendoWindow({
    title: "Add Item",
    modal: true,
    visible: false
}).data("kendoWindow");

$("#add-item").on("click", function() {
    // Pretend this is a legit post request where your new item's data 
    // will be sent to the MVC action to be added on database.
    $.ajax({
        url: "https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js",
        success: function() {
            let ddl = $("#ddl").data("kendoDropDownList");

            ddl.dataSource.add({
                Id: 999,
                Name: $("#item-text").val()
            });

            wnd.close();

            ddl.select($(ddl.items()).last());
        }
    });
});

HTML 代码：

<input id="ddl">
<button type="button" id="add">Add Item</button>
<div id="wnd-container">
    Item Text: <input id="item-text"><br>
    <button id="add-item" type="button">Add Item</button>
</div>

Demo

【讨论】：