没有选定项目时的下一步按钮行为答案

【问题标题】：Next button behavior when no selected items没有选定项目时的下一步按钮行为
【发布时间】：2018-08-28 10:34:10
【问题描述】：

我有一个带有动态部分的 html 页面，该部分会根据所选的选项而变化。这是选项部分：

<div class="form-group-lg">
                        @foreach (var respuesta in Model.ListRespuestas) {
                            <div class="col-md-8">
                                <label class="control-label" for="@respuesta.Id">
                                    @respuesta.Nombre
                                </label>
                                <input type="radio" name="SelectedItem" id="@respuesta.Id" value="@respuesta.Id" style="margin-right: 10px;" />
                            </div>
                        }
                    </div>

当按下“下一个”（非西班牙语使用者为“siguiente”）按钮时，情况会发生变化。这是按钮的代码：

<div class="col-md-6 text-right">
                    <span data-placement="top" data-toggle="tooltip" title="" data-original-title="Confirmación de acción">
                        <input type="submit" id="siguiente" class="btn btn-primary" value="Siguiente" />
                    </span>
                </div>

这个按钮是在这里编写的：

<script>
            $('#siguiente').click(function (e) {
                e.preventDefault();
                SendAjaxForm();
            });
            $('input:radio[name="SelectedItem"]').change(
                function () {
                    if (this.checked) {
                        $.post('@Url.Content("~/Home/Opciones/?idrespuesta=")' + this.id, function (data) {
                            $("#content-options").html(data);
                        });
                    }
                });
        </script>

所有这些都可以正常工作。页面显示第一个问题，然后用户选择一个并单击下一步，然后框架发生变化并显示对应的下一个问题，并且该过程继续进行，直到完成问题分支。

但是，我不知道如何编写按钮以在单击并且未选择任何选项时引发警告消息（棘手的部分是未选择的行为，我知道如何引发异常）。欢迎任何帮助（包括文档或维基）。提前谢谢大家。

编辑 - 更新

所以我更新了按钮脚本

<script>
            $('#siguiente').click(function (e) {
                if ($('input:radio[name="SelectedItem"]').is(':checked')){
                    e.preventDefault();
                    SendAjaxForm();

                    $('input:radio[name="SelectedItem"]').change(function () {
                        if (this.checked) {
                            $.post('@Url.Content("~/Home/Opciones/?idrespuesta=")' + this.id, function (data) {
                                $("#content-options").html(data);
                            });
                        }
                    });
                } else {
                    alert("No se ha seleccionado nada");
                }
            });

        </script>

现在，当没有选择任何选项时，我会显示一条警告消息，但“SendAjaxForm”函数仍会执行 - 生成异常（在期望 int 时引用 null 参数，因为字段“idrepuesta”为 null，未选择任何选项） .不知道为什么。总之谢谢大家。

【问题讨论】：

如果您通过绑定到具有强类型 HtmlHelper 方法的模型来生成正确的视图，那么这一切都可以开箱即用，但您可以随时检查 resp 是否为undefined
@StephenMuecke 我实际上收到了这个未完成的项目作为我学习的一部分，您能否提供参考/链接，以便我可以详细了解这些 HtmlHelper 方法？谢谢你的回答。
您在循环中生成单选按钮的代码为<label class="control-label"><span>@respuesta.Nombre</span>@Html.RadioButtonFor(m => m.SelectedItem, respuesta.Id, new { id = "" })</label>，在循环后添加@Html.ValidationMessageFor(m => m.SelectedItem)，其中属性为[Required]public int? SelectedItem { get; set; }
添加内容时您将重新解析$.validator - 请参阅this answer。然后你处理表单.submit()事件并检查.valid()，如果没有取消ajax（会显示错误信息）
@StephenMuecke 感谢您的回答。您提出的更改超出了我目前的 C# 知识（不是因为我不理解它，似乎是一个适当的结构/设计问题），但我会好好研究一下。如果您能指出我如何搜索它，那就太好了。再次感谢。

标签： javascript c# jquery html asp.net-mvc

【解决方案1】：

我终于明白了。建议的更改仅影响脚本：

<script>
$('#siguiente').click(function (e) {

    $('input:radio[name="SelectedItem"]').change(function () {
        if (this.checked) {
            $.post('@Url.Content("~/Home/Opciones/?idrespuesta=")' + this.id, function (data) {
                $("#content-options").html(data);
            });
        }
    });

    if ($('input:radio[name="SelectedItem"]').is(':checked')){
        e.preventDefault();
        SendAjaxForm();

    } else {
        e.preventDefault();
        alert("No se ha seleccionado nada");
        }
});</script>

说明

在点击函数上插入if... else，我们检查是否选择了任何选项：

if ($('input:radio[name="SelectedItem"]').is(':checked')){
        e.preventDefault();
        SendAjaxForm();

    } else {
        e.preventDefault();
        alert("No se ha seleccionado nada");
        }

注意 both if... else 替代品上的 e.preventDefault(); 行。这是为了防止按钮在没有选中选项的情况下仍然有效。

现在，如果我们在未选中任何选项的情况下按“下一步”按钮，则会显示警报并停留在页面上，直到之前选择了任何选项。感谢大家的支持，希望对大家有帮助。

编码愉快。

【讨论】：