Привязка нескольких элементов формы к одному атрибуту модели - PullRequest
Новая
       31

Привязка нескольких элементов формы к одному атрибуту модели

3 голосов
/ 25 мая 2011

У меня есть модель 

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 выбрано только одно значение. Однако, если можно избежать этого, было бы еще лучше.

Что касается контроллера, я немного растерялся, как бы связать это?

1 Ответ

1 голос
/ 25 мая 2011

Модель: 

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');
        }
    });
});
...