Click here to Skip to main content
Click here to Skip to main content

AJAX with ASP.NET MVC

, 25 Aug 2009 CPOL
Rate this:
Please Sign up or sign in to vote.
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:

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

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

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

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:

<%@ 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
12+ years of complete software development life cycle experience for web based applications and multi-tier client-server desktop, primarily using LINQ, WCF, WWF, C#, ASP.NET, XML, XSLT, AJAX, Winforms,Visual Basic, JavaScript, JQuery, Google APIs, C++, VB.NET, C, ATL/COM, Open XML. Extensively involved in the requirement analysis, feasibility study, conceptualization, planning, architecture/design, configuration, development, quality assurance, implementation and release of the software products.

Comments and Discussions

 
GeneralMy vote of 2 PinmemberKanupriyaGoel7-May-14 11:38 
GeneralI have to practice PinmemberJhonathan Izquierdo6-Jun-13 7:32 
QuestionThe request failed with empty response Pinmemberyerramilli4-Dec-12 1:11 
QuestionQuestions about Ajax Process Pinmemberkate08248-Jun-11 17:55 
GeneralAJAX with ASP.NET MVC Pinmembersujan_mc28-Oct-10 3:45 
QuestionAJAX with ASP.NET MVC Pinmembersujan_mc28-Oct-10 3:41 
Generalgood article PinmemberDonsw2-Jun-10 11:51 
GeneralThanks. Very helpful. PinmemberGautam Jain15-Oct-09 1:32 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.141223.1 | Last Updated 25 Aug 2009
Article Copyright 2009 by Farooq Kaiser
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid