第二个下拉列表选定项目在ASP.NET MVC中不会更改

时间:2010-02-07 04:41:40

标签: c# asp.net-mvc

我对ASP.NET MVC的行为感到有点困惑,因为它没有在POST后改变下拉列表的值。有人可以解释如何做到这一点。

首先,我有一个看起来像这样的模型:

public class Test
{
    public int OneID { get; set; }
    public IEnumerable<SelectListItem> OneList
    {
        get
        {
            yield return new SelectListItem
            {
                Text = "Red",
                Value = "0"
            };
            yield return new SelectListItem
            {
                Text = "Green",
                Value = "1"
            };
            yield return new SelectListItem
            {
                Text = "Blue",
                Value = "2"
            };
        }
    }

    public int TwoID { get; set; }
    public IEnumerable<SelectListItem> TwoList
    {
        get
        {
            yield return new SelectListItem
            {
                Text = "Ruby",
                Value = "0"
            };
            yield return new SelectListItem
            {
                Text = "Gem",
                Value = "1"
            };
            yield return new SelectListItem
            {
                Text = "Bronze",
                Value = "2"
            };
        }
    }
}

该视图在正文内容中包含以下代码段:

<% using (Html.BeginForm("Index", "Home", FormMethod.Post))
   { %>
<table>
    <tr>
        <td>
            <% =Html.DropDownList("OneID", Model.OneList, new 
                  { @onchange = "this.form.submit();" })%>
        </td>
        <td>
            <% =Html.DropDownList("TwoID", Model.TwoList)%>
        </td>
    </tr>
</table>
<% } %>

GET和POST操作如下所示:

public ActionResult Index()
{
    Test test = new Test();
    test.OneID = 0;
    test.TwoID = 0;
    return View(test);
}

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Index(Test test)
{
    test.TwoID = test.OneID;
    return View(test);
}

我想要实现的是在每次更改第一个下拉列表时更改第二个下拉列表中的所选项目以匹配第一个下拉列表。因此,我从第一个下拉列表中获取所选值,并将其分配给用于第二个下拉列表的ID,然后返回相同的模型。第一个下拉列表在视图中正确设置,但不在第二个下拉列表中正确设置。

想法?

1 个答案:

答案 0 :(得分:1)

这不能按预期方式工作的原因是因为当DropDownList帮助程序尝试呈现select元素时,它首先查找与name匹配的已发布值,在这种情况下是TwoID @onchange = "document.getElementById('TwoID').value = this.value; this.form.submit();" 并使用此值代替模型中的值。例如,这与TextBox相同。如果您使用此帮助程序并在POST控制器操作中修改模型的值,它仍将显示旧值。这就是帮助者的工作方式。它们从POSTed值绑定。

有两种可能的解决方法:

  1. 使用javascript同步两个下拉列表:

    $(function() {
        $('#OneID').change(function() {
            $('#TwoID').val($(this).val());
            this.form.submit();
        });
    });
    

    顺便说一句,这应该在一个单独的javascript文件中以不引人注目的方式完成:

    {{1}}
  2. 编写自己的助手或手动生成选择(不太推荐)