如何验证 .net core 中的动态控件

Question

我正在创建调查应用程序，我正在为其动态创建控件（如复选框、单选按钮、文本框等）。

每个问题都有控件，具体取决于分配给问题的控件类型和问题类型，将呈现答案选项（复选框、单选按钮）。

在下一个/上一个导航中，我将当前页面答案存储在数据库中。在导航页面时，我正在执行 ajax 调用以保存数据库，并且我的 UI/控件不在表单中。

我已经根据我的 LMS_SurveyQuestions 和 LMS_SurveyQuestionOptionChoice 表创建了 ViewModel。

因此，在 for 循环中创建视图中的 UI 时，我在创建 AnswerChoice 控件时直接将 SurveyQuestionOptionChoiceID 分配为控件 ID，并将其存储在表 SurveyUserAnswer 表中。

型号

 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() { });
}

那么，我的问题是如何在这种情况下验证动态创建的控件？

Answer 1

您可以在控件的数据属性上使用不显眼的 jQuery 验证基础。 在LINK 上阅读更多相关信息。