如何使用 jquery unobtrusive 和 Asp.Net Mvc 验证动态生成的单选按钮组？
Posted
技术标签:
【中文标题】如何使用 jquery unobtrusive 和 Asp.Net Mvc 验证动态生成的单选按钮组？【英文标题】：How to validate dynamically generated radio button group using jquery unobtrusive and Asp.Net Mvc? 【发布时间】：2020-05-03 08:08:25 【问题描述】：我正在使用 Asp.Net Mvc 开发一个调查应用程序。我在项目的最后，但我有一个问题。拥有调查链接的客户进入链接并查看采访。问卷中的问题及其选项是动态创建的。某些问题的另一个选项功能可以为每个问题填写一个文本字段。将为问卷投票的客户必须使用单选按钮对所有问题进行投票。正如我所说，在某些问题中，“其他”选项会激活文本字段并在此处输入文本。提交投票的客户提交调查。提交时，必须回答所有问题。我怎样才能做到这一点使用 javascript 不显眼。我必须定义一个规则吗？我不熟悉 Javascript 不显眼。我正在通过抛出示例代码来等待您的帮助。
表格
@using (html.BeginForm("SubmitSurvey", "Survey", FormMethod.Post, new onsubmit = "return SubmitForm(this)" ))
@Html.AntiForgeryToken()
@Html.ValidationSummary(true, "", new @class = "text-danger" )
@Html.HiddenFor(model => model.Token)
<div class="card">
<div class="card-header bg-gradient-blue "><span class="badge badge-warning"><i class="fa fa-server"></i></span><b> @Model.SurveyName</b></div>
<div class="card-body" style="overflow-y: auto; max-height: 100%" id="questionList">
@ int i = 0;
@foreach (SurveyQuestions surveyQuestion in Model.SurveyQuestions)
<div class="card" style="margin-bottom: 5px">
<div class="card-header bg-gradient-blue"><span class="badge badge-warning">Question @(++i).</span> @surveyQuestion.Questions.QuestionName</div>
<div class="card-body" id="questionPortlet">
@foreach (Options option in surveyQuestion.Questions.Options)
<div class="custom-control custom-radio">
@Html.RadioButton("optionRadioButton-" + option.QuestionId, "option_" + option.QuestionId + "_" + option.OptionId, new id = "option_" + option.QuestionId + "_" + option.OptionId, @class = "custom-control-input" )
@Html.Label("option_" + option.QuestionId + "_" + option.OptionId, option.OptionName, new @class = "custom-control-label font-weight-lighter" )
</div>
@if (surveyQuestion.Questions.IsOtherOptionRequired)
<div class="form-group" id="optionOtherParent">
<div class="custom-control custom-radio">
@Html.RadioButton("optionRadioButton-" + surveyQuestion.QuestionId, "optionOther_" + surveyQuestion.QuestionId, new id = "optionOther_" + surveyQuestion.QuestionId, @class = "custom-control-input" )
@Html.Label("optionOther_" + surveyQuestion.QuestionId, "Other", new @class = "custom-control-label font-weight-lighter" )
</div>
@Html.TextArea("optionOtherText-" + @surveyQuestion.Questions.QuestionId, "", new @class = "form-control", rows = "3", id = "optionOtherText_" + surveyQuestion.QuestionId, disabled = "disabled" )
</div>
</div>
</div>
</div>
<div class="card-footer bg-primary d-flex justify-content-end">
<button type="submit" class="btn btn-warning" style="margin-bottom: 3px; margin-left: 5px; color: black"><i class="fa fa-save"></i>Send Survey</button>
</div>
</div>
上面生成的html代码
<div class="card" style="margin-bottom: 5px">
<div class="card-header bg-gradient-blue"><span class="badge badge-warning">Question 2.</span> Merinosun hangi modellerini begeniyorsunuz?</div>
<div class="card-body" id="questionPortlet">
<div class="custom-control custom-radio">
<input class="custom-control-input" id="option_4_2017" name="optionRadioButton-4" type="radio" value="option_4_2017" />
<label class="custom-control-label font-weight-lighter" for="option_4_2017">Model 1</label>
</div>
<div class="custom-control custom-radio">
<input class="custom-control-input" id="option_4_2018" name="optionRadioButton-4" type="radio" value="option_4_2018" />
<label class="custom-control-label font-weight-lighter" for="option_4_2018">Model 2</label>
</div>
<div class="custom-control custom-radio">
<input class="custom-control-input" id="option_4_2019" name="optionRadioButton-4" type="radio" value="option_4_2019" />
<label class="custom-control-label font-weight-lighter" for="option_4_2019">Model 3</label>
</div>
<div class="custom-control custom-radio">
<input class="custom-control-input" id="option_4_2020" name="optionRadioButton-4" type="radio" value="option_4_2020" />
<label class="custom-control-label font-weight-lighter" for="option_4_2020">Model 4</label>
</div>
<div class="custom-control custom-radio">
<input class="custom-control-input" id="option_4_2021" name="optionRadioButton-4" type="radio" value="option_4_2021" />
<label class="custom-control-label font-weight-lighter" for="option_4_2021">Model 5</label>
</div>
<div class="custom-control custom-radio">
<input class="custom-control-input" id="option_4_2022" name="optionRadioButton-4" type="radio" value="option_4_2022" />
<label class="custom-control-label font-weight-lighter" for="option_4_2022">Model 6</label>
</div>
</div>
</div>
已编辑
如何将关注转换为不显眼的验证
$(document).ready(function()
$('#radioValidate').click(function()
var check = true;
$("input:radio").each(function()
var name = $(this).attr("name");
if($("input:radio[name="+name+"]:checked").length == 0)
check = false;
);
if(check)
alert('One radio in each group is checked.');
else
alert('Please select one option in each question.');
);
);
enter code here
【问题讨论】：
不显眼的需要数据属性才能工作吗？您的输入似乎都没有 也在你的剃须刀里，你为什么不使用html.labelfor、html.textboxfor、html.validationfor等，这样它会为你添加数据属性（如果你已经注释了你的模型)
看看这个问题中的表格和模型：***.com/questions/33107674/… 或本教程：ecanarys.com/Blogs/ArticleID/260/…
屏幕上的问题和选项列在一个列表中。我应该在 for 循环中手动添加数据属性吗？我使用 html helper 编辑了问题。你现在能帮忙吗
我愿意 - 这些是您需要使用的属性：***.com/questions/11124880/…
【参考方案1】：
您可以尝试手动向按钮添加规则。
$yourButtonSelector.rules('add', 'required');
$yourFormSelector.validate();
if (!$yourFormSelector.valid())
return;
别忘了导入 jQuery 验证脚本！
【讨论】：
是否需要在for循环中手动定义数据属性，例如data_val等。因为问题和选项都显示在列表中。动态返回调查表。 @MehmetŞükrüMUMBUÇOĞLU 如果您执行以下操作，它应该可以工作：$("input:radio").each(function() $inputSelector.rules('add', 'required'); ); 然后 validate() 并检查表单是否有效
对不起，我不明白 $inputSelector 是什么？
@MehmetŞükrüMUMBUÇOĞLU 这是您要添加规则的输入的选择器。我知道你用的是什么，或者你有没有。但它代表您输入元素的选择器。可能类似于$(".custom-control-input")
或者您可以为每个要添加规则的标识符创建一个标识符以上是关于如何使用 jquery unobtrusive 和 Asp.Net Mvc 验证动态生成的单选按钮组？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用jQuery unobtrusive和Asp.Net Mvc验证动态生成的单选按钮组？
如何将 Microsoft.jQuery.Unobtrusive.Ajax 与 libman（库管理器）asp.net Core 2.1 一起使用？
自定义 asp.net mvc 3 jquery.validate.unobtrusive
jquery.validate.unobtrusive的使用