MVC - JavaScript 从 DropDownList 获取数据对象

Question

我有一个视图页面，其中包含从自定义构造函数类填充的值的下拉列表。

DDL 填充了从自定义项列表创建的 SelectList，如下所示：

public class CustomerType
{
  public int Id { get; set; }
  public string Name { get; set; }
  public string ValidationRule { get; set; }
}

在我看来，我将其设置为： @Html.DropDownListFor(model => model.Id, (IEnumerable) Model.SelectListOfCustomItems, "请选择...")

我想要尝试并做的是显示每个选定项目的 ValidationRule 属性，并将其显示在标签中。

我认为我必须使用 JavaScript 来执行此操作，但我不确定如何实际获取该 ValidationRule 属性？我可能可以使用类似于下面的代码获取所选项目，但我看不到如何深入获取其他数据？

var dropDown = document.getElementById("MyDropDownListName");
dropDown.onchange = function () { DisplayValidationRule(this); };
function DisplayValidationRule(ddl)
{
  document.getElementById('lblRule').textContent = [Unknown]
}

我缺少的部分是我将其标记为 [Unknown]，因为我没有俱乐部如何获得它。我在想可能像ddl.items[ddl.selectedItem].value['ValidationRule'] 这样的东西，但这对我不起作用。

Answer 1

有很多方法可以实现它。一种方法是生成一组隐藏输入字段，例如 id="_CustomerType_id_xxx"，值为“ValidationRule”，然后根据选择结果取值。另一种方法是发送ajax请求来获取规则。但我认为这不是一个好方法。

更新

好的，下面是我的完整代码，它在 MVC4 上传递。

家庭控制器

public class HomeController : Controller
{
    public ActionResult Index()
    {
        IList<CustomerType> customerTypes = new List<CustomerType>();
        customerTypes.Add(new CustomerType { Id = 1, Name = "Customer Type 1", ValidationRule = "Rule 1" });
        customerTypes.Add(new CustomerType { Id = 2, Name = "Customer Type 2", ValidationRule = "Rule 2" });
        customerTypes.Add(new CustomerType { Id = 3, Name = "Customer Type 3", ValidationRule = "Rule 3" });

        IEnumerable<SelectListItem> selectList =
            from c in customerTypes
            select new SelectListItem
            {
                Text = c.Name,
                Value = c.Id.ToString()
            };

        return View(new CustomerVO { SelectListOfCustomItems = selectList, CustomerTypes = customerTypes });
    }
}

索引.cshtml

@model MvcApplication1.Models.CustomerVO

@Html.DropDownListFor(model => model.CustomerTypeId, Model.SelectListOfCustomItems, "Please select...")

@foreach (var customerType in Model.CustomerTypes)
{
    <input type="hidden" id="_customerType_@customerType.Id" value="@customerType.ValidationRule" />
}

<label id="lblRule"></label>

@section scripts
{
<script>
    $(document).ready(function () {
        var dropDown = document.getElementById("CustomerTypeId");
        dropDown.onchange = function () { DisplayValidationRule(this); };
        function DisplayValidationRule(ddl)
        {
            document.getElementById('lblRule').textContent = $("#_customerType_" + ddl.value).val();
        }
    });
</script>
}