mvc radiobuttonfor в редакторе шаблонной клавиатуры навигация не задает модель
Контекст: Модель, генерирующая некоторые группы RadioButtonFor в качестве входных данных для ответа на вопросы.
Что происходит:
Случай 1. При щелчке мышью на опции радио дисплей выглядит правильно. Когда [HttpPost] ActionResult(модель) для страницы запускается, Model.Answer дает правильное значение. Что хорошо и желательно.
Случай 2. При перемещении с помощью клавиатуры в группу радиостанций и выборе одной из них с помощью клавиш со стрелками дисплей выглядит правильно. Но когда срабатывает [HttpPost] ActionResult(модель), значение Model.Answer не меняется по сравнению с тем, которое было загружено при загрузке страницы.
Вот код, который делает группу радио:
@model NexusPWI.ViewModels.Wizard.QuestionModel
@* Dynamically generate and model bind controls for QuestionModel *@
@{
<div class="row d-contents">
<div class="form-group">
<div class="question">
<div class="col-lg-2 d-contents">
<div class="btn-group btn-toggle group-sm d-contents" data-toggle="buttons">
<label class="btn QuestionRadio btn-default @(Model.Answer == YesNoNAOptions.Yes ? "active" : "")" for="@Model.Answer">
@YesNoNAOptions.Yes.ToString().ToUpper()
@Html.RadioButtonFor(Model => Model.Answer, YesNoNAOptions.Yes, new { @onfocus = "radiofocus(event)", @onblur = "radioblur(event)" })
</label>
<label class="btn QuestionRadio btn-default @(Model.Answer == YesNoNAOptions.No ? "active" : "")" for="@Model.Answer">
@YesNoNAOptions.No.ToString().ToUpper()
@Html.RadioButtonFor(Model => Model.Answer, YesNoNAOptions.No, new { @onfocus = "radiofocus(event)", @onblur = "radioblur(event)" })
</label>
@if (!Model.NaInvalid)
{
<label class="btn QuestionRadio btn-default @(Model.Answer == YesNoNAOptions.NA ? "active" : "")" for="@Model.Answer">
N/A
@Html.RadioButtonFor(Model => Model.Answer, YesNoNAOptions.NA, new { @onfocus = "radiofocus(event)", @onblur = "radioblur(event)" })
</label>
}
</div>
</div>
<div class="col-lg-9 d-contents">
<div class="row">
<p>
<strong>@Model.Question</strong>
</p>
</div>
@Html.HiddenFor(x => Model.Question_IdentityMarker, new { @class = "Question_IdentityMarker" })
</div>
</div>
</div>
</div>
}
Вот пример сгенерированного HTML:
<div class="form-group">
<div class="question">
<div class="col-lg-2 d-contents">
<div class="btn-group btn-toggle group-sm d-contents" data-toggle="buttons">
<label class="btn QuestionRadio btn-default " for="No">
YES
<input data-val="true" data-val-required="The Answer field is required." id="Questions_0__Answer" name="Questions[0].Answer" onblur="radioblur(event)" onfocus="radiofocus(event)" value="Yes" type="radio">
</label>
<label class="btn QuestionRadio btn-default active" for="No">
NO
<input checked="checked" id="Questions_0__Answer" name="Questions[0].Answer" onblur="radioblur(event)" onfocus="radiofocus(event)" value="No" type="radio">
</label>
<label class="btn QuestionRadio btn-default " for="No">
N/A
<input id="Questions_0__Answer" name="Questions[0].Answer" onblur="radioblur(event)" onfocus="radiofocus(event)" value="NA" type="radio">
</label>
</div>
</div>
<div class="col-lg-9 d-contents">
<div class="row">
<p>
<strong>Do you charge sales tax?</strong>
</p>
</div>
<input class="Question_IdentityMarker" id="Questions_0__Question_IdentityMarker" name="Questions[0].Question_IdentityMarker" value="CUSTOMERSALESTAX" type="hidden">
</div>
</div>
</div>
РЕДАКТИРОВАТЬ Добавление onFocus & onBlur по запросу: onFocus & onBlur - это подсветка CSS для навигации по клавиатуре, чтобы сделать ее более понятной для пользователя, где они находятся на странице.
function radiofocus(event) {
// Get event object if using Internet Explorer
var e = event || window.event;
// Check the object for W3C DOM event object, if not use IE event object to update the class of the parent element
if (e.target) {
var addClass = focusClass(e.target.parentNode.parentNode.parentNode.parentNode.parentNode.className, "r");
e.target.parentNode.parentNode.parentNode.parentNode.parentNode.className = addClass;
} else {
var addClass = focusClass(e.srcElement.parentNode.parentNode.parentNode.parentNode.parentNode.className, "r");
e.srcElement.parentNode.parentNode.parentNode.parentNode.parentNode.className = addClass;
}
};
function radioblur(event) {
// Get event object if using Internet Explorer
var e = event || window.event;
var removeClass = focusClass("", "r").trim();
// Check the object for W3C DOM event object, if not use IE event object to update the class of the parent element
if (e.target) {
e.target.parentNode.parentNode.parentNode.parentNode.parentNode.className = e.target.parentNode.parentNode.parentNode.parentNode.parentNode.className.replace(removeClass, "");
} else {
e.srcElement.parentNode.parentNode.parentNode.parentNode.parentNode.className = e.srcElement.parentNode.parentNode.parentNode.parentNode.parentNode.className.replace(removeClass, "");
}
};
Почему изменения в навигации не возвращаются к контроллеру?
Что-нибудь добавить, чтобы сделать это понятнее?
Примечание: по какой-то причине до того, как значение выбрано в группе радио, навигация по вкладке клавиатуры останавливается для каждого ответа радио на вопрос.