0

上下文：模型生成一些 RadioButtonFor 分组作为回答问题的输入。

怎么了：

案例 1.当鼠标单击单选选项时，显示看起来正确。当页面的 [HttpPost] ActionResult(model) 被触发时，Model.Answer 会出现正确的值。这是好的和期望的。

案例 2.当使用键盘导航到无线电组并使用箭头键选择一个时，显示看起来正确。但是，当触发 [HttpPost] ActionResult (model) 时，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, "");
    }
};

为什么键盘导航的更改不会返回到控制器？

有什么要补充的以使这一点更清楚吗？

旁注：由于某种原因，在单选组中选择一个值之前，键盘选项卡导航会停止为问题的每个单选答案。

4

0 回答 0