Question

我正在使用Razor和C＃在ASP .NET MVC 3中的一个网站上工作。

我在视图上有两个下拉列表 - 一个用于设备类型，另一个用于设备模型。 “设备型号”下拉列表的内容基于所选的“设备类型”。此外，应禁用“设备型号”下拉菜单，直到选择“设备类型”。我希望功能是客户端。

我怎样才能做到这一点？

编辑：在另一个问题中收到答案：Fill a drop down list dynamically using Javascript/jQuery

Answer 1

为什么不将第二个dd列表放在容器div中，使用Ajax将所选值从第一个列表发布到控制器操作（onchange），该操作将呈现的部分作为HTML返回给客户端，然后替换HTML带有操作结果的第二个列表的容器。

如果您愿意使用jquery查看$ .ajax和replaceWith来说明您的控制器操作并分别动态重写您的目标div html。

Answer 2

如果没有很多组合，那么你也可以简单地将整个字典带到一个JavaScript变量中的客户端，然后根据需要做整个客户端。

示例：

在Controller中

，您可以将字典存储在ViewBag中，如下所示：

// Keep in mind that I don't know your data structure, but you'll get the point.
ViewBag.DeviceDictionary = myDictionary;

然后在视图中，你会做这样的事情：

<script type="text/javascript">

// new-up an array in JavaScript.
var devices = [];

// ... IT'S RAZOR TIME!!!
@foreach (Device d in ViewBag.DeviceDictionary)
{
    <text>
        // We're back in JavaScript here... new up the dictionary.
        devices[@d.ID] = [];
    </text>

    foreach (var model in d.Models
    {
        <text>devices[@d.ID].push("@model.Name");</text>
    }
}

</script>

然后，你只需编写一些简单的JavaScript（使用jQuery？）清除第二个下拉列表并从该数组（客户端）填充它。

请记住，我正在给你一个示例来完全构建你的数据结构......但你应该从中得到这个想法。

根据另一个下拉列表中的选择填写下拉列表

2 个答案: