Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
NET MVC
Introduction
This tip explains how we can implement AJAX in ASP.NET MVC. Here, I have attempted to explain the
concept of partial page updates using a partial view to display product details asynchronously. For
simplicity, I have stored details of three products statically in a list. The application searches the
product code entered by a user and displays the corresponding product details.
Background
Traditional web applications rely on synchronous method calls to process data. The entire web page
is posted to the server each time data is submitted through the page, causing performance delays.
This problem can be overcome by using AJAX. AJAX allows web applications to call methods
asynchronously. Instead of posting the entire page to the web server, only the required data is
posted. This improves the overall performance of the web applications.
We will use a model class to display data in a partial view. For this, we have to add a Product class
in the Models folder as follows by right clicking on the Models folder and selecting the Add Class
option:
Following is the code of the Product class:
namespace AJAXDemo.Models
{
public class Product
{
public string ProdCode
{
get;
set;
}
public string ProdName
{
get;
set;
}
public int ProdQty
{
get;
set;
}
}
}
Then, add new layout in the Shared folder under the Views folder as follows:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>_Layout</title>
@RenderSection("scripts")
</head>
<body>
<div>
@RenderBody()
</div>
</body>
</html>
This layout will be used by the Index view. In this layout, the RenderSection() method defines a
placeholder for the scripts section and the RenderBody() method defines a placeholder for the
main content of the Index view.
This code creates three product objects and adds them to a static list called prodList which is
declared at the class level and it renders the view associated with the Index view.
Add the view corresponding to the above action method as follows by right clicking on
the Index() method in the controller:
(Note: Remember to select the layout page while adding the Index view.)
<h2>Index</h2>
@Ajax.BeginForm("ShowDetails","Ajax",
new AjaxOptions
{ HttpMethod = "POST", UpdateTargetId = "div1",
InsertionMode = InsertionMode.Replace, LoadingElementId = "waitimage" })
<h1>Enter Product Code</h1>
<h2>
Product Code: @Html.TextBox("txtCode")<br />
<input type="submit" value="Show Details" />
<input type="reset" value="Clear"/>
</h2>
@{Html.EndForm();}
<br />
<img id="waitimage" src="~/Images/loading42.gif" style="display:none" />
<br />
<div id="div1">
</div>
The above view references the jquery.unobtrusive-ajax.js script to implement the AJAX functionality. It
also uses a div with the id "div1" to display the requested product details. It uses
the Ajax.BeginForm() helper method to accept product code and submit it asynchronously. The
first parameter of the Ajax.BeginForm() method specifies the name of the action method to be
invoked to process the input data, the second parameter specifies the name of the controller and the
third parameter specifies the AjaxOptions to be used. In the AjaxOptions,
the HttpMethod property specifies the HTTP method to be used, the UpdateTargetId property
specifies the ID of the div element where the partial view will be displayed,
the InsertionMode property specifies the mode of insertion of the partial view, and
the LoadingElemetId property specifies the ID of the image to be displayed while waiting for the
asynchronous call to be completed and the view to be rendered.
InsertionMode.InsertAfter - The new details are added after the existing details
InsertionMode.InsertBefore - The new details are added before the existing details
InsertionMode.Replace - The new details replace the existing details
In order to process the input and search the product code entered by the user, we add a method in
the controller which returns a partial view as follows:
In order to display the product details, we have to add a strongly typed partial view as follows by
right clicking on the method and selecting the Add View option:
@if(Model.ProdCode==null)
{
<h1>Invalid Product Code</h1>
}
else
{
<h1>Product Details</h1>
<h2>
Product Code: @Model.ProdCode<br />
Product Name: @Model.ProdName<br />
Product Quantity: @Model.ProdQty<br />
</h2>
}
The above code displays the product details if the product code is found and the message "Invalid
Product Code" if it is not found.
Before executing the application, we have to specify the routing information in the RouteConfig.cs file
in the App_Start folder as follows:
Points of Interest
AJAX is a very important feature of web applications and it provides significant performance
advantage over traditional web applications.
I have developed the application using Microsoft Visual Studio Express 2013 for Web.
License
This article, along with any associated source code and files, is licensed under The Code Project Open
License (CPOL)
Share
About the Author
Azim Zahir
Instructor / Trainer NIIT, India
India
I am a trainer by profession. Currently I am working with NIIT (Mumbai, India)as a Senior Faculty. I
enjoy programming as a hobby. My favorite technologies are Flash, Flex and Silverlight.
Of late I have developed keen interest in WPF and Windows Mobile programming.
Introduction
In asp.net MVC we have seen http verbs like HttpGet, HttpPost, HttpPut and HttpDelete. Here will
see how can we use these words in actions, what does these words mean, and how can use jquery
ajax calls for such http verb enable actions.
UrlRespone()
1. Is accessible using browser url
2. It can also be used for Ajax calls
TypedResponse()
1. It can only be usable using Ajax calls using (type: "GET")
2. If try to access using browser url, it would throw error
MultipleTypedResponse()
1. If try to access using browser url, it would throw error
2. It can only be usable using Ajax calls using (type: "GET"/"POST")
Now lets see how can use http verbed actions in MVC, and Jquery Ajax calls using $.ajax objects
together. But there are some concern with
url: '/User/Create',
url: '/User/Get/20',
type: "POST",
type: "GET",
- For GET requests we can also specify the datas at the url attribute, but we need to work with
route configurations too. (Here we are avoiding things, concerning rout config).
url: '/User/Get/20',
4. Where to find the response data.
- At the success attribute we will get the response datas.
HttpGet
MVC action
ajax call
1. passing value of id as url: '/User/Get/20'
2. no use of data attr at the ajax object.
ajax call
Data is passed to action using the data attribute of the ajax object
HttpPut
MVC action
ajax call
HttpDelete
MVC action
ajax call
Well they all worked fine, but there are some interesting things too. Lets just talk about them too.
Lets take some closer looks for GET's
when we are working with httpGet verbed actions we may face conserens like,
ajax call
Lets find some difference with the previous HttpGet verb use.
ajax call,
At action pageNo and pageSize would be 1 and 30 rather than 2 and 20, as priority of the url data
pass is higher.
This type of "GET" requests with data in url, helps in action overloading too. In such case, we have to
be aware with the route configurations.
Yes there is another problem with the user object here, and we are going to discuss about it too.
Try url value pass, but how to pass the user object in url? Lets try something like,
Result at action, pageNo: 3, pageSize: 5, user: null
Limitations
1. Yes there could be something which I miss understood or presented. So if you find anything just let
me know.
2. All of these examples are not fully operational at real times projects yet. But used at prototype levels.
License
This article, along with any associated source code and files, is licensed under The Code Project Open
License (CPOL)
Share