Question

我有一个模特

public class  Foo
{
  public string bar { get; set; }
  //Other stuff
}

在我看来，我需要向用户显示两个单选按钮和一个下拉列表，下拉列表作为组中的第三个单选按钮。

<%= Html.RadioButtonFor(m => m.bar, "A") %>
<%= Html.RadioButtonFor(m => m.bar, "B") %>
<%= Html.DropDownListFor(m => m.bar, ViewData["OtherUncommonOptions"] as SelectList)%>

解决这个问题的最佳方法是什么？

对于视图，我非常有信心jQuery可以确保只为bar选择了一个值。但是，如果可以避免这种情况会更好。

在控制器方面，我对如何绑定它有点迷失？

Answer 1

型号：

public class Foo
{
    public string Bar { get; set; }
}

控制器：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        ViewData["OtherUncommonOptions"] = new SelectList(
            Enumerable.Range(1, 5).Select(x => new SelectListItem 
            { 
                Value = x.ToString(), 
                Text = "item " + x 
            }),
            "Value",
            "Text"
        );
        return View(new Foo());
    }

    [HttpPost]
    public ActionResult Index(Foo model)
    {
        // model.Bar will contain the selected value here
        return View(model);
    }
}

查看：

<% using (Html.BeginForm()) { %>
    <%= Html.RadioButtonFor(m => m.Bar, "A", new { id = "barA" }) %>
    <%= Html.RadioButtonFor(m => m.Bar, "B", new { id = "barB" }) %>
    <%= Html.DropDownListFor(
        m => m.Bar,
        ViewData["OtherUncommonOptions"] as SelectList,
        "-- value --",
        new { id = "barDDL" }
    ) %>

    <input type="submit" value="OK" />
<% } %>

最后一部分是确保使用javascript，如果选择了两个单选按钮中的一个，下拉列表会清除其值，如果在下拉列表中选择了一个值，则取消选择单选按钮。

$(function() {
    $('#barA, #barB').click(function () {
        $('#barDDL').val('');
    });

    $('#barDDL').change(function () {
        if ($(this).val() != '') {
            $('#barA, #barB').removeAttr('checked');
        }
    });
});

绑定到一个模型属性的多个表单元素

1 个答案: