Question

使用ASP.NET Core MVC我试图使用bootstrap form-group和form-control以及带注释的模型来呈现客户端验证，但它无法正常工作。但是，如果我使用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; }
}

我的观点如下：

＆＃13;

@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>

＆＃13;

在Get上，页面的来源如下：

＆＃13;

<!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>

＆＃13;

我一直在绞尽脑汁，但我无法想象我所缺少的东西。任何帮助将不胜感激。

Answer 1

你在_ViewImports.cshtml中添加了Tag Helpers吗？否则，在views文件夹下创建一个剃刀HTML文件，并将其命名为_ViewImports.cshtml。并添加以下代码。

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

再试一次。

客户端

1 个答案: