如何验证.net core 中的动态控件
How to validate dynamic controls in .net core
我正在创建调查应用程序,我正在为其动态创建控件(如复选框、单选按钮、文本框等)。
每个问题都有控件,具体取决于分配给问题的控件类型和问题类型,将呈现答案选项(复选框、单选按钮)。
在 Next/Previous 导航中,我将当前页面的答案存储在数据库中。在浏览页面时,我正在 ajax 调用数据库保存,而我的 UI/controls 不在表格中。
我已经根据我的 LMS_SurveyQuestions 和 LMS_SurveyQuestionOptionChoice table 创建了 ViewModel。
因此,在 for 循环中创建 UI 视图时,我在创建 AnswerChoice 控件时直接将 SurveyQuestionOptionChoiceID
指定为控件 ID,并将其存储在 table SurveyUserAnswer 中table.
型号
public class LMS_TraineeSurveyPaginationViewModel
{
public List<LMS_SurveyQuestions> SurveyQuestions { get; set; }
public List<LMS_SurveyQuestionOptionChoice> SurveyQuestionOptionChoice { get; set; }
public SurveyPager Pager { get; set; }
}
这就是我渲染视图的方式
@foreach (var item in Model.SurveyQuestions)
{
foreach (var data in Model.SurveyQuestionOptionChoice.Where(x => x.SurveyQuestionID == item.SurveyQuestionID).ToList())
{
if (item.QuestionTypeID == QuestionType.RadioButton)
{
<li style="list-style:none;">
<input type="radio" name="rb" id="@data.SurveyQuestionOptionChoiceID" />
<span>@data.OptionChoice</span>
</li>
}
else if (item.QuestionTypeID == QuestionType.CheckBox)
{
<li style="list-style:none;">
<input type="checkbox" id="@data.SurveyQuestionOptionChoiceID" name="@data.SurveyQuestionOptionChoiceID" " />
<span>@data.OptionChoice</span>
</li>
}
}
}
在将答案保存到数据库时,我创建了 JSON/JS 数组作为 SurveyUserAnswer 的模型,并将其保存到数据库中,如下所示。下面是单选按钮的例子
function SaveValues() {
var surveyQuestion = @Html.Raw(Json.Serialize(Model.SurveyQuestions.ToArray()));
var surveyQuestionOptionChoide = @Html.Raw(Json.Serialize(Model.SurveyQuestionOptionChoice.ToArray()));
for (item in surveyQuestion) {
var surveyQuestionID=surveyQuestionViewModel[item].SurveyQuestionID;
var filteredData = surveyQuestionOptionChoide.filter(function(filteredItem) {
return (filteredItem.SurveyQuestionID==surveyQuestionID);
});
for (optionChoice in filteredData) {
if(surveyQuestion[item].QuestionTypeID=='@QuestionType.RadioButton') {
if (($('#'+SurveyQuestionOptionChoiceID).prop("checked"))) {
surveyUserAnswer.push({ SurveyUserAnswerID: filteredData[optionChoice].SurveyUserAnswerID==null?0:filteredData[optionChoice].SurveyUserAnswerID,
SurveyQuestionOptionChoiceID: SurveyQuestionOptionChoiceID,SurveyUserID:'@ViewBag.SurveyUserID',AnswerText:null,
MarksObtained:filteredData[optionChoice].Marks,WhenCreated:'@DateTime.UtcNow',WhoCreated:'@tenant.UserID'});
}
}
}
}
$.post('@Url.Action("GetTraineeSurvey", "Survey")', {SurveyID:surveyID,page:page, surveyUserAnswer: surveyUserAnswer,PrevBranchQuestionPage:currentPage,IsBranchQuestionAvailable:IsBranchQuestionAvailable }, function (data) {
$('#surveyModalContent').html('');
$('#surveyModalContent').html(data);
$("#surveyModal").modal('show');
}).fail(function() {
alert( "error in GetTraineeSurvey" );
}).success(function() { });
}
所以,我的问题是如何在这种情况下验证动态创建的控件?
您可以对控件的数据属性使用不显眼的 jQuery 验证。
在 LINK.
上阅读更多相关信息
我正在创建调查应用程序,我正在为其动态创建控件(如复选框、单选按钮、文本框等)。
每个问题都有控件,具体取决于分配给问题的控件类型和问题类型,将呈现答案选项(复选框、单选按钮)。
在 Next/Previous 导航中,我将当前页面的答案存储在数据库中。在浏览页面时,我正在 ajax 调用数据库保存,而我的 UI/controls 不在表格中。
我已经根据我的 LMS_SurveyQuestions 和 LMS_SurveyQuestionOptionChoice table 创建了 ViewModel。
因此,在 for 循环中创建 UI 视图时,我在创建 AnswerChoice 控件时直接将 SurveyQuestionOptionChoiceID
指定为控件 ID,并将其存储在 table SurveyUserAnswer 中table.
型号
public class LMS_TraineeSurveyPaginationViewModel
{
public List<LMS_SurveyQuestions> SurveyQuestions { get; set; }
public List<LMS_SurveyQuestionOptionChoice> SurveyQuestionOptionChoice { get; set; }
public SurveyPager Pager { get; set; }
}
这就是我渲染视图的方式
@foreach (var item in Model.SurveyQuestions)
{
foreach (var data in Model.SurveyQuestionOptionChoice.Where(x => x.SurveyQuestionID == item.SurveyQuestionID).ToList())
{
if (item.QuestionTypeID == QuestionType.RadioButton)
{
<li style="list-style:none;">
<input type="radio" name="rb" id="@data.SurveyQuestionOptionChoiceID" />
<span>@data.OptionChoice</span>
</li>
}
else if (item.QuestionTypeID == QuestionType.CheckBox)
{
<li style="list-style:none;">
<input type="checkbox" id="@data.SurveyQuestionOptionChoiceID" name="@data.SurveyQuestionOptionChoiceID" " />
<span>@data.OptionChoice</span>
</li>
}
}
}
在将答案保存到数据库时,我创建了 JSON/JS 数组作为 SurveyUserAnswer 的模型,并将其保存到数据库中,如下所示。下面是单选按钮的例子
function SaveValues() {
var surveyQuestion = @Html.Raw(Json.Serialize(Model.SurveyQuestions.ToArray()));
var surveyQuestionOptionChoide = @Html.Raw(Json.Serialize(Model.SurveyQuestionOptionChoice.ToArray()));
for (item in surveyQuestion) {
var surveyQuestionID=surveyQuestionViewModel[item].SurveyQuestionID;
var filteredData = surveyQuestionOptionChoide.filter(function(filteredItem) {
return (filteredItem.SurveyQuestionID==surveyQuestionID);
});
for (optionChoice in filteredData) {
if(surveyQuestion[item].QuestionTypeID=='@QuestionType.RadioButton') {
if (($('#'+SurveyQuestionOptionChoiceID).prop("checked"))) {
surveyUserAnswer.push({ SurveyUserAnswerID: filteredData[optionChoice].SurveyUserAnswerID==null?0:filteredData[optionChoice].SurveyUserAnswerID,
SurveyQuestionOptionChoiceID: SurveyQuestionOptionChoiceID,SurveyUserID:'@ViewBag.SurveyUserID',AnswerText:null,
MarksObtained:filteredData[optionChoice].Marks,WhenCreated:'@DateTime.UtcNow',WhoCreated:'@tenant.UserID'});
}
}
}
}
$.post('@Url.Action("GetTraineeSurvey", "Survey")', {SurveyID:surveyID,page:page, surveyUserAnswer: surveyUserAnswer,PrevBranchQuestionPage:currentPage,IsBranchQuestionAvailable:IsBranchQuestionAvailable }, function (data) {
$('#surveyModalContent').html('');
$('#surveyModalContent').html(data);
$("#surveyModal").modal('show');
}).fail(function() {
alert( "error in GetTraineeSurvey" );
}).success(function() { });
}
所以,我的问题是如何在这种情况下验证动态创建的控件?
您可以对控件的数据属性使用不显眼的 jQuery 验证。 在 LINK.
上阅读更多相关信息