如何使用ASP.NET MVC手动启用jQuery验证

Question

我正在努力理解与ASP.NET MVC连接的jQuery验证的一些基础知识.

这个问题的简短版本是:我遗漏了哪些魔法允许@Html.EditorFor()执行jQuery验证所产生的代码,但不起作用我尝试使用完全相同的HTML连接我自己的jQuery验证？

作为一个学习练习(并且因为它模仿了我在网站上真正想做的事情),我在Visual Studio 2012中创建了一个新的MVC 4应用程序.我添加了一个视图模型:

using System.ComponentModel.DataAnnotations;
namespace ValidationTest.Models
{
    public class MyViewModel
    {
        [Required]
        public string MyStringValue { get; set; }
    }
}

我修改了Views\Home\Index.cshtml来创建一个基于我的视图模型的表单,如下所示:

@model ValidationTest.Models.MyViewModel
@using (Html.BeginForm(new { id = "MyForm" })) {
    @Html.LabelFor(m => m.MyStringValue)
    @Html.EditorFor(m => m.MyStringValue)
    @Html.ValidationMessageFor(m => m.MyStringValue)

    <br />
    <input type="submit" value="Submit" />
}

最后,我修改了Home控制器,将视图模型提供给表单并处理相关的POST,如下所示:

using System.Web;
using System.Web.Mvc;
using ValidationTest.Models;

namespace ValidationTest.Controllers
{
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            var viewModel = new MyViewModel();
            return View(viewModel);
        }

        [HttpPost]
        public ActionResult Index(MyViewModel viewModel)
        {
            if (!ModelState.IsValid) return View(viewModel);

            return RedirectToAction("About");
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your app description page.";
            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";
            return View();
        }
    }
}

当我运行项目时,网页会显示一个文本框,并神奇地验证用户是否必须输入值.到现在为止还挺好...

现在,我的实际应用程序是一个在线调查.它根据脚本显示问题并征求答案.我的实际viewmodel包含映射到问题文本的属性,用户提供的值等.viewmodel还包含一个Boolean Required属性,指定用户是否必须提供值(即,是否启用视图中的"必需"验证 - 所以这意味着我需要删除[Required]viewmodel中MyStringValue属性的属性,并根据viewmodel中的Required属性提供我自己的验证魔术.

这是我迷路的地方.在IE中,我可以看到示例应用程序(如上所述)中的@ html.xxx调用为表单生成以下HTML:

<label for="MyStringValue">MyStringValue</label>
<input  class="text-box single-line" 
        data-val="true" 
        data-val-required="The MyStringValue field is required." 
        id="MyStringValue" 
        name="MyStringValue" 
        type="text" 
        value="" />
<span data-valmsg-for="MyStringValue" data-valmsg-replace="true"></span>

但我没有在页面上的其他地方看到任何显然引用jQuery验证库的HTML,也没有看到启用验证的JavaScript代码,因此我不明白为什么这样做有用.

此外,如果我删除该[Required]属性,并硬编码View以发出上述HTML(没有magic @ html.xxx()调用),则根本不会进行验证.

我错过了什么？

Answer 1

是的,我错过了一些非常基本的东西.

为新MVC 4项目创建的页面模板(_Layout.cshtml)在页面末尾包含此代码:

        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)
    </body>
</html>

该代码引入了jQuery库(浏览器已经看到页面上的所有HTML之后),然后呈现可由视图提供的可选"部分".该代码并没有在jQuery验证库中取出.

ASP.NET MVC验证在没有jQuery验证的情况下工作,但所有验证都在服务器中完成.细心的观察者会注意到,一旦警告必须提供缺少的字符串值,客户端验证只需在冒犯的文本框中输入单个字符即可消除警告.但是,如果未启用jQuery验证,则键入文本框不会动态删除警告.

为了"打开"单个视图的jQuery验证,此代码需要驻留在视图的cshtml文件中的某个位置(风格上,它希望位于文件的末尾,因为它将显示在HTML的末尾) :

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

所以,我的问题的简短回答是在Views\Home\Index.cshtml文件的末尾添加上面的代码.这使得jQuery验证,魔术发生,并且不再忽略data-xxx属性.生活很好.

Answer 2

没有什么魔法可以让你失踪.Microsoft"不显眼的验证"脚本可以在任何使用jquery和jquery验证的网站中使用.它与ASP.NET无关 - 只要HTML是不显眼的脚本所期望的格式,那么脚本就可以工作. 这个小提琴显示了应用于非ASP.NET生成的表单的不显眼的脚本.

不显眼的脚本有两个主要任务:

1. 初始化jquery.validate.js插件
2. 读取标记中的data-val*属性并将其转换为jquery验证规则

您可能已经阅读过,不显眼的脚本读取的标记属性如下所示

data-val="true"
data-val-rulename="message"
data-val-rulename-paramname1="paramvalue"
data-val-rulename-paramname2="paramvalue"

所以输入字段可能如下所示

  <input
     data-val="true" 
     data-val-required="This field is required..." 
     data-val-number="Please enter a number..."
     data-val-range="Must be between 50 and 100...",
     data-val-range-min="50"
     data-val-range-max="100"
     id="mynumber" 
     name="mynumber" 
     type="text" value="" />

我对这个不引人注目的剧本的个人看法是,它属于Steve Sanderson在他的MVC书中所称的"demoware"类别.它开箱即用,但它有点惹人喜欢jquery验证,它更容易使用.当我开始一个新项目时,我倾向于删除它.