首页 > 解决方案 > ModelBinding 绑定 SelectedItem

问题描述

如何使用 ModelBinding 将 SelectedItem 绑定到我的模型?

首先我创建了一个简单的模型:

public class Element
{
    public string Name { get; set; }
    public int Value { get; set; }
}
public class MyModel
{
    public Guid ContactID { get; set; }
    public List<Element> Collection { get; set; }

    public IEnumerable<SelectListItem> SelectList
    {
        get
        {
            return Collection.Select
            (
                e => new SelectListItem
                {
                    Text = e.Name,
                    Value = e.Value.ToString()
                }
            );
        }
    }

    public Element SelectedElement { get; set; }

}

然后在我的控制器中初始化它:

    public ActionResult Test()
    {
        var model = new MyModel {ContactID = Guid.NewGuid(), Collection = new List<Element>() };
        var rand = new Random();

        while (model.Collection.Count < 10)
        {
            var number = rand.Next(100);
            model.Collection.Add(new Element {Value = number, Name = number.ToString()});
        }

        return View(model);
    }

并在我的视图中显示:

@using (Html.BeginForm("TestPostBack", "Home"))
{
    @Html.AntiForgeryToken()

<div class="form-horizontal">
    <h4>MyModel</h4>
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="form-group">
        @Html.LabelFor(model => model.ContactID, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.ContactID, new { htmlAttributes = new { @class = "form-control" } })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Collection, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownListFor(model => model.SelectedElement, Model.SelectList)
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Save" class="btn btn-default" />
        </div>
    </div>
</div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

当按下表单上的提交按钮时,我想点击TestPostBack我的控制器。那也没有问题。但是我如何在我的模型中填写SelectedElement属性?我希望它是下拉列表中所选项目的值。

public ActionResult TestPostBack(MyModel model)
{
    throw new NotImplementedException();
}

标签: c#asp.net-mvcrazor

解决方案


我认为将整个对象取回并不容易。不是不可能,只是不容易。这里的问题是,对应于 HTML 选择元素的下拉菜单只回发选项的选定值,而不是文本。因此,人们可能会想到拦截表单发布请求并在其中添加文本,但这感觉有点hacky。

最直接的方法是只取回价值:

public class MyModel
{
    ...
    public int SelectedElementValue { get; set; }
}

Html.DropDownListFor(model => model.SelectedElementValue, Model.SelectList)

然后按值在元素中查找对象。希望他的价值观是独一无二的:

public ActionResult TestPostBack(MyModel model)
{
    // load list of elements
    Element selectedElement = //look up element by model.SelectedElementValue
}

推荐阅读