C# 到 JavaScript 的 <select> for <select>。

Question

我有一个 ViewBag.List，其中包含竞赛信息，每个竞赛都有一支球队列表。例如：{英超：[阿森纳，切尔西等]，德甲：[拜仁慕尼黑，沃尔夫斯堡等]}。

我有两个选择框。当用户选择第一个选择框（竞赛）时，我希望第二个选择框会显示该竞赛的所有球队。如果他选择了英超，第二个选择框将会有阿森纳、切尔西等选项。

我试过为每个竞赛设置不同的选择框，如果用户选择了其中一个，该选择框将会可见，其他选择框将被隐藏或设为none。但是所有选择框都与 asp-for 的字符串 CurrentTeam 相关联，我无法把球队放入数据库。

另一种选项是使用 JavaScript 函数。每当用户选择一个竞赛时，onclick="myfunction(this)"，在该函数中我会这样做：

    function myFunction(select) {
        var sel = document.getElementById("teams");
        if (select.value == 'Premier League') {
            sel.innerHTML = "";

            @foreach(var team in ViewBag.List[0])   // Premier League
            {
            @: var x = document.createElement("OPTION");
            @: x.setAttribute("value", @team);
            @:var t = document.createTextNode(@team);
            @: x.appendChild(t)
            @: sel.appendChild(x);
                }
        }
        else // the other competitions

但是我不能在JavaScript函数中使用ViewBag。

我只想要一个选择器，它可以对另一个选择器做出反应，并将这两个东西放入数据库中。有什么建议吗？ 谢谢！

- Marian

---

我建议使用HTML Helper来渲染框或从Web服务中提取数据。像写这样的代码不是最简单或最好的方式。您正在使用哪个底层系统，MVC5吗？ - Adam Carr

我正在使用ASP.Net Core MVC。我只有几个联赛（5），所以我可以手动输入它们，但每个联赛都有20多个团队，我从数据库中获取它们并将它们放在控制器的ViewBag.List中。 - Marian

Answer 1

在您的视图中，您可以构建一个JavaScript对象来保存所有联赛和球队，并在JavaScript代码中从该对象中读取：

控制器：

[HttpGet]
public ActionResult Index()
{
    ViewBag.List = new Dictionary<string, string[]>
    {
        { "Premier League", new[] { "Arsenal", "Chelsea" } },
        { "Bundesliga",     new[] { "Bayern Munchen", "Wolfsburg" } },
    };

    return View();
}

视图：

...
<script type="text/javascript">

    //Complete list of leagues and their teams:
    var leagues = {
        @foreach(var l in ViewBag.List)
        {
            @: '@l.Key': [
                    foreach(var team in ViewBag.List[l.Key])
                    {
                        @: '@team',
                    }
            @:  ],
        }
    };
    ...

例子：

https://dotnetfiddle.net/d0FrGr

- Sphinxxx

---

非常感谢，真的很有帮助。现在它可以工作了。我不知道为什么我的Viewbag.List在javascript函数中为空。 - Marian

是的，在构建 HTML（或其他响应）并将其发送回客户端之前，ViewBag 仅在控制器和视图中的服务器上可用。下面是一个概述，可能会澄清事情：ASP.NET MVC 5 应用程序生命周期。 - Sphinxxx