- Ajax script manager
- update panel
- timer
- update progress
above four are the main control of ajax
in this section i will explain how ajax update panel works...
Many developers, when first using ASP.NET AJAX, start with the UpdatePanel control. If a ScriptManager control is included on the page and the UpdatePanel contains any controls, the controls within UpdatePanel can be asynchronously updated through the facilities of AJAX
NOTE : if you want to use ajax controls then you have to user ajax script manager . script manager identify all the ajax controls on the page ... one ajax script manager for one page.... and you can use many ajax controls.. and it could be place inside <form></form> tag
now design you form like this
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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></title>
</head>
<body>
<form id="form1" runat="server">
<div id="header" style="width:99%; height:inherit;">
<div id="headleft" style="width:50%; height:200px; border:2px solid Green; float:left;">
<center><h1>TIME ON LABEL WITHOUT AJAX CONTORL</h1></center>
<center><h2 style="color:Green;"><asp:Label ID="lbltime" runat="server" Text="Show Time"></asp:Label></h2></center>
<center><asp:Button ID="btntime" runat="server" Text="Click to Time"
onclick="btntime_Click" /></center>
</div>
<div id="headright" style="width:49%; height:200px; border:2px solid red; float:right;">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<center><h1>TIME ON LABEL WITHOUT AJAX CONTORL</h1></center>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<center><h2 style="color:red;"><asp:Label ID="lblajaxtime" runat="server" Text="Show Time WITH ajax"></asp:Label></h2></center>
<center><asp:Button ID="btnajaxtime" runat="server" Text="Click to AJAX Time"
onclick="btnajaxtime_Click" /></center>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</form>
</body>
</html>
this code contains two label and two button with two different divison tag ....one is simple ordinary button and label and secon is inside a ajax contorls..
and design will be look like the above
 |
| design of page when you type or paste above code then you will see the desing |
red division have same controls like green one but red div label and button are place inside the ajax update panel.. like
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<center><h2 style="color:red;"><asp:Label ID="lblajaxtime" runat="server" Text="Show Time WITH ajax"></asp:Label></h2></center>
<center><asp:Button ID="btnajaxtime" runat="server" Text="Click to AJAX Time"
onclick="btnajaxtime_Click" /></center>
</ContentTemplate>
</asp:UpdatePanel>
when you click on click to time button then full page is refresed and get loaded with all contorls.. and sign is page is reloaded..
code page of this contorl is
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btntime_Click(object sender, EventArgs e)
{
lbltime.Text = DateTime.Now.ToString();
}
protected void btnajaxtime_Click(object sender, EventArgs e)
{
lblajaxtime.Text = DateTime.Now.ToString();
}
}
when you click on the click to ajax time then full page is not refreshed and partially page is refersed.. means only the content within update panel is post to server and get reloaded....
you can also use this update panel to get the data from the database on a button click...
or you can run this time regularly like a watch running without click on a button ..
there is another contorl which is AJAX TIMER CONTROL.. this will help you to run a time or get the data from the database without and event occure but after a specified time it will call
to see the ajax timer contorl follow the below link
so enjoy the simple ajax update panel contorl if any query regarding this post or any other question regarding asp.net and database must write inside comment...
thank you happy asp.net
.png)