Click here to Skip to main content
14,333,606 members

Displaying JQuery Progress using ASP.NET MVC with Ajax

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

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

Share

About the Author

Farooq Kaiser
Software Developer (Senior) http://www.Fairnet.com
Canada Canada
No Biography provided

Comments and Discussions

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

Article
Posted 25 Aug 2009

Stats

81.2K views
2.9K downloads
26 bookmarked