Click here to Skip to main content
15,391,695 members
Articles / Web Development / XHTML
Article
Posted 21 Aug 2009

Stats

69K views
2.1K downloads
34 bookmarked

AJAX with ASP.NET MVC

Rate me:
Please Sign up or sign in to vote.
4.70/5 (11 votes)
25 Aug 2009CPOL1 min read
ASP.NET AJAX enables a Web application to retrieve data from the server asynchronously and to refresh parts of the existing page. This improves the user experience by making the Web application more responsive and enables you to create amazing Web 2.0 applications to delight your users.

Introduction

ASP.NET AJAX enables a Web application to retrieve data from the server asynchronously and to refresh parts of the existing page. This improves the user experience by making the Web application more responsive and enables you to create amazing Web 2.0 applications to delight your users. In this article, I will show you how to build an AJAX-enabled ASP.NET MVC application.

Background

To create a new MVC project, see ASP.NET MVC application structure. I will consume a currency convertor web service which is freely available at WebserviceX.NET.

Using the Code

To reference the ASP.NET AJAX script libraries, add the following markup at the end of the head element in Site.Master:

ASP.NET
<script src="<%= Url.Content("~/Scripts/MicrosoftAjax.js") %>" 
        type="text/javascript"></script>  
    <script src="<%= Url.Content("~/Scripts/MicrosoftMvcAjax.js") %>" 
        type="text/javascript"></script>

To reference the web service, right click on project and then click on add web reference as shown below:

Image 1

Add the following code after the About method in HomeController.cs:

C#
public string getConversionRate(string CurrencyFrom, string CurrencyTo)
{
CurrencyConvertor curConvertor = new CurrencyConvertor();

double rate = curConvertor.ConversionRate((Currency)Enum.Parse(typeof(Currency), 
		CurrencyFrom), (Currency)Enum.Parse(typeof(Currency), CurrencyTo)); 

return rate.ToString(); 
}

Add the following code in index view:

ASP.NET
<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" 
	Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server">
Home Page
</asp:Content>
<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
<h2>Currency Converter </h2>
<% using (Ajax.BeginForm("getConversionRate", new AjaxOptions 
				{ UpdateTargetId = "Result" }))
 { %>
<%= Html.DropDownList( 
"CurrencyFrom", 
new [] 
{ 
new SelectListItem 
{ 
Text = "Canada", 
Value = "CAD" 
}, 
new SelectListItem 
{ 
Text = "USA", 
Value = "USD" 
}, 
new SelectListItem 
{ 
Text = "UK", 
Value = "GBP" 
} 
}, 
"From this currency:" 
) %> 
<%= Html.DropDownList( 
"CurrencyTo", 
new [] 
{ 
new SelectListItem 
{ 
Text = "Canada", 
Value = "CAD" 
}, 
new SelectListItem 
{ 
Text = "USA", 
Value = "USD" 
}, 
new SelectListItem 
{ 
Text = "UK", 
Value = "GBP" 
}
}, 
"To this currency:" 
) %> 
<input type="submit" value="Submit"/><br />
<h1><span id="Result"></span></h1>
<% } %>
</asp:Content>

Now you can run the application and it will render the page as shown below:

currency1.jpg

Summary

In this article, we examined AJAX with ASP.NET MVC. We built a currency convertor application by consuming a web service which is freely available at WebserviceX.NET.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Farooq Kaiser
Software Developer (Senior) http://www.Fairnet.com
Canada Canada
No Biography provided

Comments and Discussions

 
GeneralMy vote of 2 Pin
KanupriyaGoel7-May-14 10:38
MemberKanupriyaGoel7-May-14 10:38 
GeneralI have to practice Pin
Jhonathan Izquierdo6-Jun-13 6:32
MemberJhonathan Izquierdo6-Jun-13 6:32 
QuestionThe request failed with empty response Pin
yerramilli4-Dec-12 0:11
Memberyerramilli4-Dec-12 0:11 
QuestionQuestions about Ajax Process Pin
kate08248-Jun-11 16:55
Memberkate08248-Jun-11 16:55 
GeneralAJAX with ASP.NET MVC Pin
Sujan Kr Ghosh28-Oct-10 2:45
MemberSujan Kr Ghosh28-Oct-10 2:45 
QuestionAJAX with ASP.NET MVC Pin
Sujan Kr Ghosh28-Oct-10 2:41
MemberSujan Kr Ghosh28-Oct-10 2:41 
Generalgood article Pin
Donsw2-Jun-10 10:51
MemberDonsw2-Jun-10 10:51 
Good article. really to the point which is what I like, the only piece of improvement I would suggest is the picture is a little fuzzy you can also write down the web references that were shown as part of the image.
cheers,
Donsw
My Recent Article : CDC - Change Data Capture

GeneralThanks. Very helpful. Pin
Gautam Jain15-Oct-09 0:32
MemberGautam Jain15-Oct-09 0:32 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.