Anyone intereseted on having a hear on AJAX implementation in your ASP.NET application..
Lets take a word on this concept which melts of so smoothly into your application that its working would really impress you.
Ever seen a site such as a one which displays live Cricket scores or the one related to Stock Market where equity prices get update on a live feed without you refreshing the entire page. You would have seen only the portion related to the Cricket scores or the Stock prices gets updated. The rest of the page remains as it is. This concept is called as the PARTIAL RENDERING of the page.
So for this Partial Rendering to take place in any of your pages in your ASP.NET application , you need to implement AJAX on the source code for that page in your application. Wondering how to do that ?? Below is your answer...
If you are an ASP.NET developer then you probably are aware of the AJAX Extension tab in Visual Studio (2008 or higher generally) Toolbox and the tab has a few very useful tools to implement AJAX in a web application. We will be implementing AJAX using UpdatePanel and ScriptManager . Both tools are available in the same tab of the Toolbox.
UpdatePanel
Let's learn a few lines about Update Panel. It's nothing but a region that will be updated in asynchronous operations (region which undergoes partial rendering/updation). And this is the beauty of AJAX. The contents of the UpdatePanel will be updated and the outside content will remain the same.
ScriptManager
This is the hero of AJAX implementation in ASP.NET. Before writing any code related to ajax you need to put a ScriptManager tag in the aspx page.
Let's see one example in action.
The following will print the time within an Update Panel:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
//Script manager tag is here
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
// Code outside of Update panel
Time at Load Time <%= DateTime.Now.ToLongTimeString() %>.
// code inside Update panel
<asp:UpdatePanel ID="UpdatePanel1"
runat="server" UpdateMode="Conditional">
<ContentTemplate>
Latest Time by refresh <%= DateTime.Now.ToLongTimeString() %>.
<br /><asp:Button Text="Refresh Time" ID="Button1"
runat="server"/>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
Here is the output window:
If you try this example in your Development environment and run it then you can find the second date display is updated after each press of the button, because it's within the update panel. But the first label is (First Time display) as it is. OK, you are saying , "this is a very simple example and it's not at all useful in project development". Then I will show you something more useful than this. Let's make a little database operation by AJAX technique.
Here I would like to show how to fetch data from a database and display it within a Grid using AJAX. The basic concept or implementation is the same. I will keep a few controls within the Update Panel and that's all.
Here is my aspx page:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DropDownList ID="DDLAjax" runat="server" Height="16px" Width="117px">
</asp:DropDownList>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Show"
Width="95px" />
<br />
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
If you observe the content of my aspx page then you will discover that I have kept one drop down list, one button and one GridView within the UpdatePanel. And our hero (read ScriptManager) is just in the previous line of update panel. Now it's time to observe C# code for the same aspx page.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
namespace YahooProject
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
this.DDLAjax.Items.Add("first");
this.DDLAjax.Items.Add("second");
}
}
protected void Button1_Click(object sender, EventArgs e)
{
SqlConnection con = new SqlConnection();
con.ConnectionString = "Data Source=SERVERNAME;Initial atalog=DATABALENAME;Integrated Security=True";
con.Open();
SqlCommand cmd = null;
if (this.DDLAjax.SelectedItem.Text == "first")
{
cmd = new SqlCommand("select * from first",con);
}
if (this.DDLAjax.SelectedItem.Text == "second")
{
cmd = new SqlCommand("select * from second", con);
}
this.GridView1.DataSource = cmd.ExecuteReader();
this.GridView1.DataBind();
}
}
}
Hey; no rocket science here. The user will choose the table name by selecting it from the drop down list and after clicking the button the data from the relevant table will be fetched and bound with the Grid View. And we need to keep in mind only the component within the update panel (here GridView basically) will be updated.
OK, I hope you got the basic idea of UpdatePanel to implement AJAX. May be you try this out and in case of any further or advanced issues on the concept you can get back to us . Taaskk will be there to sort out the issue.
Lets take a word on this concept which melts of so smoothly into your application that its working would really impress you.
Ever seen a site such as a one which displays live Cricket scores or the one related to Stock Market where equity prices get update on a live feed without you refreshing the entire page. You would have seen only the portion related to the Cricket scores or the Stock prices gets updated. The rest of the page remains as it is. This concept is called as the PARTIAL RENDERING of the page.
So for this Partial Rendering to take place in any of your pages in your ASP.NET application , you need to implement AJAX on the source code for that page in your application. Wondering how to do that ?? Below is your answer...
Implement AJAX using Update Panel
If you are an ASP.NET developer then you probably are aware of the AJAX Extension tab in Visual Studio (2008 or higher generally) Toolbox and the tab has a few very useful tools to implement AJAX in a web application. We will be implementing AJAX using UpdatePanel and ScriptManager . Both tools are available in the same tab of the Toolbox.
UpdatePanel
Let's learn a few lines about Update Panel. It's nothing but a region that will be updated in asynchronous operations (region which undergoes partial rendering/updation). And this is the beauty of AJAX. The contents of the UpdatePanel will be updated and the outside content will remain the same.
ScriptManager
This is the hero of AJAX implementation in ASP.NET. Before writing any code related to ajax you need to put a ScriptManager tag in the aspx page.
Let's see one example in action.
The following will print the time within an Update Panel:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
//Script manager tag is here
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
// Code outside of Update panel
Time at Load Time <%= DateTime.Now.ToLongTimeString() %>.
// code inside Update panel
<asp:UpdatePanel ID="UpdatePanel1"
runat="server" UpdateMode="Conditional">
<ContentTemplate>
Latest Time by refresh <%= DateTime.Now.ToLongTimeString() %>.
<br /><asp:Button Text="Refresh Time" ID="Button1"
runat="server"/>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
Here is the output window:
If you try this example in your Development environment and run it then you can find the second date display is updated after each press of the button, because it's within the update panel. But the first label is (First Time display) as it is. OK, you are saying , "this is a very simple example and it's not at all useful in project development". Then I will show you something more useful than this. Let's make a little database operation by AJAX technique.
Fetch Data from Database using AJAX
Here I would like to show how to fetch data from a database and display it within a Grid using AJAX. The basic concept or implementation is the same. I will keep a few controls within the Update Panel and that's all.
Here is my aspx page:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DropDownList ID="DDLAjax" runat="server" Height="16px" Width="117px">
</asp:DropDownList>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Show"
Width="95px" />
<br />
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
If you observe the content of my aspx page then you will discover that I have kept one drop down list, one button and one GridView within the UpdatePanel. And our hero (read ScriptManager) is just in the previous line of update panel. Now it's time to observe C# code for the same aspx page.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
namespace YahooProject
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
this.DDLAjax.Items.Add("first");
this.DDLAjax.Items.Add("second");
}
}
protected void Button1_Click(object sender, EventArgs e)
{
SqlConnection con = new SqlConnection();
con.ConnectionString = "Data Source=SERVERNAME;Initial atalog=DATABALENAME;Integrated Security=True";
con.Open();
SqlCommand cmd = null;
if (this.DDLAjax.SelectedItem.Text == "first")
{
cmd = new SqlCommand("select * from first",con);
}
if (this.DDLAjax.SelectedItem.Text == "second")
{
cmd = new SqlCommand("select * from second", con);
}
this.GridView1.DataSource = cmd.ExecuteReader();
this.GridView1.DataBind();
}
}
}
Hey; no rocket science here. The user will choose the table name by selecting it from the drop down list and after clicking the button the data from the relevant table will be fetched and bound with the Grid View. And we need to keep in mind only the component within the update panel (here GridView basically) will be updated.
OK, I hope you got the basic idea of UpdatePanel to implement AJAX. May be you try this out and in case of any further or advanced issues on the concept you can get back to us . Taaskk will be there to sort out the issue.
No comments:
Post a Comment