Click here to Skip to main content
15,861,168 members
Articles / Web Development / XHTML

Displaying JQuery Progress using ASP.NET MVC with Ajax

Rate me:
Please Sign up or sign in to vote.
4.75/5 (13 votes)
25 Aug 2009CPOL 92.4K   2.9K   26   8
JQuery is a lightweight JavaScript library and can be downloaded from http://www.jquery.com. The jQuery library is also included in the Scripts folder of the Visual Studio ASP.NET MVC template.

Introduction

JQuery is a lightweight JavaScript library and can be downloaded from http://www.jquery.com. The jQuery library is also included in the Scripts folder of the Visual Studio ASP.NET MVC template. You can increase the performance by using Google hosted AJAX Libraries. Google hosted AJAX Libraries can be found here. You can also read an excellent article about Test Drive of the Google Hosted Ajax Libraries.

Background

I will modify my previous article to implement JQuery progress that will make an application more responsive. The AjaxOptions includes OnBegin, OnComplete and OnSuccess properties. An instance of the AjaxOptions class is passed to the Ajax.BeginForm() helper method as shown below in our view.

Using the Code

Here is my 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">
<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>

Now I will run the application and it will render the page as shown below:

Image 1

The above output contains an image that displays an animated progress indicator. The element is displayed only during the Ajax call.

Image 2

The onSuccess function updates page content after an Ajax call as shown above.

Summary

In this article, we examined JQuery progress indicator using ASP.NET MVC with Ajax.

History

  • 25th August, 2009: Initial post

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 5 Pin
Member 959810627-Mar-13 23:15
Member 959810627-Mar-13 23:15 
QuestionAjax issue Pin
Member 840690616-Oct-12 0:44
Member 840690616-Oct-12 0:44 
GeneralMy vote of 2 Pin
califf2231-Jul-12 7:26
califf2231-Jul-12 7:26 
GeneralReally Good Pin
P_A_14-Jun-12 0:13
P_A_14-Jun-12 0:13 
GeneralMy vote of 5 Pin
scott.leckie18-Aug-11 12:40
scott.leckie18-Aug-11 12:40 
GeneralMVC2 Update Pin
Layinka7-Jan-11 1:21
professionalLayinka7-Jan-11 1:21 
GeneralMy vote of 1 Pin
thiyagesh20-Sep-10 1:09
thiyagesh20-Sep-10 1:09 
GeneralRe: My vote of 1 Pin
scott.leckie18-Aug-11 12:39
scott.leckie18-Aug-11 12:39 

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.