Razor привязать радиобокс к списку SelectListItem

Question

У меня есть базовая модель

public class SpeakerConsent
{
    public string FieldLabel { get; set; }
    public List<SelectListItem> OptionValues { get; set; }
}

Моя страница бритвы в настоящее время выглядит следующим образом

@for (var i = 0; i < Model.OptionValues.Count(); i++)
{
    @Html.RadioButtonFor(x => Model.OptionValues[i].Selected, Model.OptionValues[i].Value )
}

У меня может быть 4 или 5 элементов в моих OptionValues.

Вопрос. Как связать свойство Selected элемента SelectListItem, чтобы при публикации модели можно было определить, какая из переключателей была выбрана?

Answer 1

С вашим текущим кодом разметка HTML, сгенерированная для элемента ввода, будет выглядеть следующим образом:

<input data-val="true" name="OptionValues[0].Selected" type="radio" value="201">

имя - Selected, а значение - число.Свойство Selected типа SelectListItem имеет тип bool.При размещении данных формы привязка модели не будет работать должным образом.

ИМХО. Самый простой способ справиться со сценарием, подобным этому, - использовать шаблоны редактора.

Сначала я создам класс, представляющий данные, которые я хочу использовать с переключателями.

public class MyOption
{
    public bool IsSelected { set; get; }
    public int Id { set; get; }
    public string Text { set; get; }
}

Теперь в моей модели основного вида я добавлю свойство типа коллекции

public class SpeakerConsent
{
    public List<MyOption> Options { set; get; }
}

Теперь в вашем каталоге ~/Views/Shared/ создайте папку с именем EditorTemplates, а затем создайте в ней представление с именем MyOption.cshtml.У вас может быть разметка HTML, которую вы хотите использовать для визуализации переключателя в этом.Здесь я храню свойство Id в скрытом поле вместе с переключателем и меткой.

@model YourNamespace.MyOption
<div>
    <span>@Model.Text</span>
    @Html.HiddenFor(g=>g.Id)
    @Html.RadioButtonFor(b => b.IsSelected, true)
</div>

Теперь в своем действии GET вы можете заполнить это свойство Options представления yout SpeakerConsentмоделировать объект и отправить в представление.

public ActionResult Create()
{
   var vm = new SpeakerConsent();
   vm.Options = new List<MyOption>
   {
       new MyOption { Id=1, Text="Seattle"},
       new MyOption { Id=2, Text="Detroit"},
       new MyOption { Id=31, Text="Kerala"},
   };
   return View(vm);
}

Теперь на главном экране можно просто вызвать вспомогательный метод EditorFor.

@model YourNamespace.SpeakerConsent

@using (Html.BeginForm("Index", "Home"))
{
    @Html.EditorFor(a=>a.Options)
    <button type="submit">Save</button>
}

Обязательно проверьтеHTML-разметка, созданная этим кодом.обратите внимание на значение атрибута name для входных данных.

Когда форма отправлена, вы можете прочитать значение свойства Options, просмотреть его и прочитать свойство Id и IsSelectedцените и используйте их по мере необходимости

[HttpPost]
public ActionResult Create(SpeakerConsent model)
{
   // check model.Options
   // to do : return something
}