In this article I will explain with an example, how to enable Data Annotation validation on Client Side in ASP.Net MVC.
Bundles and their advantages
1. Bundles allows to reduce the loading time due to Scripts and CSS files by minimizing them.
2. ScriptBundle function accepts one or multiple files and minifies it into a Bundle.
3. The Bundle can be rendered in View using Scripts.Render function.
Configuring Bundles
In order to use Bundle feature in ASP.Net MVC project you will need to install the System.Web.Optimization DLL from Nuget.
1. First step is to start the Package Manager Console window by clicking View menu then Other Windows and finally Package Manager Console.
![Enable Data Annotation validation on Client Side in ASP.Net MVC]()
2. In the Package Manager Console window, type the following command and press Enter key and the package will start installing.
Install-Package Microsoft.AspNet.Web.Optimization
![Enable Data Annotation validation on Client Side in ASP.Net MVC]()
Once the package is installed, a success message will be displayed.
![Enable Data Annotation validation on Client Side in ASP.Net MVC]()
3. Now a new Class named BundleConfig.cs needs to be added to the App_Start folder of the MVC project.
![Enable Data Annotation validation on Client Side in ASP.Net MVC]()
Once the Class is added, the following code needs to be added to the class.
Namespace
You will need to import the namespace.
using System.Web.Optimization;
BundleConfig.cs
The project must have a folder named Scripts with the necessary jQuery files as shown below.
![Enable Data Annotation validation on Client Side in ASP.Net MVC]()
Note: If you do not have such folder, then you can create a new MVC project and Visual Studio will automatically create the Scripts folder in it. The same folder can be copied in your working project.
Inside the RegisterBundles static method, first a Bundle of jQuery files is created. Wildcard is used for version so that irrespective of the version the file will be selected.
The second Bundle is for jQuery validation files. Here too Wildcard is used to select all files that start with prefix jquery.validate.
namespace Bundles_MVC
{
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
}
}
}
4. The next step is to open the Global.asax file and call the RegisterBundles method inside the Application_Start event.
Namespace
You will need to import the namespace.
using System.Web.Optimization;
Global.asax
Inside the Application_Start event handle the RegisterBundles method of the BundleConfig class is called.
public class MvcApplication : System.Web.HttpApplication
{
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();
RouteConfig.RegisterRoutes(RouteTable.Routes);
BundleConfig.RegisterBundles(BundleTable.Bundles);
}
}
5. Now the System.Web.Optimization namespace needs to be added to the list of namespaces in the Web.Config file present in the Views folder.
<system.web.webpages.razor>
<host factorytype="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=5.2.2.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
<pages pagebasetype="System.Web.Mvc.WebViewPage">
<namespaces>
<add namespace="System.Web.Mvc"/>
<add namespace="System.Web.Mvc.Ajax"/>
<add namespace="System.Web.Mvc.Html"/>
<add namespace="System.Web.Routing"/>
<add namespace="System.Web.Optimization"/>
<add namespace="Bundles_MVC"/>
</namespaces>
</pages>
</system.web.webpages.razor>
Enabling Client Side Validation
The next step is to enable Client Side Validation in the Web.Config file of the MVC project. This is done by adding the ClientValidationEnabled and UnobtrusiveJavaScriptEnabled keys in the AppSettings section.
<appsettings>
<add key="webpages:Version" value="3.0.0.0"/>
<add key="webpages:Enabled" value="false"/>
<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appsettings>
Rendering Bundles in View
Finally to add a Controller, Model and a View and then render the Bundled scripts as shown below.
@model Bundles_MVC.Models.PersonModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
</head>
<body>
<div>
</div>
</body>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
</html>
When the project is executed, the rendered Scripts can be seen in the Page Source in browser.
![Enable Data Annotation validation on Client Side in ASP.Net MVC]()
Error
In case you receive the following error.
![Enable Data Annotation validation on Client Side in ASP.Net MVC]()
You will have to remove the following section from the Web.Config file of the MVC project.
![Enable Data Annotation validation on Client Side in ASP.Net MVC]()
Downloads
