如何手动启用与ASP.NET MVC jQuery验证(How to manually enable

2019-07-20 10:53发布

我挣扎了解一些jQuery验证的有线了ASP.NET MVC的基础知识作为。

这个问题的短版是:什么魔法我缺少的,允许通过生成的代码@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; }
    }
}

我修改意见\首页\ 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" />
}

最后,我修改了主页控制器视图模型提供的形式和处理相关联的支柱,就像这样:

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();
        }
    }
}

当我运行该项目,该网页显示一个文本框,并奇迹般地将验证用户必须输入一个值。 到现在为止还挺好...

现在,我的实际应用程序是一个在线调查。 它显示的问题和征求基于脚本的答案。 我的实际视图模型包含映射到问题的文本,由用户提供的值等视图模型还包含一个指定用户是否必须提供一个值的Boolean必填属性的属性(即是否要启用“要求”中查看验证) -所以这意味着我需要删除[Required]基于视图模型Required属性上MyStringValue property属性在我的视图模型,并提供自己的验证魔法。

这是我迷路。 在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>

但我没有看到任何HTML其他地方明显引用jQuery的验证库的页面上,我也不看的JavaScript代码启用验证,所以我不明白为什么在所有工作。

此外,如果我删除[Required]属性,以及硬编码的视图发出上述HTML(没有魔法@ 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")
}

所以,简单的答案,我的问题是在我的意见\首页\ Index.cshtml文件的末尾添加上面的代码。 这使得jQuery验证,奇迹发生了,并且数据-XXX属性不再理会。 生活很好。



Answer 2:

有没有神奇的是你缺少。 微软“不引人注目的验证”脚本可以在使用jQuery和JQuery验证的网站中使用。 它不依赖于ASP.NET - 只要HTML是不显眼的脚本期望的格式,那么该脚本将正常工作。 这小提琴显示适用于不是由ASP.NET产生一种形式的不显眼的脚本 。

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

  1. 初始化jquery.validate.js插件
  2. 读取数据-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="" />

我个人不显眼的脚本的看法是,它属于什么史蒂夫·桑德森调用“演示软件”的范畴了MVC的书 。 它做了一些不错的东西开箱即用,但它蹒跚JQuery验证这是很容易对自己使用。 我倾向于把它删除,当我开始一个新项目。



文章来源: How to manually enable jQuery validation with ASP.NET MVC