在现代Web开发中，用户体验至关重要。为了提升用户体验，经常需要让应用程序在执行异步操作时提供反馈。jQuery和ASP.NET MVC提供了一种简单的方式来实现这一点，即通过Ajax进度指示器。本文将介绍如何使用jQuery和ASP.NET MVC创建一个响应式的进度指示器。
首先，需要了解jQuery库。jQuery是一个快速、小巧且功能丰富的JavaScript库。它简化了HTML文档遍历、事件处理、动画和Ajax交互。jQuery库也被包含在Visual Studio ASP.NET MVC模板的Scripts文件夹中。为了提高性能，可以使用Google托管的AJAX库，这些库可以在Google提供的链接中找到。
接下来，将修改之前的文章，实现一个使用jQuery的进度指示器，以使应用程序更加响应。AjaxOptions类包括OnBegin、OnComplete和OnSuccess属性。将在视图中使用Ajax.BeginForm()辅助方法传递AjaxOptions类的实例。
以下是视图代码示例：
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">
<script type="text/javascript">
function onBegin() {
$("#divLoading").html('<image src="../Content/ajax-loader.gif" alt="Loading, please wait" />');
}
function onComplete() {
$("#divLoading").html("");
}
function onSuccess(context) {
var d = new Date();
var day = d.getDate();
var month = d.getMonth() + 1;
var year = d.getFullYear();
$("#divLoading").html("Live rates at " + day + "." + month + "." + year + "" + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds());
}
</script>
<h2>
Currency Converter
</h2>
<div id="divLoading">
</div>
<%
using (Ajax.BeginForm("getConversionRate", new AjaxOptions { UpdateTargetId = "Result", OnSuccess = "onSuccess", OnBegin = "onBegin", OnComplete = "onComplete" })) {
%>
<%
= 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>
在上述代码中，定义了三个JavaScript函数：onBegin、onComplete和onSuccess。这些函数分别在Ajax调用开始、完成和成功时被调用。onBegin函数用于显示加载动画，onComplete函数用于清除加载动画，而onSuccess函数则用于更新页面内容。
在运行应用程序时，页面将如下所示：输出包含一个显示动画进度指示器的图像。该元素仅在Ajax调用期间显示。
onSuccess函数在Ajax调用后更新页面内容，如上所示。