具有 "Add New" 个选项的 Razor DropDown

Question

我有一个下拉列表，它使用来自 SQL table（使用 linq 和 MVC5、ASP.NET 等）的相关数据构建列表。目前我在控制器中的下拉菜单是这样的：

ViewData["TeamList"] = new SelectList(db.Players.Select(p => p.Team).Distinct(), TeamFilter);

视图如下所示：

<span class="pull-right searchDD" id="TeamDD">Team: @Html.DropDownList("TeamList", "-All-")</span>

我想在列表顶部添加一个选项 "Add New"，该选项将调用我的 "Create" 团队控制器操作。我该怎么做？可能吗？

我想也许我可以用数据库数据构建一个列表，然后将一个 ADD NEW 选项添加到这个列表的开头，例如：

List<SelectItemList> TeamList = new List<selectItemList>();
TeamList.Add(new SelectListItem { Text = "Add NEW", Value = "99" });
foreach(var team in db.Players.Select(p => p.Team).Distinct())
{ TeamList.Add{ Text = team.Name, Value= team.id };}

然后使用 Jquery 监视在下拉列表中选择的值 99，并从那里加载一个创建控制器操作，但这看起来非常乏味且代码密集。

有没有更简单的方法？如果没有，我如何从 JQUERY 加载 Controller/Action（我也可以搜索它）....

Answer 1

简而言之，我建议不要。你要求做这样的事情：

首先，您如何知道用户选择了该选项，因为它是第一个选项？您需要在其上方添加另一个选项（空白或占位符）。

其次，这不是一个很好的设计——它对用户来说不直观，他们必须单击下拉菜单才能看到他们可以添加一个新团队。如果他们不点击它并因此不知道他们可以添加团队怎么办？

第三，你自己说的最好，它增加了很多不必要的代码！一堆 JS 来处理 HTML 本身可以做的事情。

让我们切换到 using a Bootstrap input group 让他们更容易：

<div class="row">
  <div class="col-xs-4">
    <div class="form-group">
      <label class="control-label">Teams</label>

      <span class="input-group">
        <select class="form-control">
          <option>Team 1</option>
          <option>Team 2</option>
        </select>
        <span class="input-group-btn">
          <a class="btn btn-primary" href="@Url.Action('Create', 'Team')">Add Team</a>
        </span>
      </span>
    </div>

  </div>
</div>

我仍然不是 100% 确定我喜欢这个，因为它有点暗示你正在将选定的团队添加到某个东西中。毕竟我可能只是选择将按钮与 <select> 元素分开。由你决定！

请注意我还如何利用 ASP.NET MVC HtmlHelper @Url.Action() 为您的创建团队 action/controller.[=18] 提供 link =]

实例：https://jsfiddle.net/4pxp7r3w/

具有 "Add New" 个选项的 Razor DropDown

Razor DropDown with "Add New" choice

c#

asp.net-mvc

jquery

html.dropdownlistfor

razor