如何绑定html选择选项中的值?

时间:2013-02-04 09:43:17

标签: c# html5 asp.net-mvc-4

我需要在html select选项中绑定值,并且我在C#模型中有值。我该怎么做呢?我的HTML代码:

 <div class="Div"><span class="label2">values:</span>
    <select id="Binding_values" onchange="values()></select></div>

1 个答案:

答案 0 :(得分:1)

假设你有一个视图模型:

public class MyViewModel
{
    public string SelectedValue { get; set; }
    public IEnumerable<SelectListItem> Items { get; set; }
}

和一个控制器操作,它将填充此视图模型并将其传递给视图:

public ActionResult Index()
{
    var model = new MyViewModel();
    model.Items = new[]
    {
        // TODO: those values could come from a database for example
        new SelectListItem { Value = "1", Text = "item 1" },
        new SelectListItem { Value = "2", Text = "item 2" },
        new SelectListItem { Value = "3", Text = "item 3" },
    };
    return View(model);
}

在相应的强类型视图中,您可以使用DropDownListFor帮助程序:

@model MyViewModel
...
@using (Html.BeginForm())
{
    @Html.DropDownListFor(x => x.SelectedValue, Model.Items)
    <button type="submit">OK</button>
}

如果此下拉列表位于用于回发到控制器的HTML中,您可以执行一项操作,从模型中检索所选值:

[HttpPost]
public ActionResult Index(MyViewModel model)
{
    // model.SelectedValue will contain the selected value from the dropdown list here
    ...
}

假设您想在更改下拉列表中的选择后立即将所选值发送到服务器而不单击表单提交按钮,您可以为此DropDownList提供唯一ID:

@Html.DropDownListFor(x => x.SelectedValue, Model.Items, new { id = "myDdl" })

然后使用jQuery订阅此下拉列表的.change()事件并提交包含的表单:

$(function() {
    $('#myDdl').change(function() {
        $(this).closest('form').submit();
    });
});