MVC 3-RAZOR Validation
2 likes3,750 views
The document outlines the implementation of MVC 3 Razor validations in a web application, detailing the creation of a customer class, validation logic, and the use of client-side and server-side validation techniques. It explains how unobtrusive validation enhances user experience by separating validation logic from HTML and ensuring that validation occurs even if JavaScript is disabled. Additional information includes best practices for JavaScript library management and the reliance on HTML attributes for defining validation rules.
MVC 3-RAZOR Validation
- 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
- 5. ControllerAdd New ControllerCustomerController-->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 directoryUtilityAdd New ClassAgeValidation.cs
- 9. Prepare Class logic…that is going to make sure age greater than 21
- 10. Open CustomerController Create New ActionDisplayCustomer
- 11. Right Click on DisplayCustomerAdd ViewStrongly-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 Scriptsadd 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.