Question

上下文：模型生成一些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＆amp; onBlur应要求： onFocus＆amp; 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, "");
    }
};

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

要添加哪些内容以使其更清晰？

旁注：出于某种原因，在收音机组中选择值之前，键盘选项卡导航将针对问题的每个无线电答案停止。

在editortemplate键盘导航中的mvc radiobuttonfor不设置模型

0 个答案: