使用 ASP.NET MVC 的 AJAX

• 下载源代码 - 273.75 KB

引言

ASP.NET AJAX 使 Web 应用程序能够异步地从服务器检索数据并刷新现有页面的部分内容。 这通过使 Web 应用程序更具响应性来改善用户体验，并使您能够创建令人惊叹的 Web 2.0 应用程序来取悦您的用户。 在本文中，我将向您展示如何构建一个启用 AJAX 的 ASP.NET MVC 应用程序。

背景

要创建一个新的 MVC 项目，请参阅 ASP.NET MVC 应用程序结构。 我将使用在 WebserviceX.NET 上免费提供的货币转换器 Web 服务。

Using the Code

要引用 ASP.NET AJAX 脚本库，请在 Site.Master 文件中的 head 元素末尾添加以下标记

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

要引用 Web 服务，请右键单击项目，然后单击“添加 Web 引用”，如下所示

在 HomeController.cs 中 About 方法之后添加以下代码

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

在索引视图中添加以下代码

<%@ 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>

现在您可以运行该应用程序，它将呈现如下所示的页面

摘要

在本文中，我们研究了使用 ASP.NET MVC 的 AJAX。 我们通过使用在 WebserviceX.NET 上免费提供的 Web 服务构建了一个货币转换器应用程序。