How to improve AJAX page Speed with 5 easy steps

Hello friends,

Many times we face the Ajax speed problem. Our AJAX page is very slow.

So here I am with  five valuable tips checkout if it helps you some where. 

1)      EnablePartialRendering:-

 Make enable partial rendering = true in script manager

Its syntax is as shown below

“<asp:ScriptManager ID=”scm” runat=”server”  EnablePartialRendering =”true”   >”

It enable partial rendering so use does n’t have to wait a long for page.

Remember its useful only when you have multiple panel update. 

2)      Script Refrence Profiler dll:-

This is one of the most important DLL by which you can imporve your page performance.

Its simple in use you have to do just drag and drop Script refrence profiler in Div. Then run the page it will give you all refrence Scripts.

As shown below fig.

 

 Just copy this and page in script tag of Script manager as shown below.

<asp:ScriptManager ID=”scm” runat=”server”  EnablePartialRendering =”true”   >

    <Scripts>

<asp:ScriptReference path=”../Includes/Scripts/System.Web.Extensions/1.0.61025.0/MicrosoftAjax.js”/>

</script>

</asp:scriptManager> 

3)      Script Mode=”Release”:- 

Try to make script mode always release for better performance.

You have to do following setting

<asp:ScriptManager ID=”scm” runat=”server”  ScriptMode =”Release”>

 4)      LoadScriptBeforeUI=”false”:-

This should be false for better result. When you do this then screen comes fast.

 5)      Composite Script:-

 If you are using Asp.net 3.5 with service pack 1 then there will be a nice tag which is called Composite script tag.

By the name its clear that it composite all the script its syntax is as follows.

<asp:ScriptManager ID=”scm” runat=”server”  ScriptMode =”Release”>

<CompositeScript ScriptMode =”Release”>

     <Scripts>

        <asp:ScriptReference Name=”MicrosoftAjax.js” ScriptMode=”Auto” Path=”../Includes/Scripts/System.Web.Extensions/1.0.61025.0/MicrosoftAjax.js”>

        </asp:ScriptReference>

        <asp:ScriptReference Name=”MicrosoftAjax.debug.js” ScriptMode=”Auto” Path=”../Includes/Scripts/System.Web.Extensions/1.0.61025.0/MicrosoftAjax.debug.js”>

        </asp:ScriptReference>

        </script>

</compositeScript>

 If you find any error related size then just concentrate on following link its very good to solve that kind of problem.

http://bellouti.wordpress.com/2008/09/14/combining-javascript-files-with-ajax-toolkit-library/

 So ,friends in this way we improve our AJAX Page.

I hope you like this so enjoy AJAX.

 Thanks

Rajat Jaiswal

Some useful Terminology (acronyms)

Hello friends,
Cheers!
Here I am with some useful terminology and these acronyms are generally used now days in broad way take a look.
1) ESB : Enterprise Service Bus
2) POX : Plain OLD XML
3) REST: Representational State Transfer
4) SOAP: Simple Object Access Protocol
5) RIA : Rich Internet Application
6) XML : Extensible Markup Language
7) JASON: Java Script Object Notation
DOM : Document Object Modeling
9) XAML : Extensible Application Markup Language
10) LINQ : Language Integrated Query
11) RSS: Really Simple Syndication
12) WCF: Windows Communication Foundation
13) WF: Windows Foundation
14) WPF: Windows Presentation Foundation
15) AJAX: Asynchronous Java script and XML
16) XLST: Extensible Style Sheet Language Transformation
17) INDIGO: Code name of Microsoft windows Communication foundation Technology
18) OSLO: Code name of Microsoft Modeling Technology
19) SOA: Service Oriented Architecture
20) ORCAS: dot net 3.5 Version called ORCAS
21) AVALON: code name of Microsoft Windows Presentation foundation Technology
22) Azure: Microsoft new Operation system Related to Cloud computing
23) Astoria : Code name of Ado.net Data services

I hope you people like it.
Enjoy life with dot net.

Your host
Rajat Jaiswal

How to add AJAX tab control at run time?

 Hello friends,
Today we will discuss how to add Ajax tab control at run time.

As you know for adding tab control in our page we require two Ajax controls one is AJAX Tab Container and second is AJAX tab Panel control.
AJAX tab container is main control and Tab Panel is child control. Now you have to follow step as follow.

Step 1:-
For this first just drag drop a Tab Container on our aspx page.

Step 2 :- Now you have to add panel in tab container for that we have to work in special method of tab Container which is tab Initialize method.
It means you have to work in below event.
Private Sub tabCont_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles tabCont.Init
Try
Me.pvt_DefineTabControl()
Catch ex As Exception
Throw ex
End Try
End Sub
Here I have created a Define tab control method in which we define tab control at run time.
According to my knowledge if you do not use this tab initialize method than you can not use run time control creation. So this event is must when you creating run time tab control

Step3 :- you are thinking what is pvt_DefineTabControl method so it’s a simple work as you see below.
Private Sub pvt_DefineTabControl()
Try
If Me.tabCont.Tabs.Count > 0 Then
Me.tabCont.Tabs.Clear()
End If
If Session(“Counter”) Is Nothing OrElse Trim(Session(“Counter”)) = String.Empty Then
Session(“Counter”) = 1
End If
For intI As Integer = 0 To CInt(Session(“counter”)) – 1
Dim tabPan As New TabPanel
Dim btnPanelNumber As New Button
btnPanelNumber.ID = “btnPanel” & intI.ToString
btnPanelNumber.Text = “Click me to create Panel ” & (intI + 1).ToString
AddHandler btnPanelNumber.Click, AddressOf MyButtonClick
tabPan.Controls.Add(btnPanelNumber)
tabPan.HeaderText = “Panel” & intI.ToString
Me.tabCont.Controls.Add(tabPan)
Next
Catch ex As Exception
Throw ex
End Try
End Sub
Step 4: here I have added one Button in Tab Panel for this I used a common Click event handler which is MyButtonClick
By default there is a single TabPanel when you click button in tab Panel then you will get next panel.
Private Sub MyButtonClick(ByVal sender As Object, ByVal e As System.EventArgs)
Try
Session(“Counter”) = Session(“Counter”) + 1
Dim strButtonId As String = CType(sender, Button).ID
Dim intId As Integer = CInt(strButtonId.Replace(“btnPanel”, 0))
Me.pvt_DefineTabControl()
Me.tabCont.Tabs(intId).HeaderText = “You have Clicked me” + intId.ToString + “Panel’s Button”
Catch ex As Exception
Throw ex
End Try
End Sub

Step 5:- For Example you can visit on http://indiadotnetajaxtabwork.tk/

and download code also.

Thanks & Regards
Rajat
Enjoy Coding
Enjoy Ajax tool kit

Introduction of Microsoft Chart control in 5 minutes Part -Ist

 

Hello Friends,

If you have ever work on Data warehousing project or any project which is related with MIS then you know what is need of Graphs.

As a programmer we really need to know how to show up the graphs. As graphs are useful in Data analysis as you people know and our customer many time demanding this.

For example. The need yearly comparisons of production stock need over all profit comparison.

Earlier for this we use Dundas charting control one of the finest control. Or many more available in market but now Microsoft announced same charting capable tool which is Ms Chart control

Especially very helpful with AJAX.

It’s easily available and for the most it’s free.

Below are the sites from where you can download the MS chart control.

 

 

http://www.microsoft.com/downloads/details.aspx?FamilyId=130F7986-BF49-4FE5-9CA8-910AE6EA442C&displaylang=enI know you people eager to see example of it. But sorry folk this time I am in party this weekend so could not completed the example for this time but soon I am with the several example of Ms Chart control

And in next week defiantly with I will provide you chart control example and how to use it tutorial.

Till that time

Enjoy programming

Thanks

Rajat

 

JQuery a unique thing part- IV

Hello friends,

Today i am with new topic which is Jquery  and ajax. which is most intresting topic of mine  i am here with some basic fuction  so enjoy with this.

Ajax Functionality & JQuery

Ans:

Jquery is giving many function for using ajax which help to use ajax functionality easy. Here we goes with detail

$.ajax (s) :- its first and basic function for using ajax by Jquery.

Where s I can it collection of different properties which is enclosed in curly brackets “{ }”

1) $.ajax( {type : ” GET/POST”,

url : ” any url” ,

data : “data1=rajat& data2=test”, ( any data which you want to pass to the server…)

Success: function () {} , (any operation after successful readystate= 4)

cache : “TRUE/FALSE” ,

});

Ex:- To pass data from client to server we use following example

$.ajax({

type: “POST”,

url: “SaveUser.aspx”,

data: “name=RAJAT&Surname=JAISWAL”,

success: function(msg){

alert( “Data Saved: ” + msg );

}

} );

2)load(url) :- by the name it is clear that it will load html of a remote file and inject in current calling element.

Ex:- $(“#dvResult”).load(“htmlPage1.htm”);

it will load htmlPage1.htm ’s html in div part

3) $.get(url) :- Simplest form to use http get request is $.get which is jquery.get(). We can send data along with this also which is optional part.

EX:- $(“save.aspx”,{name:”RAJAT”, surname:”JAISWAL”});

suppose if want to take back result from Response. Then it has following format $(“save.aspx”,{name:”RAJAT”, surname: “JAISWAL”} , function(data) { alert(‘do operation’ + data);});

4)$.getJASON(url,data,function) :- To get response in json format we use this fuction its same as $get the diffrence here is only one that its respond in Json.

Ex- suppose from server the data return in json format which is { “info”:[{ "strFirstName" :"Rajat" , "strLastName" : "Jaiswal"}]}

Then we do below code $.getJSON(“default.aspx”, function(data) { alert(data.info[0].strFirstName + data.info[0].strLastName); });

5) $.post(url,data,function):- it same as get method just a diffrence that it use post method to send data.

Ex:- $.post(“save.aspx”);

In next session i will come with simple example related to Ajax & Jquery.

Thanks

Rajat

AJAX Basic Part – III

Hi,

today we will do next  topic so lets begin

5. What is JSON ?

Ans: JSON is JavaScript Object Notation. It’s a light weight Data interchange format which is independent from language. Its easy to read & Write by human & easy to parse & genrate by language. The attributes is seprated with “,” (comma) and value of attributes are define after colon symbol(“:”) .

Ex:- {Data:[{"fname" : "RAJAT", "Lname" : "JAISWAL" }]}

The above is JSON example in which there are two attributes fname, Lname and the are seprated by “,” (comma) symbol.

And there value is “RAJAT” & JAISWAL” which are define after “:” (colon) symbol.

I am attaching  project file just go through it.

One of the most important work here is to parse json

We do response with following format

 

 

 

 {“Bank”:[{"lngId" : "1", "strCode" :"ICICI" ,"strBank" : "ICICI BANK" },{"lngId" : "2", "strCode" :"HDFC" ,"strBank" : "HDFC BANK" }]}

 When we parse with json then here is the code for it.

  function myServerResponse() {
            if (myServerRequest.readyState == 4) {
                if (myServerRequest.status == 200) {
                    var tdata;
                    tdata = eval(‘(‘+ myServerRequest.responseText +’)');
                    var intI;
                    intI = 0;
                    var strResult =”<table border=’1′ cellspacing=’4′ cellpadding=’5′><TR><TD>lngId</td><td>code</td><td>Bank</td></tr>”
                    for (intI = 0; intI <= tdata.bank.length – 1; intI++) {
                      strResult = strResult + “<tr><td>” + tdata.bank[intI].lngId + “</td><td>” + tdata.bank[intI].strCode + “</td><td>” + tdata.bank[intI].strBank + “</td></tr>”;
                    }
                   
                    strResult = strResult + “</table>”
                    document.getElementById(‘dvResult’).innerHTML = strResult;
                } else {
                    alert(‘error’);
                }
            }
            return false;

        }

 Here we first eval the responseText then  we just use it as collection array as shown in above example.

tdata.bank[0].lngId = 1

tdata.bank[0].strCode =”ICICI”

tdata.bank[0].strBank =”ICICI BANK”

in the above manner we use the Json which is meaning ful and simple format.

for more information check out the attached project. bankmasterProject

Thanks

Rajat

AJAX Basic Part -II

Hello friends ,

Here  i am with next topic of AJAX  basic which is part II. so next step is simple example so  here we go with simple example.

As part of AJAX basic I just come with below example in this we create two page one is with server coding & another with client coding.

My main aim here to get result by ajax with out post back so we just try to get current time as result.

For this we write code in default.aspx page as below

<script language =”javascript” type=”text/javascript” >

var myServerRequest;

function callAjax() {

try {

myServerRequest = new XMLHttpRequest();

myServerRequest.status

 

}

catch (ex) {

try {

myServerRequest = new ActiveXObject(“Microsoft.XMLHTTP”);

}

catch (ax) {

try {

myServerRequest = new ActiveXObject(“Msxml2.XMLHTTP”);

}

catch (ax1) {

return false;

}

}

}

}

function Callserver() {

callAjax();

if (myServerRequest != null) {

myServerRequest.open(‘GET’, “serverCode.aspx”, true);

myServerRequest.onreadystatechange = myServerResponse;

myServerRequest.send();

}

return false;

}

function myServerResponse() {

if (myServerRequest.readyState == 4) {

if (myServerRequest.status == 200) {

document.getElementById(‘dvResult’).innerHTML = myServerRequest.responseText;

} else {

document.getElementById(‘dvResult’).innerHTML = ‘Oops Error’;

}

}

return false;

 

}

</script>

Here we have 3 main function

1. CallAjax :- it is responsible for Assigning XMLHttpRequest Object.

2. myserverResponse :- by the name it is clear that it use for holding the result what ever pass by server.

3. callServer :- This function is call on any event on button and it sum up the above 2 events.

On server Page at page load we do following code

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

Response.Write(Now.ToString)

Response.End()

End Sub

Here we just write time as response then we end response.

If you do not do response.end() then html of server page also comes.

you can download the code from

simpleajax

just copy and paste code in your page and it will work.

Thanks

Rajat

AJAX Basic Part -I

Dear all ,

Today i am starting basic of AJAX . so please bear with me if you find any thing missing let me know as far as my concern i will cover basic information which is require a programmer to know and how it will work.

1. What is Ajax ?

Answer: Ajax Stands for Asynchronous JavaScript And XML. It’s a way to make web application like windows application, give use rich Interface.

 

2. How it Works ?

By working as a extra layer between user browser and server it handle server communication in background submit server request take response from server, the response data integrated in page seamlessly without post back of page. This layer often refers as AJAX engine or AJAx framework.

When ever you click on link or submit form by pressing button then you make a http request. So the page is post back.

XMLHttpRequest is object that can be handle with JavaScript and we can achive goal to take http request without postback.

When we using AJAX layer then we do asynchronous post back which means request to server made in background

The flow is as follows

Web page Request –> Make xml Http Request object –>

Send rquest to server –>

Monitor the request Status –>

Ready state Status –>

respond to client –>

get response–>

Process Return data

For any AJAX work you need to create a object of XMLHttpRequest for many browser you can create objects as follows

var request = new XMLHTTPRequest();

To achive same result in microsoft browser you have to do following thing

var request = new ActiveXObject(“Microsoft.XMLHTTP”);

But some different version use below definition

Var request = new ActiveXObject(“Msxml2.XMLHTTP”);

Or you can write as below

<script language =”JavaScript” type=”text/script”>

var request ;

function defineRequest(){

try {

request = new XMLHTTPRequest();

}

catch ( ex) {

try{

request = new ActiveXObject(“Microsoft.XMLHTTP”);

}

catch (ex1){

try{

request = new ActiveXObject(“Msxml2.XMLHTTP”);

}

catch(ex2){

}

}

}

 

}

XMLHttpRequest object will have following property :

1) onreadystatechange :- Determine which event handler will called when object ready state property changed

2) readyState :- there are following values for this

0 – un initialize

1 – loading

2 – loaded

3 – intractive

4 – completed

3)responseText :- Data return by Server in text format

4) responseXML :- Data return by server in XML format

5) status : – Http Status code

6) statusText :- Http Status Text

And it has following methods

Abort() :- Stop the current Request.

getAllResponseHeaders() :- Return all headers as string

getResponseHeader(x) :- get the x header value in string

Open(‘Method’,url, a) :- specify the Method post /get

url for request

a= true/false determine whether the request handle asynchronously or not.

Send(content) : send a request ( default post data method)

Thanks

Rajat

Rest will be in part 2  enjoy coding…

 

Asp.net with ajax performance

Hello friends,

let start with some perfomance improvement tips which i used and it improved performance too.

but before starting it be sure that u have restored  Vs2008 sp1.

It will give many new functionality.

today’s tips is Load Script befor Ui property in scriptManager tag of ajax.

when you use the  LoadScriptsBeforeUI=”false”   then Script is load first then javascript dowloaded on client site due to which performance at user end is improved.

Secondly if you require partial page rendering that use it  EnablePartialRendering=”true”

just because of it your performance will improved.

you can use both the otption as shown below.

 

<asp:ScriptManager ID=”ScriptManager1″ runat=”server” AsyncPostBackTimeout=”3600″  EnablePartialRendering=”true” LoadScriptsBeforeUI=”false”>  

Thanks

Rajat