时间戳

首页 > 解决方案 > 鉴于没有从 dropDownList 中选择任何内容，有没有办法手动触发所需的验证

c# - 鉴于没有从 dropDownList 中选择任何内容，有没有办法手动触发所需的验证

问题描述

我有一个剃须刀页面应用程序，它在其中一个 cshtml 页面中创建一个 dropDownList。

看法

        @Html.DropDownListFor(model => model.SelectedItem, model.Items, new
        {
           @class = "**dropDown**",
        })
        <div class="error">
            @Html.ValidationMessageFor(model => model.SelectedItem)
        </div>

模型

        public IEnumerable<SelectListItem> Items{ get; set; }

        [Required(ErrorMessage = "Selected Item field is required.")]
        public int SelectedItem{ get; set; }

被填充的元素

<select class="dropDown" data-val="true" data-val-number="The field Items must be a number." data-val-required="Selected Item field is required." id="SelectedItem" name="SelectedItem"></select>

验证错误消息显示在提交表单时下拉列表没有选择任何内容，这是预期的行为。

但是，最近我添加了一个名为 Material Design Bootstrap 的新 JavaScript 来更改组件的一些外观。

看法

        @Html.DropDownListFor(model => model.SelectedItem, model.Items, new
        {
           @class = "**select**",
        })
        <div class="error">
            @Html.ValidationMessageFor(model => model.SelectedItem)
        </div>

被填充的元素

<input class="form-control select-input placeholder-active" type="text" role="listbox" aria-multiselectable="false" aria-disabled="false" aria-haspopup="true" aria-expanded="false" readonly="">

您可以立即看到 MBD 将其自定义行为更改元素从select应用到input。因此，当没有为下拉列表选择任何值时，不会显示验证错误消息，并且表单会成功提交。我已经手动添加了data-val="true"和data-val-required="Selected Item field is required." 但这也无济于事。

我可以看到，当我添加“必需”属性并提交表单时，元素会更新为

<input class="form-control select-input placeholder-active input-validation-error" type="text" role="listbox" aria-multiselectable="false" aria-disabled="false" aria-haspopup="true" aria-expanded="false" readonly="" required="" data-val="true" data-val-required="Selected Item field is requiredis required." aria-required="true" aria-describedby="-error -error -error -error -error" aria-invalid="true">

但仍然没有验证消息的迹象。

是否有手动触发 ValidationMessageFor 的方法？

标签： c#jqueryasp.net-corerazormdbootstrap

解决方案

这是我的整个工作演示，您可以查看：

_Layout.cshtml：

<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"]</title>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
    <!-- Google Fonts -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
    <!-- Bootstrap core CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
    <!-- Material Design Bootstrap -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css" rel="stylesheet">

</head>
<body>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>
   
    <script src="~/js/site.js" asp-append-version="true"></script>

    <!-- JQuery -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- Bootstrap tooltips -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
    <!-- MDB core JavaScript -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/js/mdb.min.js"></script>
    
    @RenderSection("Scripts", required: false)
</body>
</html>

_ValidationScriptsPartial.cshtml：

<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>

索引.cshtml：

@model DropDownDTO
<form method="post">
    @Html.DropDownListFor(model => model.SelectedItem, Model.Items, new
          {
             @class = "**select**",
          })
    <div class="error">
        @Html.ValidationMessageFor(model => model.SelectedItem)
    </div>

    <input type="submit"value="Create" />
</form>
       
@section Scripts
{
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}

}

家庭控制器：

public async Task<ActionResult> Index()
{
    var model = new DropDownDTO()
    {
        Items = new List<SelectListItem>() {
        new SelectListItem() { Value = "", Text = "" },  //be sure add null value for the first option...
        new SelectListItem() { Value = "1", Text = "Elementos1" },
        new SelectListItem() { Value = "2", Text = "Elementos2" },
        new SelectListItem() { Value = "3", Text = "Elementos3" }
        }
    };
    return View(model);
}
[HttpPost]
public IActionResult Index(DropDownDTO model)
{
    return View();
}

推荐阅读