ASP.NET AJAX 4.0 Deep Dive Live Meeting Presentation and Samples

Hi all,

First I want to thank all who attend the live meeting last night, your presence is highly appreciated 🙂

I hope you liked the presentation and it was helpful to all of you.

As promised, you can find the presentation in here and the code samples in here.

About the meeting recording I’ll check with Amr El Garhy and get back to you on that.

I want to take the chance and thank Ahmed Ibrahim on his sweet article, thanks a lot Ahmed, it means a lot for me 🙂

Please, take a second to vote in the below poll, from your votes I’ll decide what to present in the next Webcast/ Dev Night, I’m all yours guys 🙂


Wishing to see you all and more people in the upcoming webcasts.

I hope that helped


ASP.NET AJAX 4.0 Deep Dive Live Meeting

Hi all,

Amr El Garhy and I will do a co-presenter live meeting on Wednesday, 22 April, 2009 at 8:00 PM (Kuwait Local Time GMT +3)

The session is about ASP.NET AJAX 4.0

Please, find the live meeting details below:

Live Meeting Details

ASP.NET AJAX 4.0 deep dive with jQuery samples and new components.

Session outline:

  • jQuery and the VS 2010
  • Using ASP.NET AJAX 4.0 Client Templates
  • Using the DataView control
  • Conditional attributes


Ahmed Shokr (SafatES – Developers Team Leader)

Amr El Garhy (Microsoft Gulf – Developer Evangelist)


Amr El Garhy has invited you to attend an online meeting.

Join the meeting

Make sure the Office Live Meeting client is installed before the meeting:


To join a meeting from your phone, dial in using the following information:

        Phone:  +18883203585 [English]

        Phone:  +14257063500 [English]

Find a local phone number for your region

Conference ID:  932390

        Pass code:       Pass code is not required.


Unable to join the meeting?  Start Office Live Meeting and join the meeting with the following information:

        Meeting ID:     449fdc491717401bab6ed3530a21d7c7

        Entry Code:     8681


If you still cannot enter the meeting, contact support:


Office Live Meeting can be used to record meetings. By participating in this meeting, you agree that your communications may be monitored or recorded at any time during the meeting.

If you have any troubles preparing your machine for the live meeting, contact me.

See you all online 🙂


Using Microsoft Virtual Earth for Vehicle Tracking and Geo Fencing Sample


Today, I had to build a sample  demo using Microsoft Virtual Earth to simulate vehicle tracking and geo fencing.

The term geo fencing was a little bit new to me, you can have a look here for more details.

Using the code

My sample here consists of two parts, one is the live tracking of moving objects based on geospatial data [Longitude, Latitude], and the second part is about geo fencing a moving object to a limited geographic area.

During my research on how to calculate geospatial data  for a specific point on the map, I came across the following sample which helped me a lot to get the test data for my sample.

Now, let’s have a look at our sample and how it works:

First, we need to build our default.aspx page:

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="">
<head runat="server">
      <title>Vehicle Tracking System</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <script language="javascript" type="text/javascript" src=""></script>
   2:       <script language="javascript" type="text/javascript" src="scripts/Tracking.js">

<body onload="GetMap();">
<table width="100%" border="0" cellpadding="0" cellspacing="10">
<td id="tabsContainer">
<a onclick='StartTracking();'>Vechile Tracking Demo</a>
<a onclick='StartGeoFencing();'>Geo Fencing Demo</a>
<br />
<div id="traceArea"></div>
<div id="myMap"></div>

Then, we need to build the Tracking.js which contains all the JavaScript code for our demo:

// The Map Object
var map = null;
      function GetMap()
         map = new VEMap('myMap');
         var centerat = new VELatLong(29.511604, 47.6061625);
         map.LoadMap(centerat,12,VEMapStyle.Road ,false);
      function StartTracking()
            // Vechile one
            // Create sperate layer for that vechile
            var layer = new VEShapeLayer();
            // Add the intial position
            AddPushpin(29.791604, 47.7061625,'Vehicle 999001',"Time: " + new Date().toTimeString(),layer,'auto1.gif');
            // Add the addtional positions
            window.setTimeout(function() { AddPushpin(29.807604, 47.7141625,'Vehicle 999001','Time: ' + new Date().toTimeString(),layer,'auto1.gif');},1000);
            window.setTimeout(function() { AddPushpin(29.803604, 47.7201625,'Vehicle 999001','Time: ' + new Date().toTimeString(),layer,'auto1.gif');},2000);
            window.setTimeout(function() { AddPushpin(29.801604, 47.7281625,'Vehicle 999001','Time: ' + new Date().toTimeString(),layer,'auto1.gif');},3000);
            window.setTimeout(function() { AddPushpin(29.830604, 47.7331625,'Vehicle 999001','Time: ' + new Date().toTimeString(),layer,'auto1.gif');},4000);
            window.setTimeout(function() { AddPushpin(29.870604, 47.7451625,'Vehicle 999001','Time: ' + new Date().toTimeString(),layer,'auto1.gif');},5000);
            window.setTimeout(function() { AddPushpin(29.890604, 47.7601625,'Vehicle 999001','Time: ' + new Date().toTimeString(),layer,'auto1.gif');},6000);
            // Vechile two
            var layer2 = new VEShapeLayer();
            AddPushpin(29.711604, 47.8061625,'Vehicle 999002',"Time: " + new Date().toTimeString(),layer2,'orange_car_icon.gif');
            window.setTimeout(function() { AddPushpin(29.707604, 47.8141625,'Vehicle 999002','Time: ' + new Date().toTimeString(),layer2,'orange_car_icon.gif');},1000);
            window.setTimeout(function() { AddPushpin(29.703604, 47.8201625,'Vehicle 999002','Time: ' + new Date().toTimeString(),layer2,'orange_car_icon.gif');},2000);
            window.setTimeout(function() { AddPushpin(29.701604, 47.8281625,'Vehicle 999002','Time: ' + new Date().toTimeString(),layer2,'orange_car_icon.gif');},3000);
            window.setTimeout(function() { AddPushpin(29.695604, 47.8331625,'Vehicle 999002','Time: ' + new Date().toTimeString(),layer2,'orange_car_icon.gif');},4000);
            window.setTimeout(function() { AddPushpin(29.685604, 47.8451625,'Vehicle 999002','Time: ' + new Date().toTimeString(),layer2,'orange_car_icon.gif');},5000);
            window.setTimeout(function() { AddPushpin(29.680604, 47.8601625,'Vehicle 999002','Time: ' + new Date().toTimeString(),layer2,'orange_car_icon.gif');},6000);
            // Vechile three
            var layer3 = new VEShapeLayer();
            AddPushpin(29.660604, 47.6601625,'Vehicle 999003',"Time: " + new Date().toTimeString(),layer3,'shippingVechile.png');
            window.setTimeout(function() { AddPushpin(29.670604, 47.6451625,'Vehicle 999003','Time: ' + new Date().toTimeString(),layer3,'shippingVechile.png');},1000);
            window.setTimeout(function() { AddPushpin(29.685604, 47.6331625,'Vehicle 999003','Time: ' + new Date().toTimeString(),layer3,'shippingVechile.png');},2000);
            window.setTimeout(function() { AddPushpin(29.701604, 47.6281625,'Vehicle 999003','Time: ' + new Date().toTimeString(),layer3,'shippingVechile.png');},3000);
            window.setTimeout(function() { AddPushpin(29.703604, 47.6201625,'Vehicle 999003','Time: ' + new Date().toTimeString(),layer3,'shippingVechile.png');},4000);
            window.setTimeout(function() { AddPushpin(29.707604, 47.6141625,'Vehicle 999003','Time: ' + new Date().toTimeString(),layer3,'shippingVechile.png');},5000);
            window.setTimeout(function() { AddPushpin(29.711604, 47.6061625,'Vehicle 999003','Time: ' + new Date().toTimeString(),layer3,'shippingVechile.png');},6000);
      function StartGeoFencing()
      // Load the map on the required location
        var centerat = new VELatLong(29.34524, 47.66744);
         map.LoadMap(centerat,12,VEMapStyle.Road ,false);
         // Create the layer for the vechile
        var layer = new VEShapeLayer();
        // Add the points
        AddPushpin(29.429, 47.48891,'Vehicle 999231',"Time: " + new Date().toTimeString(),layer,'car-icon.gif');
        window.setTimeout(function() { AddPushpin(29.42541, 47.53011,'Vehicle 999231','Time: ' + new Date().toTimeString(),layer,'car-icon.gif');},1000);
        window.setTimeout(function() { AddPushpin(29.42182, 47.57543,'Vehicle 999231','Time: ' + new Date().toTimeString(),layer,'car-icon.gif');},2000);
        window.setTimeout(function() { AddPushpin(29.41943, 47.61526,'Vehicle 999231','Time: ' + new Date().toTimeString(),layer,'car-icon.gif');},3000);
        window.setTimeout(function() { AddPushpin(29.37516, 47.63036,'Vehicle 999231','Time: ' + new Date().toTimeString(),layer,'car-icon.gif');},4000);
        window.setTimeout(function() { AddPushpin(29.35841, 47.65233,'Vehicle 999231','Time: ' + new Date().toTimeString(),layer,'car-icon.gif');},5000);
        window.setTimeout(function() { AddPushpin(29.34524, 47.66744,'Vehicle 999231','Time: ' + new Date().toTimeString(),layer,'car-icon.gif');},6000);
        window.setTimeout("alert('The vehicle 999231 crossed to Al Jahra boundries');",6100);
      function AddPushpin(pLat,pLong,title,desc,layer,imgName)
          // Clear the layer shapes  
          // Create the shape object
          var shape = new VEShape(VEShapeType.Pushpin, new VELatLong(pLat, pLong));
          shape.SetCustomIcon("<img src='images/" + imgName +"'/>");

      function ClearLayer(layer)
      // Delete all shapes in a layer

As you see all the test data I got it from the Location Chooser sample.

Now. let’s see some screenshots from our demo:

The initial screen


The vechile tracking demo:


As you see the the vechiles images keep on moving according to the coordinates I gave to it from the JavaScript, sure you can retrieve these data from a database or a web service.

The next screen shot shows a moving vechile that suppose to not cross a specific boundary.


When the car cross that boundary which is [Al Jahra] boundary, an alert appears to the user to tell about that error. 


We can use the sample basics to provide a near real time tracking for any moving objects.

The objects itself must use some technique like GPS to tell the application about its current location.

I’m working now on some more advanced geo fencing techniques using Microsoft Virtual Earth and ArcGIS, I’ll post about it soon.

You can download the sample code here.

I hope that helped


Authenticate .NET web service using custom SOAP header


Using this method we simply add a required SOAP header to our web services calls.

We embed the SOAP header into our message and validate its contents on the server.

If the SOAP header validation done successfully, the web server sends the web service response to the consumer.

Pretty simple, right?

Using the code

First we had our service declaration:

/// <summary>
/// Summary description for SOAPHeaderService
/// </summary>
[WebService(Namespace = "")]
[WebServiceBinding(Name = "TestService",ConformsTo = WsiProfiles.BasicProfile1_1)]
public class SOAPHeaderService : System.Web.Services.WebService
    // Visual studio will append a "UserCredentialsValue" property to the proxy class
    public UserCredentials consumer;

    public SOAPHeaderService()
        //Uncomment the following line if using designed components 

Notice that the “WebServiceBinding” attribute has the “Name” argument set to “TestService”, I’ll explain this later.

Now, I write the custom SOAP header that I want to include in the SOAP message.

To do this I’ll create a class inherited from “System.Web.Services.Protocols.SoapHeader” , and I’ll but the required properties in it.

public class UserCredentials : System.Web.Services.Protocols.SoapHeader
    public string userName;
    public string password;

Let’s add instance from that header in our service

// Visual studio will append a "UserCredentialsValue" property to the proxy class
    public UserCredentials consumer;

Note that the visual studio will create a property in web service proxy called “UserCredentialsValue” which will map the “consumer” public property in the web service.

Now we had to write a “Web Method” that uses that header in messaging.

    [SoapDocumentMethod(Binding = "TestService")]
    public string GetBalance()
        if (checkConsumer())
            return consumer.userName + " had 10000000 credit";
            return "Error in authentication";

Note that I have added the “Binding” value to that I had used in declaring my service.

Also I declared the SOAP header that method will require when called, as long as declaring it with required.

Now, the only thing is remaining is to call the service with the SOAP header:

SOAPHeaderService.SOAPHeaderService service = new SOAPHeaderService.SOAPHeaderService();
SOAPHeaderService.UserCredentials user = new SOAPHeaderService.UserCredentials();

user.userName = "Ahmed";
user.password = "1234";

service.UserCredentialsValue = user;


We just get reference to the service and the SOAP header, assign the SOAP header properties, attach it with the SOAP message and then make our call to the web method.

This is the console result after calling the service with username = “Ahmed” and password = “1234”


This one with other data


Securing their web services is a thing that many developers ignore while they are working; they relay that on that is a difficult and nasty task.

In the fact securing web service is all about understand the messaging layer and the protocols, you just need to go a little more deep and then you will find it is a very simple task.

Sample Project

I hope that helped


Rule based security using Microsoft Enterprise Library and CAS


Rule based security is a very effective way to authorize your code, and code access security is a clean, easy to use and effective way to handle the security validation.

The Enterprise Library Security Application Block provides a configurable way to handle Rule based security.

In this article I’ll explain a solution to secure web applications using custom membership and role providers with the Enterprise Library Security Application Block and code access security.

You need the Enterprise Library installed.

Using the code

First, we need to implement our custom membership provider, in this example I’ll just use static code to explain the provider [Not going to the database or anything].

For this sample I just need to implement the following method:

public override bool ValidateUser(string username, string password)
            return true;

Then, we need to implement our custom role provider.

I just need the following to implement methods:

public override string[] GetRolesForUser(string username)
            return SecurityProvider.GetRolesForUser(username);}

public override bool IsUserInRole(string username, string roleName)
            return SecurityProvider.IsUserInRule(HttpContext.Current.User, roleName);}

Sure, you can build your own providers with a custom database.

Now, Let’s have a look on the [SecurityProvider] class:

public class SecurityProvider{
        public static bool IsUserInRule(IPrincipal principal, string ruleName)
            IAuthorizationProvider authorizationProvider = AuthorizationFactory.GetAuthorizationProvider();
            return authorizationProvider.Authorize(principal, ruleName);

        public static string[] GetRolesForUser(string username)
            switch (username.ToLower())
                case ("admin"):
                    return new string[] { "Admin" };

                case ("manager"):
                    return new string[] { "Manager" };

                case ("user"):
                    return new string[] { "User" };

                    return new string[] { "" };


I use the Enterprise Library Security Application Block to make the validation on the rules from the configuration file.

Then, we need to implement a custom CAS permission and attribute like the following [Not implemented functions removed from the next code section but is available in the source code]

public class RulesSecurityPermission : IPermission

        private string _rule;
        public string Rule
                return this._rule;
                this._rule = value;

        public RulesSecurityPermission(string roleName)
            _rule = roleName;

        void IPermission.Demand()
            if (!SecurityProvider.IsUserInRule(Thread.CurrentPrincipal, Rule))
                throw new SecurityException();
public class RulesSecurityPermissionAttribute : CodeAccessSecurityAttribute
        public RulesSecurityPermissionAttribute(SecurityAction action)
            : base(action)

        public override IPermission CreatePermission()
            return new RulesSecurityPermission(Rule);
        private string _role;
        public string Rule
                return this._role;
                this._role = value;

Now, let’s have a look on the configurations file:

    <section name="securityConfiguration" type="Microsoft.Practices.EnterpriseLibrary.Security.Configuration.SecuritySettings, Microsoft.Practices.EnterpriseLibrary.Security, Version=, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" />
  <securityConfiguration defaultAuthorizationInstance="RuleProvider" defaultSecurityCacheInstance="">
      <add type="Microsoft.Practices.EnterpriseLibrary.Security.AuthorizationRuleProvider, Microsoft.Practices.EnterpriseLibrary.Security, Version=, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"
          <add expression="R:Admin" name="Administratoin" />
          <add expression="R:Admin OR R:Manager" name="Management" />
          <add expression="R:Manager OR R:User" name="Usage" />

    <compilation debug="true" />
    <authentication mode="Forms">
      <forms loginUrl="~/Login.aspx" defaultUrl="~/Default.aspx">
      <deny users="?"/>
    <membership defaultProvider="CustomMembershipProvider">
        <add name="CustomMembershipProvider" type="Shokr.Security.RuleBasedSecurity.CustomMembershipProvider"/>
    <roleManager defaultProvider="CustomRolesProvider" enabled="true">
        <add name="CustomRolesProvider" type="Shokr.Security.RuleBasedSecurity.CustomRolesProvider" />

In the above code, I had registered the [AuthorizationRuleProvider] from the Enterprise Library and configured our custom membership and roles providers.

Finally, this is the sample in action:

Navigate to the login page, and login with [admin] and any password.


You will be redirected to the default page:


Click on [Administrative function], you will see that the method executed successfully


Click on [User function], you will see security error:


Sample project

I hope that helped


Silverlight Stock Rates Rotator


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:


Click OK to proceed to the following screen:


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


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=""
            <eventtrigger routedevent="Canvas.Loaded">
                    <storyboard repeatbehavior="Forever"
                           storyboard.targetproperty="(Canvas.Left)" x:name="animation">
                        <doubleanimation duration="0:0:10" to="-820"
                               from="0" storyboard.targetname="txtResult">
        <border opacity="1" background="Red">
            <textblock text=" Updating stock rates ...... please wait "
                       foreground="Wheat" x:name="txtLoading" />
        <textblock x:name="txtResult">

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.

public string GetStockData()
    // Just to see the loading effect

    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 =
    WebServices.StockDataSoapClient stockService;
    # endregion

    public Page()

        // 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
        // Start the timer
    // Invoked when the calling completed or timed out
    void stockService_GetStockDataCompleted(object sender,
         StockRotator.WebServices.GetStockDataCompletedEventArgs e)
            // Update the result
            txtResult.Visibility = Visibility.Visible;
            txtResult.Text = e.Result.ToString();
        catch (Exception ex)
            // Display the error
            txtResult.Text = ex.InnerException.Message;
            // Hide the loading textbloxk and restart the timer
            txtLoading.Visibility = Visibility.Collapsed;

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

And this is the test page in action:


And, this with the data displayed:


Sample project

I hope that helped


Slide menu using jQuery


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="" >
    <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"/>
<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>
    - Item 1 with children
    <ul >
    <li>Nested item 1</li>
    <li>Nested item 2</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>
    - Item 3 with children
    <li>Nested item 1</li>
    <li>Nested item 2</li>
    <li>Nested item 3</li></ul>

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
            if (this == {
               // Hide all the children of the other lists
               // Make the animation
                     return false;
            // Change the cusrsor.
           // Hide all the nested lists (on the first tinm only).

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

Menu at start:


Menu in action:


Sample project

I hope that helped