Describes practical session on MVC Validation...Contains both server side and client side validation...also UNOBSTRUSIVE AJAX

1. MVC 3-RAZOR-Validations
Krunal Trivedi
Corporate Trainer DotNet,Silverlight,SPS 2010, SharePoint 15,MVC , Windows
Phone , Windows 8
MCT S For .NET Web Technology
MCTS For SharePoint Server 2010 Development
Co-Founder at Aavid Technologies
Email:krunaltrivedi@live.in
Contact : 09998472789

2. MVC 3 Web Applicaiton

4. ModelAdd New ClassCustomerClass.cs

5. ControllerAdd New ControllerCustomerController-->Empty Controller

6. Right Click on Index Action-Create View
Strongly-Typed View

7. Modify CustomerClass as shown below…
We are going to implement Validaiton

8. Create one directoryUtilityAdd New ClassAgeValidation.cs

9. Prepare Class logic…that is going to make sure age greater than 21

10. Open CustomerController
Create New ActionDisplayCustomer

11. Right Click on DisplayCustomerAdd ViewStrongly-Typed View

12. Run the application.
We are not getting proper validation messages…

13. Modify Your Index.cshtml view as shown below…

14. Now , Run Application.
We get proper validation messages.

17. • Direct Approach to Validation is..
– You can Directly right down validation logic inside
Controller Action…
– Let’s try…

18. Modify CustomerClass.cs as shown below….Comment out
validations attributes for FirstName and LastName

19. Modify DisplayCustomer Action of CustomerController

20. Run Application…
For FirstName and LastName we are getting validation messages from
DisplayCustomer Action.

21. We will use @Html.ValidationSummary(true)
It is used when there is some problem arising from an interaction between two or
more property values.

22. Modify Display Customer Action as shown below.

23. Run Application.

24. • In this case , it is not possible to display Property-Level
validation messages.
• Suppose , we want to display both Property-Level validation
messages and model-level validation messages.
• Let’s try…

25. Modify your Index.cshtml as shown below…

26. Run Application…

27. Modify output..and check it again…

29. Client-Side Validation
• The MVC Framework supports unobtrusive client-side
validation.
• The term unobtrusive means that validation rules are
expressed using attributes added to the HTML elements that
we generate.
• These are interpreted by a JavaScript library that is included
as part of the MVC Framework .

30. Unobstrusive means….3 things
• The first is that the JavaScript that performs the validation
is kept separate from the HTML elements, which means we
don’t have to include client-side validation logic into our views
and that the HTML we generate is easier to read.

31. • The second characteristic is that the validation is performed
using progressive enhancement.
• This means that if a user’s browser doesn’t support all of the
JavaScript features we require for client-side validation, then
the validation will be performed using simpler techniques.
• For example, if the user has disabled JavaScript, then server-
side validation will be seamlessly performed without the user
being otherwise penalized (no unpleasant error messages or
special steps to take).

32. • The third characteristic is a set of best practices to mitigate
the effect of browser inconsistencies and behaviors.

33. Enabling-Disabling Client-Side Validation
Open web.config and modify appsetting as shown below.

34. Referencing the JavaScript Libraries Required for Client-Side Validation
Open _Layout.cshtml and observer the libraries added

35. From Scriptsadd following .js file to _Layout.cshtml

36. • That’s it…
• Run the application…
• It works Right???

37. The order in which the jQuery files are referenced is significant.
If you change the order, you will find
that the client validation is not performed.
• The scripts folder contains two versions of each JavaScript
library.
• The versions whose name ends with min.js are the minimized
versions, meaning that all of the whitespace, comments, and
other nonessential content have been removed to reduce the
size of the library file.
• The minimized files can be much smaller and are typically
used in production to reduce the amount of data that the
client downloads.
• During development, the unminimized versions are typically
used so that the JavaScript can be debugged (or just read) if
problems arise.

38. We required…one more library..that is really important…

39. Run application…
Observer the client-side validation.

40. Client and Server side Validation messages.

42. How it works !!!
• One of the benefits of using the MVC Framework client-side
validation feature is that we don’t have to write any
JavaScript. Instead, the validation rules are expressed using
HTML attributes. Here is the
• HTML that is rendered by the Html.EditorFor helper for the
ClientName property when client-side
• validation is disabled:

43. Disable the Client-Side Validation as shown below….
Run Application.

44. Generate some validation message.

47. Enable Client-side validation..
By default it is enabled..so need to write following line..
If you write…..Cool…no issues…

48. Now generate the validation and check the page source.

49. • The MVC client-side validation support doesn’t generate any
JavaScript or JSON data to direct the validation process; like
much of the rest of the MVC Framework, we rely on
convention.
• The first attribute that was added is data-val. The jQuery
Validation library identifies those fields that require validation
by looking for this attribute.
• Individual validation rules are specified using an attribute in
the form data-val-<name>, where name is the rule to be
applied. So, for example, the Required attribute

50. • The interpretation of the required and length validation rules
is provided by the jQuery Validation library, on which the MVC
client validation features are built.

51. • The MVC client-validation features are built on top of the
jQuery Validation library, and if you prefer, you can use the
Validation library directly and ignore the MVC features.

52. Direct Jquery Validation.