Click here to Skip to main content
Click here to Skip to main content

Displaying JQuery Progress using ASP.NET MVC with Ajax

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

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

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
12+ years of complete software development life cycle experience for web based applications and multi-tier client-server desktop, primarily using LINQ, WCF, WWF, C#, ASP.NET, XML, XSLT, AJAX, Winforms,Visual Basic, JavaScript, JQuery, Google APIs, C++, VB.NET, C, ATL/COM, Open XML. Extensively involved in the requirement analysis, feasibility study, conceptualization, planning, architecture/design, configuration, development, quality assurance, implementation and release of the software products.

Comments and Discussions

 
QuestionAjax issue [modified] PinmemberMember 840690616-Oct-12 1:44 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.1411023.1 | Last Updated 25 Aug 2009
Article Copyright 2009 by Farooq Kaiser
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid