AJAX is about updating parts of a web page, without reloading the whole page.
AJAX = Asynchronous JavaScript and XML.
AJAX is a technique for creating fast and dynamic web pages.
AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.
AJAX provide the Partial post back of a page. means the only uneatable portion of the web page will be processed..
in visual studio 2008/2010 have inbuilt Ajax Extension Tab in Toolbox with some controls like below
- 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
Sir,
ReplyDeletecould you please explain....... how do we use asp table with a simple example.. :)
yes subhash i will explain frist of all you have to know about html table and then asp:Table control.
ReplyDeleteTable control is used to structure a web pages. In other words to divide a page into several rows and colums to arrange the information or images.
so its bassically for the page divide but you can use it as a table control to hold the data... but it will loss its row when a new row is added inside a table control...
ok
OK Sir .. :)
DeleteSir... How can we make a CrystalReport??
By default Visual Studio 2010 does not include Crystal Reports hence you need to download the Crystal Reports 13. from the internet.. i will give you a very simple Crystal report example in which you can access the data from the database and show that on Crystal report..
Delete