Razor pages jQuery 函数验证问题答案

【问题标题】：Razor pages jQuery function validation issueRazor pages jQuery 函数验证问题
【发布时间】：2021-08-01 18:19:17
【问题描述】：

我在 Razor Pages .NET Core 中有一个表单，在这个表单中我有一个下拉菜单。此下拉列表从 jQuery 函数中获取它的值（字符串），如下所示：

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    <script>
        $(function () {
            $("#StartDate").on("change", function () {
                var time = $(this).val();
                $("#select").empty();
                $("#select").append("<option value=''>select </option>");
                $.getJSON(`?handler=Time&time=${time}`, (data) => {

                    $.each(data, function (i, item) {         
                        *$("#select").append("<option value='" + "'>" + item.hours + "</option>");*/
                        $("#select").append($("<option>").val(item.hours).text(item.hours));
                    });
                });
            });
        });
</script>


<form method="post" id="myForm">
    <div class="form-group">
         <h6><label class="col-form-label">Time</label></h6>
         <select id="select" asp-for="Time" class="form-control"></select>
         <span class="text-danger" asp-validation-for="Time"></span>
    </div>
</form>

后端：

[Required(ErrorMessage = "Field cannot be empty!")]
[BindProperty]
public string Time { get;set; }


public IActionResult OnPost()
{
 if (!ModelState.IsValid)
 {
     return Page();
 }            
}

我的问题是，在我提交表单后，ModelState.IsValid 检查总是失败。

经过一番研究，我发现原因是在我的jQuery函数中，因为添加的值没有经过验证。

我尝试将此行添加到我的函数中，但没有帮助：

 $.validator.unobtrusive.parse("#myForm");

现在，如果我从下拉列表中选择一个值，ModelState 将无效并返回页面

【问题讨论】：

标签： c# validation asp.net-core

【解决方案1】：

在我的代码中：

  <form method="post">
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        <div class="form-group">
            <label asp-for="StartDate" class="control-label"></label>
            <input asp-for="StartDate" class="form-control" min="@DateTime.Now.ToString("yyyy-MM-ddThh:mm")" max="2050-06-01T00:00" />
            <span asp-validation-for="StartDate" class="text-danger"></span>
        </div>


        <select id="select" asp-for="Time" class="form-control"></select>
        <span class="text-danger" asp-validation-for="Time"></span>
        <div class="form-group">
            <input type="submit" value="Create" class="btn btn-primary" />
        </div>
    </form>

@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script>
    $(function () {
        $("#StartDate").on("change", function () {
            var time = $(this).val();
            $("#select").empty();
            $("#select").append("<option value=''>select </option>");
            $.getJSON(`?handler=Time&time=${time}`, (data) => {

                $.each(data, function (i, item) {         
                    *$("#select").append("<option value='" + "'>" + item.hours + "</option>");*/
                    $("#select").append($("<option>").val(item.hours).text(item.hours));
                });
            });
        });
    });

当我从下拉列表中选择一个值时，它将通过验证，你可以在你的 OnPost 操作中创建一个端点。下面是我的测试，你可以看到哪一列验证失败。

【讨论】：