【问题标题】:data-val and data-val-required are not being generated on client side客户端未生成 data-val 和 data-val-required
【发布时间】:2017-05-29 13:50:27
【问题描述】:

使用 ASP.NET Core MVC 我正在尝试使用引导表单组和表单控件以及带有注释的模型来呈现客户端验证,但它不起作用。但是,如果我使用 Editor-For,验证工作正常。对于我正在使用的脚本:

"jquery": "~3.1.1",
"jquery-validation": "~1.15.1",
"jquery-validation-unobtrusive": "~3.2.6"

我的模型是这样的

public class LoginViewModel
{
    [Required]
    public string Username { get; set; }
    [Required]
    public string Password { get; set; }
    [Required]
    public string Mystring { get; set; }
}

我的看法是这样的:

@model PrioritizedListUI.Models.LoginViewModel
@{
    ViewBag.Title = "Log in";
}

<div class="row">
    <div class="col-md-6 col-md-offset-3">
        <h3>Login</h3>
        <form method="post" novalidate>
            <div asp-validation-summary=""></div>
            <div class="form-group">
                <label asp-for="Username"></label>
                <input asp-for="Username" class="form-control" />
                <span asp-validation-for="Username"></span>
            </div>
            <div class="form-group">
                <label asp-for="Password"></label>
                <input type="password" asp-for="Password" class="form-control" />
                <span asp-validation-for="Password"></span>
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.Mystring, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Mystring, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Mystring, "", new { @class = "text-danger" })
                </div>
            </div>
            <div class="form-group">
                <input type="submit" value="login" class="btn btn-success" />
            </div>
        </form>
    </div>
</div>

在Get上,页面的来源如下:

<!DOCTYPE html>

<html>

<head>
  <meta name="viewport" content="width=device-width" />
  <title>Log in</title>

  <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" />

</head>

<body>
  <h3>Title</h3>
  <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">

      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>

      </div>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li><a href="/">Home</a>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Search<span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="/SearchLine">Lines</a>
              </li>
              <li><a href="/SearchGuidelineNotes">Guideline Notes</a>
              </li>
            </ul>
          </li>
          <li><a href="/ListVersion">Admin</a>
          </li>
          <li><a href="/Home/About">About</a>
          </li>
          <li><a href="/Home/Contact">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="container body-content">
    <section class="content-wrapper main-content clear-fix">

      <div class="row">
        <div class="col-md-6 col-md-offset-3">
          <h3>Login</h3>
          <form method="post" novalidate>
            <div asp-validation-summary=""></div>
            <div class="form-group">
              <label asp-for="Username"></label>
              <input asp-for="Username" class="form-control" />
              <span asp-validation-for="Username"></span>
            </div>
            <div class="form-group">
              <label asp-for="Password"></label>
              <input type="password" asp-for="Password" class="form-control" />
              <span asp-validation-for="Password"></span>
            </div>
            <div class="form-group">
              <label class="control-label col-md-2" for="Mystring">Mystring</label>
              <div class="col-md-10">
                <input class="form-control text-box single-line" data-val="true" data-val-required="The Mystring field is required." id="Mystring" name="Mystring" type="text" value="" />
                <span class="field-validation-valid text-danger" data-valmsg-for="Mystring" data-valmsg-replace="true"></span>
              </div>
            </div>
            <div class="form-group">
              <input type="submit" value="login" class="btn btn-success" />
            </div>
          </form>
        </div>
      </div>
    </section>
    <hr />
    <footer>
      <p>&copy; 2017 - Alderglen</p>
    </footer>
  </div>

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


</body>

</html>

我一直在绞尽脑汁,但我不知道我错过了什么。任何帮助将不胜感激。

【问题讨论】:

  • 请不要使用术语 MVC6。不再有 MVC6,只有 ASP.NET Core MVC (1.0 & 1.1)

标签: jquery validation asp.net-core asp.net-core-mvc


【解决方案1】:

您是否在 _ViewImports.cshtml 中添加了 Tag Helpers?否则,在 views 文件夹下创建一个 razor HTML 文件并将其命名为 _ViewImports.cshtml。并添加以下代码。

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper "*, <YOUR_WEB_APP_NAME>"

然后再试一次。

【讨论】:

  • 做到了。非常感谢!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-10-20
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-07-31
相关资源
最近更新 更多