Get in touch

Get in touch with Binary

Binary Studio 09.09.2009

/ASP.NET /jQuery /MVC /software development /technical

Using jQuery with ASP.NET MVC

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:

&lt;script language="javascript" type="text/javascript"&gt;
$(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;
}
});
});
});
&lt;/script&gt;

$(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();
};
}

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

Get in touch with Binary

Using jQuery with ASP.NET MVC

jQuery - part of ASP.NET MVC

ASP.NET MVC jQuery References:

Next top stories

Questions to ask frontend devs during an interview

Task cancellation in C# and things you should know about it

Facebook login in Cordova apps