Click here to Skip to main content
15,867,686 members
Articles / Web Development / XHTML

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 72.2K   2.1K   34   8
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)


Written By
Software Developer (Senior) http://www.Fairnet.com
Canada Canada
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralMy vote of 2 Pin
KanupriyaGoel7-May-14 10:38
KanupriyaGoel7-May-14 10:38 
GeneralI have to practice Pin
Jhonathan Izquierdo6-Jun-13 6:32
Jhonathan Izquierdo6-Jun-13 6:32 
QuestionThe request failed with empty response Pin
yerramilli4-Dec-12 0:11
yerramilli4-Dec-12 0:11 
QuestionQuestions about Ajax Process Pin
kate08248-Jun-11 16:55
kate08248-Jun-11 16:55 
GeneralAJAX with ASP.NET MVC Pin
Sujan Kr Ghosh28-Oct-10 2:45
Sujan Kr Ghosh28-Oct-10 2:45 
Lets take the following situation:
1 dropdown for "Source"
1 dropdown for "To"
3 Textbox to display some predefined data.

How do I use my model to populate the data for all the above mentioned data controls?
Sujan Kr Ghosh

QuestionAJAX with ASP.NET MVC Pin
Sujan Kr Ghosh28-Oct-10 2:41
Sujan Kr Ghosh28-Oct-10 2:41 
Generalgood article Pin
Donsw2-Jun-10 10:51
Donsw2-Jun-10 10:51 
GeneralThanks. Very helpful. Pin
Gautam Jain15-Oct-09 0:32
Gautam 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.