ASP:Chart control – Amazing

Today I discovered something I should have known long ago. ASP.NET has a Chart control!!! It is free to download and use and it will be part of ASP.NET 4.0 coming up soon.

If you wish to use it today simply follow these steps:

1. Download and install the  Chart controls.

2. Download and install the VS 2008 tool support.

3. Optional: Download the code samples. This is a huge web application project we can learn a lot from.

Here are some snap shots of what you can do with these control I took from the sample web project:

Enjoy.

Building ASP.NET Real – time web application – Part 5

After seeing the core of the real-time solution in post 1 – 4 this post will show the other code parts and specify a few details and steps we can take to optimize the solution:

So here are the missing codes to complete the puzzle:

The StocksValuesDB class, that simulate a DB being updated in each interval and has an event to tell clients when an update occurs:

Building ASP.NET Real – time web application – Part 4

In the previous post, I explained how to use the HTTP Async handler (or simply Async page) in order to create a callback and store it somewhere. Later when something changes this callback will be invoked and update the web client waiting for update. But what is this callback ,how do we get it invoked and what is BeinXXX and EndXXX in this post:

Asynchronous Programming Model:

When an application performs an IO operation, the application is very much depend on the device that is doing this IO work. for example when you are trying to read something from a FileStream or a NetworkStream, even worse , if this file you are trying to read is in a remote machine and this machine is offline , your application is waiting until timing out! You can assign a different thread to do this “dirty work” but when you will create many thread the application will suffer from this overhead (context switching and so on). So when you have IO operations like this and you will your application to be more scalable and reliable you should not do these operations Synchronous. You should use the APM. so how does it work?

An application wishing to support the APM, meaning to have a method that works Synchronously and Asynchronously will provide the method itself,  lets call it Func, a BeingFunc and an EndFunc methods. (Just like our HTTP handler has public IAsyncResult BeginProcessRequest(HttpContext context, AsyncCallback cb, object extraData) and public void EndProcessRequest(IAsyncResult asyncResult))

Lets being with the BeinXXX method: this method will return an object implementing IAsyncResult (is implemented by classes containing methods that can operate asynchronously) The class implementing this interface stores state information for an asynchronous operation and provides a synchronization object to allow threads to be signaled when the operation completes. So basically this is the object that monitors the operations and update it’s state. Now for the parameters the BeginXXX accepts. It accepts AsyncCallback object which is a delegate pointing to a function to be invoked when this Async operation is ended! look at the signature of this delegate:

public delegate void AsyncCallback( IAsyncResult ar)

as you can see it gets as a parameter the IAsyncResult object that has the information and state about the Async operation. In additon, the BeginXXX method gets another parameter that is the state of the operation in order to distinguish the operations and to supply extra data.

So in our case (The HTTP handler) we are creating our own AsyncResult object ( that implement IAsync) , and store this object in the manager:

http://msdn.microsoft.com/en-us/library/system.iasyncresult.aspx

http://msdn.microsoft.com/en-us/library/system.asynccallback.aspx

http://msdn.microsoft.com/he-il/magazine/cc163467(en-us).aspx

All there is left is to show the other parts of the application, read more in the next post.

Building ASP.NET Real – time web application – Part 3

In part 2 of these series of posts , I showed the basics of building the UI for the page and the JavaScript for calling the server using AJAX and waiting for a response. But how did I make the HTTP request “wait” and let the server “wake” it up? The answer is very simple. Async page (or Async HTTP Handlers).

Here is a simple explanation from MSDN:

“When ASP.NET receives a request for a page, it grabs a thread from a thread pool and assigns that request to the thread. A normal, or synchronous, page holds onto the thread for the duration of the request, preventing the thread from being used to process other requests. If a synchronous request becomes I/O bound—for example, if it calls out to a remote Web service or queries a remote database and waits for the call to come back—then the thread assigned to the request is stuck doing nothing until the call returns. That impedes scalability because the thread pool has a finite number of threads available. If all request-processing threads are blocked waiting for I/O operations to complete, additional requests get queued up waiting for threads to be free ……………….”

“Asynchronous pages offer a neat solution to the problems caused by I/O-bound requests. Page processing begins on a thread-pool thread, but that thread is returned to the thread pool once an asynchronous I/O operation begins in response to a signal from ASP.NET. When the operation completes, ASP.NET grabs another thread from the thread pool and finishes processing the request. Scalability increases because thread-pool threads are used more efficiently”

So in a nutshell , using ASP.NET Async pages we can set free the ASP.NET thread that was assigned to handle the request in the first place. But still we need a way to queue this request and it’s parameter somewhere and to be able to release this request whenever the server has something to tell the client waiting for a response. We will accomplish this using the APM that I  will explain later.

So lets show the Async part in the server, only instead of using Async page, I will use Async HTTP Handler (More about HTTP handlers Here).

This is the ASHX file the JavaScript requestes once loaded and each time the client finishes to update it’s UI:

public class AyncHandler : IHttpAsyncHandler

{

Building ASP.NET Real – time web application – Part 2

In the previous post , I wrote the general steps to accomplish the solution of achieving real time web application. In this post we will start and demonstrate the solution step by step and explain the application blocks of the solution from building the simple UI for this sample project and moving forward to the hardcode parts of the solution, so without further ado lets start.

The demo code can be downloaded from here.
(It is a web application solution that runs and works without a DB, but instead with a in memory DB)

Building the UI:

As a first step , I will build a simple UI that manages stocks value in a simple table. All the next posts that demonstrate how to update this table in a real time manner will use this stocks table. Needless to say that each one can implement it’s own web application for achieving his real time solution.

The original state of the stocks table is initialized like this:

and the mark up for this table is also very simple:

Building ASP.NET Real – time web application

What if we could write a web application that it’s clients (browsers in our case) can get notified in case of something happening in the server, like a DB row added/changed, a BL entity (from any object model you have built ) raising an event or anything you can come up with in your mind. To clarify things let me further explain by using a very simple example : Say you have a web page (aspx, html, or any other) that displays a various stocks values in a grid, these values are changing very fast and every time. what if we wish that this html grid will change itself the minute any stock value changes? let me further add an important note: We don’t want to use polling mechanism (like using ajax requests at any interval using window.setTimeout)

As it turns out: Yes we can!

Here is a sample of waht we wish to achive(The sample solution i will upload on the next posts, will create this sample)

This is without no doubt the most exciting series of posts I am about to write and i am very exited to write these posts. In this series I am going to explain all the bits and bytes in the solution I am about to show. It was not an easy task but once you understand the general idea and pass over all the obstacles in the way it’s very easy. These posts are will demonstrate the solution using ASP.NET.

So lets first define what we wish to accomplish here and explain what are the options:

1. Display an html on out web page – this is a simple a every day task, we simply build our UI using ASP.NET controls (HTML controls, HTML server controls or web server controls, and naturally JavaScript and CSS).

2. This UI is changing all the time and we wish to display the updated UI. We don’t want to initiate a request for getting the updates at some interval, we also don’t want the user to press any “Update” button to get it as well. What we want is way to get notified from the server in case any thing “interesting” happened there. for this purpose we can use a known technique : polling. (I know some companies that does exactly that).

Polling:

Using this method a web client (browser) initiates an HTTP Request (Asynchronous or not using AJAX) in a wanted interval ( window.setTimeout) and check if there are any updates, if there are – get them and update the UI. This solution has a huge drawback both on the network side and both on the server resources.

On the network side, we have lots of users initiating an HTTP request (which open an underlying TCP/IP communication for each request) ,passing some data to the server and getting lots of updated data as well. This is naturally bad for the network.

On the server side , there are many many HTTP requests that needs to be handled all the time (again open TCP/IP communication, fetching the incoming request and handling it etc).

What we need is a way in which any client simply waits for something to happen and as soon as it does update it’s UI, So lets introduce the solution, here are the steps and i am going to explain them in much details:

Step 1:

Building the UI. This step is the basic part of building any ASP.NET web application, it is simply using ASP.NET and plain old html to construct your UI. In this step we will also use the CS part (The code behind) to build our UI. This can include a simple data binding,initialize some control or can use any Business logic and Data Access code to build this page.

Step 2:

Once the page loads (client side onload event), using JavaScript, initiate an Async HTTP request to a Asynchronous page or an Asynchronous http handler.The client can initiate this request by using native script (e.g Microsoft.XMLHTTP object), he can use MS ajax ( Like i did) or even use JQuery or any other js library).

For those who are not familiar with Asynchronous page , it is a way for ASP.NET to handle long processing requests ( like IO bound operations or web service calls).Since these long processing requests takes time , the handling thread is stuck processing this job while meantime other requests “stay outside”. ASP.NET uses a Thread-pool thread to handle it’s requests , so by “freeing” this thread,ASP.NET can now handle other requests. Once the long processing task completes, ASP.NET will grab a new thread from the Thread-pool and finishing process the request.

here is a nice image from MSDN to illustrate Async pages/handlers:

In our case we are using Async pages/handlers to open a request, let the client wait for a response ( but without stucking the UI) and freeing the ASP.NET thread by using Async page/handlers.

We will not go into more details about this feature at this point although we will discuss it more later since this is the critical part of the entire solution.

Step 3:

The Async page or handler will get the request in a BeginProcessRequest request method , create an IAsyncResult object to be later used in the EndProcessRequest method and will save this IAsyncResult object somewhere. Since no EndProcessRequest will happen in this BeginProcessRequest method the request simply hangs and the client that initiated this request is waiting for a result. (but not stucking the UI since this is an Async request. At this point (where BeginProcessRequest ended) the thread pool thread is released and free to server other requests.

An important note that is critical to understand here is that even though the thread is released a communication TCP channel is open and will not close until we close it by calling the EndProcessRequest (in the good way or when time out happens). otherwise the web server (IIS) will throw an HTTP 403.0 error code very fast.

The IAsyncResult object is critical for this solution , so for understanding it deeply i recommend any one wishing to really understand to read this article about APM (Async programming model). In addition i will explain it in the next posts.

The IAsyncResult will contain among other things the AsyncCallback that ASP.NET is waiting for us to “wake up” and that will invoke later the EndProcessRequest method.

Step 4:

Now that we have this IAsyncResult callback we can do whatever we like with it. At first I started a new Thread for each one and let it do the work of waiting to something to happen but very fast we realized that there will be too many Thread (and we will need a Thread pool to manage them), so we came up with a new idea. Instead of starting a new Thread, we will simply store these IAsyncResult callbacks in some list and when something will happen on the server, we will simply use them to invoke the AsyncCallback ASP.NET waits for it’s invocation.

Step 5:

In this step, something did happen on the server, How do we know? well there are lots of ways, like, using polling the DB for changes , of by using the SQL notification services and get invoked when anything interesting happens on the DB. During the samples i will show in the next posts, I will demonstrate one of them.

Now that we know we will to invoke all the EndProcessRequest from the ASP.NET Async pages/handlers we can simply extract the callback we got from ASP.NET and invoke it so that the execution will now be passed to the EndProcessRequest  to finish the request and return a response to the client.

Step 6:

The client gets the response, updates the UI using JavaScript and then restart another request like in step 2.

Monitoring your application – real-time

Wouldn’t it be nice if we could monitor our application while it is actually running? And by monitoring i mean watching what is happening , which method is being called right now and what are the arguments it has?

Apparently we can. All we need to do is write code that writes to a log file with any library we wish. We can use Enterprise library Logging application block or log4net (Or build something of our own).

When our application is running the log file is being appended with the new data. but we cant see what is being written there in real time. so , here is a nice cool tool that does exactly that : it watches the appended text, let you filter what ever you want no matter what the format line is and let you even color important words you wish to see.

It is called “WinTail” and can be downloaded from here.

Here is a snap shot of what it can do:

Enjoy.

Handling ASP.NET Async pages client disconnection

Lately I have been working a lot with ASP.NET amazing feature :Asynchronous  pages. Whenever the page has a lot of work in the server and he wishes to set free the thread handling this request, this is the time we need to use Async pages.

I will not go into details about what Async pages are, but in a nutshell: Since there is a limit to the thread ASP.NET can use , we wish to free the long bounded thread to other thread so that they will not wait. (A good example can be: a page calling web service or doing IO work)

Now what is the operation the BeginProcessRequest does is very long, how do we know that the client is still connected and we need to send him back the response?

In addition to Async pages we can even write an HTTPHandler that is Async and will show one to illustate the problem:

   public class CallMeAsyncHandler : IHttpAsyncHandler

   {

         private HttpContext oCurrent;

         public void ProcessRequest(HttpContext context){}

         public bool IsReusable

         {

             get

             {

                 return false;

             }

         }

   public IAsyncResult BeginProcessRequest

                  (HttpContext context, AsyncCallback cb, object extraData)

   {

     //Do some log operation here

     //Create some IAsync result and return it

     return oAsync;

   }

 

   public void EndProcessRequest(IAsyncResult oAsyncResult)

   {

       //Write back to the output (Response object for instance)

   }

The answer is very simple,as it turns out the Response object has a property specifying the client is still connected : Response.IsClientConnected.

Hope this helps, enjoy.

Advanced JavaScript Open House

Hi all, As I promised, I am uploading the presentation and source files from the Open day at Sela this week.

In these files you can see the source code of the samples we showed in class and the slides which are a good reference to the highlight of this day. Than you all for participating...

Download

Creating Enumeration in JavaScript

Enumerations are a great way to make our code much more readable. In a nutshell Enum provides us a way to restrict a variable to one of a fixed set of values. Wouldn't it be nice if we could write one in JavaScript. Well we sure can!

As I wrote in many of my posts earlier each JavaScript object has a property names "prototype" which contains the method/fields of this type. so if we wish to add to a given object a field that acts like an enum we simply need to add it to the prototype too.

Here is a sample that creates a Namespace for defining several enums. In this case 2 enums: Color,FileAccess.

function Enums()
{
   //There is no sence to instansiate enum
   throw Error.notImplemented();
}

Enums.Colors = {Red : 1, Green :2,Yellow :3, Blue : 4}
Enums.FileAccess = {ReadOnly : 1, Write :2,NoAccess :3}

var color = Enums.Colors.Blue;
alert(color);

One thing to note here is that we should use prototypes here since then we will have to create instance in order to user our enums.

IE 8 New way to select objects using CSS selectors

When we wish to set some styling rules to a certain group on html controls on a given page - the proper way to do it is to use CSS selectors. CSS selectors come in many ways , You can write simple selector, complex selectors and even group them together.

Basically Selectors are the patterns that determine which style rules apply to elements of the document tree.

Lets see some sample:

Type element selectors: Will find all the div elements and set their font size to 22px

div{
     font-size:22px;
   }

Class Selector: Will find all the p elements that has a class attribute of "wrpa" 

and set their some properties.

p.wrap

  {
     text-align: center;
     color: red;                
  }

ID selector: Will find all the elements that with the Wrap as ID.
#WRAP

{
  background-color: silver;                
  border-color: gray;
}     

Descendent Selector: will find all the elements that are immediate or not immediate child of ...

h1 em{ color: red}  

Now what is we wish to use this selectors syntax and find those elements using JavaScript.

Well It is now possible using IE 8 JavaScript new features.

The document object has now new 2 functions :

1. document.querySelectorAll(selectorStr)

2. document.querySelector(selectorStr)

  For example, Lets say I have the following HTML:

<div id="div1">aaa</div>
<div class="SomeClass">bbb</div>
<div class="SomeClass">ccc</div>
<input type=button id="btnTest" onclick="GoSelectors();" value="Go selectors">

And the following JavaScript code:

function GoSelectors()
{ 

   var oDiv = document.querySelector("#div1");
   var oDivs = document.querySelectorAll("div.SomeClass");
   alert(oDiv.id);
   alert(oDivs.length);
}

The first js statement will return the div object with the id "div1" and the second statement will return all the div object with the given class name.

To read more:http://msdn.microsoft.com/en-us/library/cc288326(VS.85).aspx

IE 8 new Feature for working with JSON

When I am lecturing "Microsoft Ajax" and I need to show some Ajax sample that uses JSON I explain to my students that they need to download some js files and place them in the web site in order for them to work with JSON in the client side.

When I am referring to working with JSON  I usually mean 3 things:

1. Converting a string into a JSON object.

2. Converting an existing object into it's JSON string representation.

3. Converting an XML string into JSON object.

So for the first 2 I usually show the parse and stringify functions available in the free file to download from here: json2.js

At it turns out IE 8 has already a support for working with JSON. It contains a global object named "JSON" which has 2 methods. From msdn:

"An intrinsic object that provides methods to convert JScript values to and from the JavaScript Object Notation (JSON) format"

1. The JSON.stringify will convert an object (JavaScript object) into a JSON string:

var obj = new Object();
obj.x = 5;
obj.y = 6;

alert(JSON.stringify(obj));

will produce  the string   "{ 'x': 5, 'y': 6}"

2. The JSON.parse will convert a string into a JSON object.

var str = JSON.stringify(obj);
var obj2 = JSON.parse(str);
alert(obj2.x);

Some notes:

1. The JSON is available when the page is loaded (The engine is loaded).

2. You cannot create this JSON object using the new operator.

IE 8 Connectivity Enhancements

If you ask any .NET developer what is the number of http requests you can send to a given server at once - he will answer 2. He will be even more sure if he wrote some ajax pages or even worked with Microsoft Ajax.

Well as it turns out this answer is not correct. and especially not true in case of IE 8. As it turns out , when we are using IE 8 , rather its an HTTP 1.0 or HTTP 1.1 request we can now use  6 concurrent connections to the same server.

Here is a summary table from the msdn site:

The limitation was because of the 2 historical reasons:

1. At the time it was decided this was the limitation in other browsers.

2. At the time it was decided the Internet was not as fast as today . Today of chores we have high-bandwidth connections.

For more details: AJAX - Connectivity Enhancements in Internet Explorer 8

IE 8 JavaScript Improvements

Hi All, I happen to read the release notes of Microsoft IE 8 here and was amazed from something I have discovered.

The story begins from a devolvement request I received a few days ago. The request was to check if there is a Internet connection every X second ( 30 seconds actually). Well At the beginning what I did was very simple : I injected a JavaScript block by using the base page of the project. This JavaScript code calls some functions that uses window.setInterval function to run the connectivity check every 30 seconds:

var nSetTimeOutInterval;
var oXmlhttpForConnectionChecking;
function StartInternetConnection() {
    nSetTimeOutInterval = window.setInterval("CheckInternetConnection();", 

     parseInt(GetConnectionTimeOut(), 10) * 1000);
}

As you can see, I am keeping my interval id (handler) as a global variable so that I can cancel it I want to. In addition I am using a web.config file to specify the time interval.

Now we need to actually check if the Internet is "on":

function CheckInternetConnection() {   
    oXmlhttp = new XMLHttpRequest();    
    var sURL = GetTestConnectionURL();

    oXmlhttp.timeout = 5000;

    oXmlhttp.ontimeout = TimeoutFired;

    oXmlhttp.open("GET", sURL, true);
    oXmlhttp.onreadystatechange = GotAnswer;
    oXmlhttp.send(null);
}

The GetTestConnectionURL function will return the url for an empty page in the web site (to reduce traffic).

The call will be Async of obviously so we will not stuck the UI. We also have to set a timeout so that the request will not hang too much. (This timeout property only exists in XMLHttpRequest object). Now all that is left is to check that the http status code is 200.

function GotAnswer() {
    // if xmlhttp shows "loaded"
    if (oXmlhttp.readyState == 4) {
        //if "OK"
        if (oXmlhttp.status == 200) {
            //Do nothing....                       
        }
        else {
            alert("Note:The internet connection is lost...");
            window.clearInterval(nSetTimeOutInterval);
        }
    }
}

Well today I found a better way. IE 8 added a new property to the window.navigator object - window.navigator.onLine. Amazing!!!
This property is has  boolean value of true if we are online and false if we are not.

Try to alert this value when your network cable is connected and when it is not....

This is not all! As a bonus we can even register our page to 2 new events: onoffline and ononline.

These events will be called when the onLine property changes from true to false and from false to true.

JavaScript tip: How to send unknown number of arguments to a function

During my last lecture in the course: "Advanced JavaScript" I was asked by a student an interesting question. The question was, How do I create a function that can receive an unknown number of arguments. The hand was raised when we learned the Array construction function options. When you create an Array in JavaScript you have many option of creating it:
<script>
       var arr = new Array(); //Creates an empty array.
       var arrObj = Array(); //Creates an empty array.
       var arr = new Array("One", "Two", "Three");
       var arrObj = Array(54, 32, 77, 76);
       var arr = new Array(5);    //Can you guess what will be the length of this array ? :-)

       var arrObj = Array(5);
   </script>

Notice the second and third options. This constructor function accepts an unknown of argument that will initialize the array and determine it's initial size.

OK, So what if we wish to create our own function that can get an unknown number if args? just like C# has params option.

Well the answer is very simple. Every JavaScript function is an object. This object has properties (From it's prototype). One of these properties is "arguments". The arguments property consists of an array of all the arguments passed to a function.

Here is a simple example of how to create a method named "Add" that can receive an unknown number of args:

<script>
      function Add()
      {
        var nSum = 0
        for (var i = 0; i < arguments.length; i++) {
            nSum = nSum + arguments[i]
        }
        return nSum;
    }

</script>

Enjoy!