Anil Kasalanati

Debug slow calls using IIS Logs

anil.kasalanati — Fri, 06 Jan 2012 14:09:00 GMT

For any asp.net/WCF application hosted on IIS it is essential to monitor the response times of the web requests and the easiest way to do this is by using IIS logs. I use Log analyzer to output the calls taking a lot of time. Following steps would help you do it yourself and be an expert in monitoring your own performance. It is important to prove your point with statistical data.

Download following tool to analyze the IIS Logs -

LogAnalyzer -

http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=24659

And you need to run queries to query the avg time taken and response time.

Example query for avg response times -

LogParser -i:IISW3C "SELECT cs-uri-stem, AVG(time-taken) As AvgTime FROM C:\inetpub\Logs\*.log GROUP BY cs-uri-stem" - Replace the log path

Example query for response time for a resource-

LogParser -i:IISW3C "SELECT cs-uri-stem, COUNT(*) As Hits FROM C:\inetpub\Logs\*.log WHERE EXTRACT_FILENAME(cs-uri-stem) = 'sample.ashx' AND sc-status = '200' GROUP BY cs-uri-stem"

And you can output the report and expose it online via IIS.

With this I hope each one of you can easily debug problems in production.

I found this link quite useful for writing simple queries -

http://www.praveenmodi.com/parsing-iis-logs-with-logparser-22/

Simple way of converting server side objects into client side using JSON serialization for asp.net websites

anil.kasalanati — Wed, 29 Dec 2010 15:01:00 GMT

Introduction:-

With the growth of Web2.0 and the need for faster user experience the spotlight has shifted onto javascript based applications built using REST pattern or asp.net AJAX Pagerequest manager. And when we are working with javascript wouldn’t it be much better if we could create objects in an OOAD way and easily push it to the client side. Following are the reasons why you would push the server side objects onto client side

- Easy availability of the complex object.
- Use C# compiler and rich intellisense to create and maintain the objects but use them in the javascript. You could run code analysis etc.
- Reduce the number of calls we make to the server side by loading data on the pageload.

I would like to explain about the 3^rd point because that proved to be highly beneficial to me when I was fixing the performance issues of a major website. There could be a scenario where in you be making multiple AJAX based webrequestmanager calls in order to get the same response in a single page. This happens in the case of widget based framework when all the widgets are independent but they need some common information available in the framework to load the data. So instead of making n multiple calls we could load the data needed during pageload.

The above picture shows the scenario where in all the widgets need the common information and then call GetData webservice on the server side. Ofcourse the result can be cached on the client side but a better solution would be to avoid the call completely.

In order to do that we need to JSONSerialize the content and send it in the DOM.

Example:-

I have developed a simple application to demonstrate the idea and I would explaining that in detail here.

The class called SimpleClass would be sent as serialized JSON to the client side .

And this inherits from the base class which has the implementation for the GetJSONString method. You can create a single base class and all the object which need to be pushed to the client side can inherit from that class. The important thing to note is that the class should be annotated with DataContract attribute and the methods should have the Data Member attribute. This is needed by the .Net DataContractSerializer and this follows the opt-in mode so if you want to send an attribute to the client side then you need to annotate the DataMember attribute. So if I didn’t want to send the Result I would simple remove the DataMember attribute. This is default WCF/.Net 3.5 stuff but it provides the flexibility of have a fullfledged object on the server side but sending a smaller object to the client side. Sometimes you may hide some values due to security constraints.

And thing you will notice is that I have marked the class as Serializable so that it can be stored in the Session and used in webfarm deployment scenarios.

Following is the implementation of the base class –

This implements the default DataContractJsonSerializer and for more information or customization refer to following blogs –

http://softcero.blogspot.com/2010/03/optimizing-net-json-serializing-and-ii.html

http://weblogs.asp.net/gunnarpeipman/archive/2010/12/28/asp-net-serializing-and-deserializing-json-objects.aspx

The next part is pretty simple, I just need to inject this object into the aspx page.

And in the aspx markup I have the following line –

var data =(<%=SimpleClassJSON %>);

alert(data.ResultText);

</script>

This will output the content as JSON into the variable data and this can be any element in the DOM. And you can verify the element by checking data in the Firebug console.

Design Consideration –

If you have a lot of javascripts then you need to think about using Script # and you can write javascript in C#. Refer to Nikhil’s blog –

http://projects.nikhilk.net/ScriptSharp

Ensure that you are taking security into consideration while exposing server side objects on to client side. I have seen application exposing passwords, secret key so it is not a good practice.

The application can be tested using the following url –

http://techconsulting.vpscustomer.com/Samples/JsonTest.aspx

The source code is available at

http://techconsulting.vpscustomer.com/Source/HistoryTest.zip

Enabling Http caching and compression in IIS 7 for asp.net websites

anil.kasalanati — Wed, 29 Dec 2010 05:20:00 GMT

Caching –

There are 2 ways to set Http caching

1- Use Max age property

2- Expires header.

Doing the changes via IIS Console –

1. Select the website for which you want to enable caching and then select Http Responses in the features tab

2. Select the Expires webcontent and on changing the After setting you can generate the max age property for the cache control

3. Following is the screenshot of the headers

Then you can use some tool like fiddler and see 302 response coming from the server.

Doing it web.config way –

We can add static content section in the system.webserver section

<system.webServer>

</staticContent>

Compression -

By default static compression is enabled on IIS 7.0 but the only thing which falls under that category is CSS but this is not enough for most of the websites using lots of javascript. If you just thought by enabling dynamic compression would fix this then you are wrong so please follow following steps –

In some machines the dynamic compression is not enabled and following are the steps to enable it –

Open server manager
Roles > Web Server (IIS)
Role Services (scroll down) > Add Role Services
Add desired role (Web Server > Performance > Dynamic Content Compression)
Next, Install, Wait…Done!

 Roles > Web Server (IIS)
 Role Services (scroll down) > Add Role Services

Add desired role (Web Server > Performance > Dynamic Content Compression)

Next, Install, Wait…Done!

Enable -

 Open server manager
 Roles > Web Server (IIS) > Internet Information Services (IIS) Manager

Next pane: Sites > Default Web Site > Your Web Site
Main pane: IIS > Compression

Then comes the custom configuration for encrypting javascript resources.

The problem is that the compression in IIS 7 completely works on the mime types and by default there is a mismatch in the mime types

Go to following location

C:\Windows\System32\inetsrv\config

Open applicationHost.config

The mimemap is as follows

So the section in the staticTypes should be changed

Doing the web.config way –

We can add following section in the system.webserver section

<system.webServer>

More Information/References –

· http://weblogs.asp.net/owscott/archive/2009/02/22/iis-7-compression-good-bad-how-much.aspx

· http://www.west-wind.com/weblog/posts/98538.aspx

Implementing History Support using jQuery for AJAX websites built on asp.net AJAX

anil.kasalanati — Wed, 29 Dec 2010 05:08:00 GMT

Problem Statement:

Most modern day website use AJAX for page navigation and gone are the days of complete HTTP redirection so it is imperative that we support back and forward buttons on the browser so that end users navigation is not broken. In this article we discuss about solutions which are already available and problems with them.

Microsoft History Support:

Post .Net 3.5 sp1 Microsoft’s Script manager supports history for websites using Update panels. This is achieved by enabling the ENABLE HISTORY property for the script manager and then the event “Page_Browser_Navigate” needs to be handled. So whenever the browser buttons are clicked the event is fired and the application can write code to do the navigation.

The following articles provide good tutorials on how to do that

http://www.asp.net/aspnet-in-net-35-sp1/videos/introduction-to-aspnet-ajax-history

http://www.codeproject.com/KB/aspnet/ajaxhistorymanagement.aspx

And Microsoft api internally creates an IFrame and changes the bookmark of the url. Unfortunately this has a bug and it does not work in Ie6 and 7 which are the major browsers but it works in ie8 and Firefox. And Microsoft has apparently fixed this bug in .Net 4.0. Following is the blog

http://weblogs.asp.net/joshclose/archive/2008/11/11/asp-net-ajax-addhistorypoint-bug.aspx

For solutions which are still running on .net 3.5 sp1 there is no solution which Microsoft offers so there is are two way to solve this

o Disable the back button.

o Develop custom solution.

Disable back button

Even though this might look like a very simple thing to do there are issues around doing this because there is no event which can be manipulated from the javascript. The browser does not provide an api to do this. So most of the technical solution on internet offer work arounds like doing a history.forward(1) so that even if the user clicks a back button the destination page redirects the user to the original page. This is not a good customer experience and does not work for asp.net website where there are different views in the same page.

There are other ways around detecting the window unload events and writing code there. So there are 2 events onbeforeUnload and onUnload and we can write code to show a confirmation message to the user. If we write code in onUnLoad then we can only show a message but it is too late to stop the navigation. And if we write on onBeforeUnLoad we can stop the navigation if the user clicks cancel but this event would be triggered for all AJAX calls and hyperlinks where the href is anything other than #. We can do this but the website has to be checked properly to ensure there are no links where href is not # otherwise the user would see a popup message saying “you are leaving the website”.

Believe me after doing a lot of research on the back button disable I found it easier to support it rather than disabling the button. So I am going to discuss a solution which work using jQuery with some tweaking.

Custom Solution

JQuery already provides an api to manage the history of a AJAX website -

http://plugins.jquery.com/project/history

We need to integrate this with Microsoft Page request manager so that both of them work in tandem.

The page state is maintained in the cookie so that it can be passed to the server and I used jQuery cookie plug in for that –

http://plugins.jquery.com/node/1386/release

Firstly when the page loads there is a need to hook up all the events on the page which needs to cause browser history and following is the code to that.

jQuery(document).ready(function() {

// Initialize history plugin.

// The callback is called at once by present location.hash.

jQuery.history.init(pageload);

// set onlick event for buttons

jQuery("a[@rel='history']").click(function() {

var hash = this.page;

hash = hash.replace(/^.*#/, '');

isAsyncPostBack = true;

// moves to a new page.

// pageload is called at once.

jQuery.history.load(hash);

return true;

});

The above scripts basically gets all the DOM objects which have the attribute rel=”history” and add the event. In our test page we have the link button which has the attribute rel set to history.

<asp:LinkButton ID="Previous" rel="history" runat="server" onclick="PreviousOnClick">Previous</asp:LinkButton>

<asp:LinkButton ID="AsyncPostBack" rel="history" runat="server" onclick="NextOnClick">Next</asp:LinkButton>

<asp:LinkButton ID="HistoryLinkButton" runat="server" style="display:none" onclick="HistoryOnClick"></asp:LinkButton>

And you can see that there is an hidden HistoryLinkButton which used to send a sever side postback in case of browser back or previous buttons. And note that we need to use display:none and not visible= false because asp.net AJAX would disallow any post backs if visible=false.

And in general the pageload event get executed on the client side when a back or forward is pressed and the function is shown below

function pageload(hash) {

if (hash) {

if (!isAsyncPostBack) {

jQuery.cookie("page", hash);

__doPostBack("HistoryLinkButton", "");

}

isAsyncPostBack = false;

} else {

// start page

jQuery("#load").empty();

}

As you can see in case there is an hash in the url we are basically do an asp.net AJAX post back using the following statement

__doPostBack("HistoryLinkButton", "");

So whenever the user clicks back or forward the post back happens using the event statement we provide and Previous event code is invoked in the code behind. We need to have the code to use the pageId present in the url to change the page content.

And there is an important thing to note – because the hash is worked out using the pageId’s there is a need to recalculate the hash after every AJAX post back so following code is plugged in

function ReWorkHash() {

jQuery("a[@rel='history']").unbind("click");

jQuery("a[@rel='history']").click(function() {

var hash = jQuery(this).attr("page");

hash = hash.replace(/^.*#/, '');

jQuery.cookie("page", hash);

isAsyncPostBack = true;

// moves to a new page.

// pageload is called at once.

jQuery.history.load(hash);

return true;

});

}

This code is executed from the code behind using ScriptManager RegisterClientScriptBlock as shown below –

ScriptManager.RegisterClientScriptBlock(this, typeof(_Default), "Recalculater", "ReWorkHash();", true);

A sample application is available to be downloaded at the following location –

http://techconsulting.vpscustomer.com/Source/HistoryTest.zip

And a working sample is available at –

http://techconsulting.vpscustomer.com/Samples/Default.aspx

Sequence Aspnet Ajax Calls

anil.kasalanati — Wed, 18 Mar 2009 08:31:00 GMT

Most of you working with asp.net AJAX update panels already know that the there is limitation with respect to multiple requests at the same time. Following section taken from Dino’s blog(http://msdn.microsoft.com/en-us/magazine/cc163319.aspx#S6) on MSDN best describes the working of asp.net AJAX and the problem.

One AJAX Postback at a Time

Since partial rendering lets you add AJAX functionality to classic ASP.NET 2.0 pages without modifying the programming model, the server lifecycle of the page is fully preserved. This holds true for postback events, loading, rendering, and view state. The amount of traffic for a typical partial rendering call is smaller than that for a classic ASP.NET call, but the size of the view state is a constant and can only be reduced through page-specific programming techniques.With partial rendering, an ASP.NET page gains the continuous feel of an AJAX page, but maintains the traditional user interface. Seen from the client-side, a partial rendering page behaves as if it is part of a single, sequential UI. Only one operation can be pending at a time, even when two concurrent operations are possible from a business viewpoint.Imagine you have a page that displays any sort of information about a customer. This page contains two buttons—one for downloading order information and one for displaying customer details. From a pure business perspective, there's nothing preventing the user from clicking the two buttons in sequence to generate two successive requests, with the second request starting before the first has completed. The two requests need the same input—the customer ID—and both are read-only, meaning there is no danger of interfering with the status of the back-end database. Nevertheless, these two calls can't run concurrently in a partial-rendering page because partial rendering is based on the classic ASP.NET programming model—each request returns markup that includes an updated view state for the whole page. If you let two requests run concurrently, you put the consistency of the page's view state at risk. Two requests sent in quick sequence send the same view state to the server, but each request returns a different view state, updated for the controls involved with the processing of the request. This means the last request to return overwrites the changes made when the first request returned. Thus, partial-rendering AJAX pages still work according to the stop-and-go pattern.To avoid these types of problems, the page request manager object automatically kills any request that is pending when a new request is placed. In light of this behavior, it is extremely important that you disable the entire UI in partial rendering pages. This is to ensure that users can't interact with the whole page for the duration of the current request. As you can see, this statement directly contradicts one of the key benefits of AJAX—asynchronous interaction. So the basic problem with this is that in complex applications with multiple buttons(postback elements) in an update panel the user can always trigger two post backs. We can prevent that from the front end using some UI behaviours like hiding and showing behaviours but it is still very difficult to prevent multiple posts happening. When multiple posts happen for a mission critical application it is mandatory that we override the last win policy which AJAX.

Application

In this example I have added two buttons to the update panels and both the buttons just wait for 3 seconds before populating the corresponding label.When you click both the button in a span of 3 secs then only the latest click would work. But the following code will ensure that both the clicks work.

Sys.Application.add_load(ApplicationLoadHandler)

function ApplicationLoadHandler(sender, args) {if (!Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack()) {

Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(InitializeRequest);

}

function InitializeRequest(sender, args) {

var prm = Sys.WebForms.PageRequestManager.getInstance();

var eventId = args._postBackElement.id;

if (prm.get_isInAsyncPostBack()) {

setTimeout("Wait('" + eventId + "')", 2000);args.set_cancel(true);

}

function Wait(eventId) {__doPostBack(eventId, '');

}

</script>

The way it works is we need to add the InitilizeRequest handler to the Page Request Manager. In the Initialize Request method we detect whether there is an async post back in progress if yes then we wait for 2 sec and do the post after that.The Timer function in asp.net AJAX also has a similar code to handle multiple timers on a single page.Following are the code snippets from Timer class.

function Sys$UI$_Timer$_raiseTick() {

this._startTimer();

if ((this._pageRequestManager === null) || (!this._pageRequestManager.get_isInAsyncPostBack())){

this._doPostback();

this._postbackPending = false;

}

else {this._postbackPending = true;

}

function Sys$UI$_Timer$_handleEndRequest(sender, arg){

var dataItem = arg.get_dataItems()[this.get_id()];

if (dataItem){this._update(dataItem[0],dataItem[1]);

}

if ((this._postbackPending === true) && (this._pageRequestManager !== null)&&(this._pageRequestManager.get_isInAsyncPostBack() === false)){

this._postbackPending = false;

this._doPostback();

}

This is not tested for all the scenarios but you can extend the idea.

You can download the code from here (http://sequenceaspnetajax.codeplex.com).

Charting controls

anil.kasalanati — Tue, 27 Jan 2009 18:01:00 GMT

One of the requirement which we always got was to display 3D graph and charts and there are some solutions which render 3D flash charts like FusionCharts. Another option would be to use the new charts control launched by asp.net team. Please refer here. Following is an important note on the working of charts from Scotts blog

Notes:
"At runtime the server control generates an image (for example a .PNG file) that is referenced from the client HTML of the page using a element output by the control. The server control supports the ability to cache the chart image, as well as save it on disk for persistent scenarios. It does not require any other server software to be installed, and will work with any standard ASP.NET page."

Another option would be use the open source Google Map Api's .Please click here. I would say but the best option at the present for 2d charts is Google.

Steve Ballmer's note at CES

anil.kasalanati — Sat, 10 Jan 2009 10:34:00 GMT

Steve's first CES key note .

Please click here

Azure - Red Dog video

anil.kasalanati — Sat, 03 Jan 2009 18:16:00 GMT

A funny video on Microsoft Azure(Red Dog).

http://uk.youtube.com/watch?v=NZO9YE1ZvqE

Script # Framework

anil.kasalanati — Tue, 30 Dec 2008 12:41:00 GMT

Excellent framework to convert C# code to javascript developed by Nikhil.

http://projects.nikhilk.net/ScriptSharp/Conceptual-What

CLR 4.0 updates released at PDC 2008

anil.kasalanati — Mon, 29 Dec 2008 09:03:00 GMT

Nice updates to the CLR in the next release. Please view the video at http://channel9.msdn.com/pdc2008/pc49.

If you want to play around with VS 2010 and .NET 4.0, you can download the CTP from here, and can provide your feedback here.

Windows Workflow Service Logic for CSF

anil.kasalanati — Sat, 29 Mar 2008 22:38:00 GMT

This is my first blog so will start with a winning design. Having spent a couple of years in Telecom domain and with Microsoft Connected Services Framework 2.5, I thought of contributing by writing an open source 'Services logic using Windows workflow'. For most of you who are not aware what CSF is please refer to About CSF.

Service Logic is the core part of any CSF solution as it controls the order in which the participants in the CSF Session will be called. The two most common sample provided by microsoft are using Biztalk Server Rules Engine and native C# based solution. Both these solution have their own disadvantages like Biztalk suffers with performance and datadriven capabilities and C# base solution is not datadriven. Hence it is very essential to have a service logic with data driven capabilties. So the ideal choice I made was a C# based web service with a Windows Workflow based rules Engine backend. The benefits of windows workflow rules (apart from runtime being free) over Biztalk is that the rules engine database can have a custom schema. Microsoft provides a great flexibility by just providing the framework and allowing the solution designers to customize the database. Ofcourse some may argue that there might be performance issues as the rules are stored in Xml and the xml is quite huge. But the scalability it provides in design cannot be argued. Another good thing about WF Rules Engine is that it comes with an open source RuleSet ToolKit to edit rules.

This solution has made me a technical hero in the 'Microsoft Heroes Happen Here' competetion. Apart from the certificate I also got a DELL 1500 VOSTRO.

The solution can be downloaded from Code Plex.