This is an article from the ASP.NET MVC software development series. This article describes one method of performing validation in an ASP.NET MVC application. In this tutorial, you learn how to move your validation logic out of your controllers and into a separate layer.
As you know, jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating and Ajax interactions for rapid web-development (asp.net mvc software development).
jQuery - part of ASP.NET MVC
Now jQuery is part of ASP.NET MVC. So we don’t have any barriers for using that technology in client side. In some of web-applications we develop we have to get much data from client. In one of our projects we had a table with mathematical formulas and parameters, which client can change. It looks like this:

We decided to make it with jQuery.
First of all we have to add jQuery library to our application. We put following code to the Sate.Master:

The next thing we did was adding jQuery code to the page:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
|
<script language="javascript" type="text/javascript"> $(document).ready( function() { var retrieveData = function(path, elId, href, funHandleData) { //Getting data for which our needed Var str; Var txt; Var project; Var currentSelected; // retrieve JSON result $.getJSON( path, { paramsStr: str, additionalStr: txt, currentProjectId: project, url: currentSelected }, function(data) { // handle incoming data funHandleData(data); } ); }; // adding handling to find link $('input[id*=param]').blur( function(event) { // Validation for numbers only var item = $(this).val().replace(',', '.'); if (isNaN(item)) { alert('You can write only numbers!'); $(this).val(''); return false; } var url = $(this).attr('href'); var param = 'param'; var href = $('td[id*=categoryName]').html(); event.preventDefault(); retrieveData( // mvc route to JSON request '/CreateNew/Change/', // query from textbox param, href, // retrieving the data function(data) { var results = $("input[id*='result']"); for (s in data) { // add results from server var item = data[s]; results[s].value = item; } }); }); }); </script> |
Back on the server side of things, we're going to add a new action to the controller. In action result type should be JsonResult (in that way we get data from server in client side) and we should return our data in Data property of JsonResult object.
|
public JsonResult Change(string[] paramsStr, string[] additionalStr, string currentProjectId, string url) { // Make something with data double results; return new JsonResult { Data = results.Toarray(); }; } |
So now we have jQuery behavior in our project. When client writes new data in any textbox, result formulas will change without postback (it is very good for a user).
I hope it will be of some help!
ASP.NET MVC jQuery References:
http://www.asp.net/mvc/
http://jquery.com/
http://www.chadmyers.com/Blog/archive/2007/12/13/using-jquery-with-asp.net-mvc.aspx
Artyom G,
.Net team, Binary Studio
Author:
Kateryna Semenista
Ex-COO
Enjoyed this article?
you might want to subscribe for our newsletter to get more content like this: