客户端验证不适用于 MVC 视图上的 Bootstrap 模式

Question

我有一个以表格形式列出所有国家/地区的页面，并且视图具有如下模型：

@model IEnumerable<Country>

在同一页面上，我有一个链接，允许用户通过模式弹出窗口（在该页面中定义）创建新国家/地区

<a operation="add" id="btnNewCountry" data-toggle="modal" data-target="#myModal" href="#">Add New Country</a>

模型弹出 sn-p 如下所示：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
@using (Html.BeginForm("ManageCountry", "Admin", FormMethod.Post, new { enctype ="multipart/form-data" }))
{
 <label for="module-text">Country Name</label>
 <input type="text" id="txtName" name="name" />

 <button type="submit" class="btn btn-primary">Save changes</button>
}

只要用户按下提交按钮，控件就会迅速到达控制器动作。

现在的挑战是我无法弄清楚如何在 CountryName 文本框（类似于 @Html.ValidationMessagefor 和 Required）上应用客户端验证作为页面模式的“添加新国家”弹出窗口（IEnumerable）与模式弹出窗口（仅适用于单个国家对象）不同

请帮忙！！

Answer 1

首先，您需要确保已将客户端验证框架包含到您的捆绑包中：

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js",
                    "~/Scripts/jquery.validate.js",
                    "~/Scripts/jquery.validate.unobtrusive.js","));

然后您可以像这样在您的属性上使用 [Required] 注释：

[Required]
public string CountryName {get; set;}

现在您可以使用：

@Html.ValidationMessageFor(x => x.Model.CountryName)

在视图中显示错误消息。

编辑：

如果浏览器支持HTML5，你也可以像这样使用'required=""'：

<input type="text" name="CountryName" required="">

编辑：

根据您的评论，我建议您使用 ViewModels。不需要映射的最简单方法是制作这样的 ViewModel：

[Required]
public List<Country> Countires { get; set; }

在您的控制器中，您可以像这样将数据绑定到 ViewModel：

//This is the call, that returns an IEnumerable
var countries = _repository.GetCountries().ToList();

var viewModel = new ViewModel(){
     Countries = countries,
}

这样您就不会直接在视图中使用 EF 查询。