When we were working with ASP.NET MVC 2, we needed
to write our own JavaScript
to get Client-Side Validation Summary with jQuery Validation plugin.
I am one of those unfortunate people still stuck with .NET Framework Runtime 2.0 and .NET Framework 3.5; meaning I am still on ASP.NET MVC 2.
So I will still keep on supporting by answering any question you may have with my original code.
Long awaited ASP.NET MVC 3 has been released, and it supports
Client Side Validation Summary with jQuery out-of-the-box with new features like Unobtrusive JavaScript.
1. _Layout.cshtml Template
Notice that I am using Protocol Relative URLs ( i.e., '//'. Not 'http://' or 'https://' )
to reference script files and css files and you should use it too like that!
However, please note that IE7 and IE8 will download the CSS files twice so use it with judgement.
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Assets/Site.css")" rel="stylesheet" type="text/css" />
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
@RenderBody()
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
<script src="//ajax.microsoft.com/ajax/jQuery.Validate/1.7/jQuery.Validate.min.js" type="text/javascript"></script>
<script src="//ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
</body>
</html>
2. MVC View Template
There are 3 things you *must* do exactly
to get
Client Side Validation Summary working.
(1) You must declare your Validation Summary **inside** the `Html.BeginForm()` block like below.
(2) You must pass `excludePropertyErrors: false`
to the Html.ValidationSummary() method.
@using (Html.BeginForm()) {
@Html.ValidationSummary(false, "Please fix these errors.");
<!-- The rest of your View Template -->
}
(3) You have
to put the following two elements in the `<appSettings />` block of your Web.config file.
<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
That is all you need
to do. Simple, right?
I will upload a sample project for download soon.
Please let me know if you run into some issues.
P.S:
Without getting into too much technical details, I just wanted
to let you know what I went through
to get this
to work.
I had
to look into the ASP.NET MVC 3 RTM Source Code and the jquery.validate.unobtrusive.js source.
Initially, I thought I have
to hack the jquery.validate.unobtrusive.js or something
to get this
to work.
But after digging into MVC3 RTM source, I found out how
to do it.
