Please visit ASP.NET AJAX Control Toolkit for in detail examples of each ajax controls.
http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/Default.aspx
In Simple Term what is AJAX?
AJAX is way by which we can avoid postback to perform server-side processing.
Consider Calculator Example: Following is a simple web application which performs calculation based on operation selected.
Problem with this application is when you click calculate button the default behavior is Page Postback occurs, and which is not user friendly. You can see in following Image that on Pressing Calculate Button page postback occurs and in worst case it take even time to render controls, as shown in figure, due to heavy calculation.
Now lets understand how we can avoid Page Postback with the use of AJAX and make a user friendly application.
AJAX Example with Visual Studio 2008 and Asp.net 3.5
Note: With VS.Net 2008 we don't need to modify web.config file as we used to do while using Ajax extension in VS.Net 2005, as AJAX Framework support is inbuilt with VS.Net 2008.
Step 1: Add Script Manager, Note: Every AJAX Application must contain Script Manager.
Step 2: Add Update Pannel, In AJAX anything inside Update Pannel, will avoid Page Postback and process server-side calculation as if client function has occurred.
Step 3: Put the controls Inside Update Pannel, which require Page Postback. In our example, I have form this calcy application in table so rather than putting just a button and result label i have put whole table, but otherwise you can just put LABEL and Button, as button cause Page Postback and Label updates actual result.
Now, run the application and you will feel the difference, the page will now not postback to calculate same operation which was causing Page Postback before.
http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/Default.aspx
In Simple Term what is AJAX?
AJAX is way by which we can avoid postback to perform server-side processing.
Consider Calculator Example: Following is a simple web application which performs calculation based on operation selected.
Problem with this application is when you click calculate button the default behavior is Page Postback occurs, and which is not user friendly. You can see in following Image that on Pressing Calculate Button page postback occurs and in worst case it take even time to render controls, as shown in figure, due to heavy calculation.
Now lets understand how we can avoid Page Postback with the use of AJAX and make a user friendly application.
AJAX Example with Visual Studio 2008 and Asp.net 3.5
Note: With VS.Net 2008 we don't need to modify web.config file as we used to do while using Ajax extension in VS.Net 2005, as AJAX Framework support is inbuilt with VS.Net 2008.
Step 1: Add Script Manager, Note: Every AJAX Application must contain Script Manager.
Step 2: Add Update Pannel, In AJAX anything inside Update Pannel, will avoid Page Postback and process server-side calculation as if client function has occurred.
Step 3: Put the controls Inside Update Pannel, which require Page Postback. In our example, I have form this calcy application in table so rather than putting just a button and result label i have put whole table, but otherwise you can just put LABEL and Button, as button cause Page Postback and Label updates actual result.
Now, run the application and you will feel the difference, the page will now not postback to calculate same operation which was causing Page Postback before.
Another example:
Building a simple ASP.Net page with AJAX:
Steps are:
1. File --> New --> Web Site
2. Choose ASP.NET Web Site from Visual Studio Templates
3. Give a name for this project
4. Select Language
5. Now add a Script Manager server control to the top of the page
6. Now add an Update panel server control
7. Put a label & a button within the Update Panel Content Template tag.
8. Write code under Button click event.
9. Run the project & click on the button to see the effect.
If you understand the above steps that i have explained to learn ajax then basically thats enough to give a kick to start asp.net 3.5 AJAX.
Ok now we will go to learn ajax by using an example. Keep in mind two things to create an ajax application that first one is adding a Script Manager & the second one is Adding Update Panel. Update Panel wont work if you don't include Script Manager. Since Script Manager handles all http requests by maintaing a javascript library. You can add only one Script Manager in a page but you can add more than one Update Panel in a page. If you need to post back a simple portion of your page then wrap those portion into an Update Panel. So hope now you can understand how Update Panel works in asp.net. For better understanding we will make an example where we keep a portion under Update Panel & keep other portion out side the Update Panel. So theoratically what will happen? When you generate any post back event within Update Panel then the page will not refresh. But when you click on outside control then the page will refresh. Now implement the scenario in step by step.
Fig: Create a web site
Fig: Adding Script manager & Update Panel control in aspx page
In the first figure i have created a web site. In the second first i have added a Script Manager into the page plus added an Update Panel into the page. If you look at the 2nd image then you found that i have kept a label & a button control outside the update panel and also kept a label & button control inside the Update Panel. Full aspx Html code block is given below:
Steps are:
1. File --> New --> Web Site
2. Choose ASP.NET Web Site from Visual Studio Templates
3. Give a name for this project
4. Select Language
5. Now add a Script Manager server control to the top of the page
6. Now add an Update panel server control
7. Put a label & a button within the Update Panel Content Template tag.
8. Write code under Button click event.
9. Run the project & click on the button to see the effect.
If you understand the above steps that i have explained to learn ajax then basically thats enough to give a kick to start asp.net 3.5 AJAX.
Ok now we will go to learn ajax by using an example. Keep in mind two things to create an ajax application that first one is adding a Script Manager & the second one is Adding Update Panel. Update Panel wont work if you don't include Script Manager. Since Script Manager handles all http requests by maintaing a javascript library. You can add only one Script Manager in a page but you can add more than one Update Panel in a page. If you need to post back a simple portion of your page then wrap those portion into an Update Panel. So hope now you can understand how Update Panel works in asp.net. For better understanding we will make an example where we keep a portion under Update Panel & keep other portion out side the Update Panel. So theoratically what will happen? When you generate any post back event within Update Panel then the page will not refresh. But when you click on outside control then the page will refresh. Now implement the scenario in step by step.
Fig: Create a web site
Fig: Adding Script manager & Update Panel control in aspx page
In the first figure i have created a web site. In the second first i have added a Script Manager into the page plus added an Update Panel into the page. If you look at the 2nd image then you found that i have kept a label & a button control outside the update panel and also kept a label & button control inside the Update Panel. Full aspx Html code block is given below:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="startajax.aspx.cs" Inherits="startajax" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Start Ajax Asp.net3.5 / Learn Asp.Net Ajax</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Label runat="server" ID="lblServerTime"></asp:Label>
<br /><br />
<asp:Button runat="server" ID="cmdPostBack" Text="PostBack to Server"
onclick="cmdPostBack_Click" />
<br />
<br />
<hr />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label runat="server" ID="lbltime"></asp:Label>
<br /><br />
<asp:Button runat="server" ID="cmdGetTime" Text="Call Ajax"
onclick="cmdGetTime_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Start Ajax Asp.net3.5 / Learn Asp.Net Ajax</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Label runat="server" ID="lblServerTime"></asp:Label>
<br /><br />
<asp:Button runat="server" ID="cmdPostBack" Text="PostBack to Server"
onclick="cmdPostBack_Click" />
<br />
<br />
<hr />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label runat="server" ID="lbltime"></asp:Label>
<br /><br />
<asp:Button runat="server" ID="cmdGetTime" Text="Call Ajax"
onclick="cmdGetTime_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
Server Side Code:
protected void cmdGetTime_Click(object sender, EventArgs e)
{
lbltime.Text = DateTime.Now.ToString();
}
protected void cmdPostBack_Click(object sender, EventArgs e)
{
lblServerTime.Text = DateTime.Now.ToString();
}
{
lbltime.Text = DateTime.Now.ToString();
}
protected void cmdPostBack_Click(object sender, EventArgs e)
{
lblServerTime.Text = DateTime.Now.ToString();
}
So now run the project & click on both button Inside the Update Panel Control and Outside the Update Panel Control. Did you get AJAX feelings???
Output:
So hope now you can start to learn "Asp.net Ajax".
So its so easy to make AJAX Enabled application with VS.Net 2008. For downloading AJAX Control Toolkit Extension for VS.Net 2008
Reference:
Voici les coordonnées de contact des investisseurs, _ lfdsloans@lemeridianfds.com Ou Whatsapp +1 989-394-3740 qui m'a aidé avec un prêt de 90 000,00 euros pour démarrer mon entreprise et je suis très reconnaissant, ce fut vraiment dur pour moi d'essayer faire en sorte que ma mère soit célibataire, les choses ne sont pas faciles avec moi, mais avec l'aide de Le_Meridian, je me réjouis de voir mon entreprise devenir plus forte et en pleine expansion également. Ici, mais je dois vraiment exprimer ma gratitude pour que toute personne cherchant une aide financière ou traversant des difficultés avec son entreprise ou désirant démarrer un projet d’entreprise puisse voir à cela et avoir l’espoir de se sortir de ces épreuves .. Merci.
ReplyDelete