jQuery AJAX Load Sample

Introduction

Many of us need use tabs to load multi view information to the user.

Using server side tabs which reload all the page to show a specific piece of information is not a desirable technique all the time.

jQuery has a very nice way to do so, which is the topic of that post.

Using the code

In this sample I’m using the jQuery AJAX load function to get specific information from the server, based on query string using client side scripts.

First, let’s build the default.aspx page like the following:

<%@ Page Language="C#"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>JQuery AJAX Load Sample</title>
    <script language="javascript" type="text/javascript" src="Scripts/jquery-1.2.6.min.js"></script>
        <script language="javascript" type="text/javascript" src="Scripts/Main.js">

</script>
</head>
<body>
<div>
<h1>JQuery AJAX Load Sample</h1>
<div id="tabsContainer">
<a class="tab" onclick="GetSectionDetails('summery','detailsArea');">Summery</a>
<a onclick="GetSectionDetails('certificates','detailsArea');" >Certificats</a>
<a onclick="GetSectionDetails('contacts','detailsArea');">Contact details</a>
</div>
<div id="detailsArea"></div>
</div>
</body>
</html>

Second, let’s build the generic handler GetDetails.ashx, which will be used to retrieve the section details:

using System;
using System.Collections;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;

namespace JQuery.Samples.AJAX.Handlers
{
    /// <summary>
    /// Summary description for $codebehindclassname$
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class GetDetails : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            // Just to let you see the loading effect
            System.Threading.Thread.Sleep(2000);

            // Getting the correct data according to the query string.
            // You can replace the static content with database retrieved data.
            switch (context.Request.QueryString["sectionId"].ToLower())
            {
                case("summery"):
                    context.Response.Write(@"Having +3 years of experience as a software developer specialized in design and implementation of web based applications using Microsoft technologies associated with strong analytic and design skills. 
                                             <br/>Worked with both Waterfall and Agile project management methodologies and managed teams with Scrum. 
                                             <br/>Holding a MCTS and MCPD in web development and had great knowledge dealing with web applications. 
                                             <br/>Also had a good experience in the development with MOSS 2007, MCMS 2002 and beginning MS Dynamic CRM 4.0");
                    break;
                case ("certificates"):
                    context.Response.Write(@"<h2>MCPD</h2>
                                            Enterprise Applications Developer, Visual Studio 2005 
                                            <br/>Web Developer, Visual Studio 2005
                                            <h2>MCTS</h2>
                                            Microsoft Office SharePoint Server 2007 ― Application Development 
                                            <br/>Distributed Applications Development, .NET Framework 2.0 
                                            <br/>Windows-Based Client Development, .NET Framework 2.0 
                                            <br/>Windows SharePoint Services 3.0 Application Development 
                                            <br/>Web-Based Client Development, .NET Framework 2.0
                                            <h2>MCP</h2>
                                            Application Development Foundation, .NET Framework 2.0
                                            <h2>Bachelor of  Science</h2>
                                            Mansoura University, Information Systems Department, 2005");
                    break;
                case("contacts"):
                    context.Response.Write(@"<h2>Email</h2>     
                                            shokr.ahmed@gmail.com
                                            <h2>MSN</h2>    
                                            shokr.ahmed@hotmail.com
                                            <h2>Skype</h2>
                                            ahmed.shokr
                                            <h2>Mobile (Kuwait)</h2>
                                            +96565963141
                                            <h2>Mobile (Egypt)</h2>
                                            +20104492755
                                            <h2>Address</h2>
                                            Amman St., Salymia, Kuwait");
                    break;
            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

Now, all what we need to do, is to retrieve the correct section information form the client script:

// The handler url
var handlerUrl = 'Handlers/GetDetails.ashx';

// Load the first tab on the page load
$(document).ready(
                    function(){
                                GetSectionDetails('summery','detailsArea');
                              }
                  );

// Loads the specified section details
function GetSectionDetails(sectionId,detailsAreaId)
{
    var detailArea = '#' + detailsAreaId;
    var getUrl = handlerUrl + '?sectionId=' + sectionId;
    $(detailArea).html("Loading....");
    $(detailArea).load(FormatUrl(getUrl));
}

// Format the url to include a random number to avoid caching
// This is very important when dealing with dynamic data
function FormatUrl(url)
{
    var newUrl = url;
    newUrl += '&ver=' + Math.random().toString();
    return newUrl;
}

The sample in action:

The loading… effect:

image

The first section after loading:

image

Another section loaded by client side event:

image

You can play with the styles to make it more like tabs control, but I don’t like CSS so much so I’m leaving it to you 🙂

You can download the sample here.

I hope that helped

Ahmed

Silverlight Stock Rates Rotator

Introduction

Silverlight is a rich framework that works in web browsers using a browser plug-in, just like Flash, but with it, you can interact more easily with .NET libraries. Silverlight has the same code-behind model that exists in ASP.NET, and operates under a modified light version from the .NET framework. With Silverlight, you can build Flash-like applications with full .NET server side code integration. Now, I’ll go through how to build a stock rates rotator with Silverlight and embed it into an ASPX page, step by step. First, you have to download the Silverlight Tools Beta 2 For Visual Studio 2008.

Using the code

Open Visual Studio 2008, and open a new project, select the Silverlight node under Visual C#, and select Silverlight Application:

NewProject

Click OK to proceed to the following screen:

SelectWeb

Select the first option to add a new web site to test your Silverlight controls, and click OK.

Solution

Notice these files in you solution:

  • App.xaml: The entry point for your application that tells which control to begin with, and within it, you can declare the shared variables.
  • Page.xaml: A Silverlight control which will hold the XAML and has a code-behind file “Page.xaml.cs” which holds the server side code.

Now, I’ll start developing the email form in “Page.xaml”:

<canvas xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns="http://schemas.microsoft.com/client/2007">
        <canvas.triggers>
            <eventtrigger routedevent="Canvas.Loaded">
                <beginstoryboard>
                    <storyboard repeatbehavior="Forever"
                           storyboard.targetproperty="(Canvas.Left)" x:name="animation">
                        <doubleanimation duration="0:0:10" to="-820"
                               from="0" storyboard.targetname="txtResult">
                    </doubleanimation>
                </storyboard>
            </beginstoryboard>
        </eventtrigger>
        <border opacity="1" background="Red">
            <textblock text=" Updating stock rates ...... please wait "
                       foreground="Wheat" x:name="txtLoading" />
        </border>
        <textblock x:name="txtResult">
</textblock></canvas.triggers></canvas>

I made the animation to rotate the “txtResult” textblock from right to left forever. This is a very simple animation; also, I added another textblock to simulate the loading effect. Now, I’ll code the web service which will provide the stock rates to the Silverlight control.

[WebMethod]
public string GetStockData()
{
    // Just to see the loading effect
    System.Threading.Thread.Sleep(2000);

    StringBuilder stockData = new StringBuilder();
    Random randomRate = new Random();

    stockData.Append("USD " + randomRate.NextDouble() + "   |   ");
    stockData.Append("KD " + randomRate.NextDouble() + "   |   ");
    stockData.Append("GBP " + randomRate.NextDouble() + "   |   ");
    stockData.Append("EGP " + randomRate.NextDouble() + "   |   ");
    stockData.Append("AUD " + randomRate.NextDouble());

    return stockData.ToString();
}

It’s a very simple web method just to return the required string. Now, we must code calling the web service from the Silverlight control.

public partial class Page : UserControl
{
    # region "Public members"
    DispatcherTimer timer;
    BasicHttpBinding bind;
    EndpointAddress endPoint;
    // Change this to your local URL
    const string WebServiceUrl =
      "http://localhost:11545/StockRotatorWeb/services/StockData.asmx";
    WebServices.StockDataSoapClient stockService;
    # endregion

    public Page()
    {
        InitializeComponent();

        // Initialize timer
        timer = new DispatcherTimer();
        timer.Interval = new TimeSpan(0, 0, 10);
        timer.Tick += new EventHandler(timer_Tick);
        // Initialize the web service proxy and add the event handler
        bind = new BasicHttpBinding();
        endPoint = new EndpointAddress(WebServiceUrl);
        stockService = new WebServices.StockDataSoapClient(bind, endPoint);
        stockService.GetStockDataCompleted += new
          EventHandler<stockrotator.webservices.getstockdatacompletedeventargs>(
          stockService_GetStockDataCompleted);
        stockService.GetStockDataAsync();
        // Start the timer
        timer.Start();
    }
    // Invoked when the calling completed or timed out
    void stockService_GetStockDataCompleted(object sender,
         StockRotator.WebServices.GetStockDataCompletedEventArgs e)
    {
        try
        {
            // Update the result
            txtResult.Visibility = Visibility.Visible;
            txtResult.Text = e.Result.ToString();
        }
        catch (Exception ex)
        {
            // Display the error
            txtResult.Text = ex.InnerException.Message;
        }
        finally
        {
            // Hide the loading textbloxk and restart the timer
            txtLoading.Visibility = Visibility.Collapsed;
            timer.Start();
        }
    }

    void timer_Tick(object sender, EventArgs e)
    {
        timer.Stop();
        txtLoading.Visibility = Visibility.Visible;
        txtResult.Visibility = Visibility.Collapsed;
        // Make the async call to the web service
        stockService.GetStockDataAsync();
    }
}

And this is the test page in action:

Loading....

And, this with the data displayed:

Loaded

Sample project

I hope that helped

Ahmed

Slide menu using jQuery

Introduction

jQuery is a fast, concise, JavaScript library that simplifies how you traverse HTML documents, handle events, perform animations, and add AJAX interactions to your web pages. jQuery is designed to change the way that you write JavaScript.

In this article, I’ll build a sliding JavaScript menu using jQuery.

Using the code

First, you must reference the jQuery library which can be downloaded form here. Then, you can make the menu HTML page as in the following code:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>JQuery Sample Menu</title>
    <link rel="Stylesheet" type="text/css" href="styles/navigation.css" />
    <script type="text/javascript" language="javascript" src="scripts/jquery-1.2.3.js"/>
    <script type="text/javascript" language="javascript" src="scripts/CustomMenu.js"/>
</head>
<body>
<h2>This is a sample menu using JQuery</h2>
<h4>Try to click on the clickable items in the menu to see the animation</h4>
<ul class="menu">
    <li>- Parent item with no children</li>
    <li>
    - Item 1 with children
    <ul >
    <li>Nested item 1</li>
    <li>Nested item 2</li>
    </ul>
    </li>
    <li>
    - Item 2 with children
    <ul >
    <li>Nested item 1</li>
    <li>Nested item 2</li>
    <li>Nested item 3</li>
    <li>Nested item 4</li>
    </ul>
    </li>
    <li>
    - Item 3 with children
    <ul>
    <li>Nested item 1</li>
    <li>Nested item 2</li>
    <li>Nested item 3</li></ul>
    </li>
    </ul>
</body>
</html>

Now, for the JavaScript magic! Just use the following JavaScript piece of code:

$(function() // Register the menu
      {
// Add the click event handler on the list item with sub list
$('li:has(ul)') 
           .click(function(event){
            if (this == event.target) {
               // Hide all the children of the other lists
               $('li:has(ul)').children().hide('slow'); 
               // Make the animation
               $(this).children().animate({opacity:'toggle',height:'toggle'},'slow'); 
                                      }
                     return false;
                                 }
                   )
            // Change the cusrsor.
           .css({cursor:'pointer'})
           // Hide all the nested lists (on the first tinm only).
           .children().hide();
       }
 );

Now you can have the sliding effect without so much JavaScript coding.

Menu at start:

init

Menu in action:

loading

Sample project

I hope that helped

Ahmed