使用 ASP.NET MVC 和 Ajax 显示 jQuery 进度条

• 下载源代码 - 275.25 KB

引言

jQuery 是一个轻量级的 JavaScript 库，可以从 http://www.jquery.com 下载。jQuery 库也包含在 Visual Studio ASP.NET MVC 模板的 Scripts 文件夹中。您可以通过使用 Google 托管的 AJAX 库来提高性能。Google 托管的 AJAX 库可以在 这里 找到。您还可以阅读一篇关于 Google 托管的 Ajax 库测试 的优秀文章。

背景

我将修改我的 上一篇文章，以实现 jQuery 进度条，这将使应用程序更具响应性。 AjaxOptions 包含 OnBegin、OnComplete 和 OnSuccess 属性。 AjaxOptions 类的一个实例作为参数传递给 Ajax.BeginForm() helper 方法，如下所示在我们的视图中。

Using the Code

这是我的视图

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

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

上面的输出包含一个显示动画进度指示器的图像。该元素仅在 Ajax 调用期间显示。

onSuccess 函数在 Ajax 调用完成后更新页面内容，如上所示。

摘要

在本文中，我们研究了使用 ASP.NET MVC 和 Ajax 的 jQuery 进度指示器。

历史

• 2009 年 8 月 25 日：初始发布