Question

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

@model IEnumerable<Country>

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

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

模型弹出式片段如下所示：

<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 和必需） “添加新国家”Popup作为页面的模态（IEnumerable）与Modal Popup（仅适用于单个国家/地区对象）不同

请帮助!!

Answer 1

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

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

然后您可以使用属性中的[Required] Annotation：

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

现在你可以使用：

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

在视图中显示错误消息。

编辑：

如果浏览器支持HTML5，您也可以使用＆＃39;需要=＆＃34;＆＃34; ＆＃39;像这样：

<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查询。

客户端验证无法在MVC View上使用Bootstrap模式

1 个答案: