使用@using时如何添加验证，例如表单输入字段为空(Html.BeginForm())

Question

我有一个视图，它有一个表单和一个提交按钮。我还有一个用于创建视图的模型，但现在我真的不知道如何在这样一个没有输入标签或表单标签的视图中使用 JavaScript 来检查输入字段是否为空。

请帮助我可以使用的选项来验证我的字段。

这是我在下面的观点

<h2>Index2</h2>
<h5>@ViewBag.Msg</h5>
@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
    <div class="form-horizontal">
        <h4>BookViewModel</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.Title, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Title, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.Author, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Author, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Author, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.Year, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Year, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Year, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.Genre, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Genre, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Genre, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

---

这是我下面的模型，我尝试设置验证但没有工作

public class BookViewModel {
  [Required(ErrorMessage = "This Name field can not be empty.")]
  [Display(Name = "Title")]
  public string Title { get; set; }
  [Required(ErrorMessage = "This Author field can not be empty.")]
  [Display(Name = "Author")]
  public string Author { get; set; }
  [Required(ErrorMessage = "This Year Published field can not be empty.")]
  [Display(Name = "Year")]
  public string Year { get; set; }
  [Required(ErrorMessage = "This Genre field can not be empty.")]
  [Display(Name = "Genre")]
  public string Genre { get; set; }
}

---

最后是我的控制器

 public ActionResult Index2() {
     return View();
 }
 public ActionResult Display(string Title, string Author, string Genre, string Year) {
     BookViewModel NewBook = new BookViewModel();
     NewBook.Title = Title;
     NewBook.Author = Author;
     NewBook.Genre = Genre;
     NewBook.Year = Year;
     myList.Add(NewBook);
     return View(myList);
 }

Answer 1

在您的 Web 配置中添加以下代码：-

<appSettings>
<add key="ClientValidationEnabled" value="true"/> 
<add key="UnobtrusiveJavaScriptEnabled" value="true"/> 
</appSettings>

并在母版页中添加以下脚本：-

<script src="/Scripts/jquery-1.7.1.min.js"></script>
<script src="/Scripts/jquery.validate.min.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js">
</script>