ASP.NET Ajax Database Programming
Ajax revolutionizes the way web pages are updated by introducing the concept of Partial-page rendering. This technique eliminates the need for traditional full postbacks, which involve refreshing the entire web page, and instead focuses on updating only the necessary portion of the page.
Ajax Database Programming
In the following ASP.NET program, we showcase the process of connecting a database within an ASP.NET Ajax application. Within the program, a DropDownList and a GridView are positioned within the UpdatePanel control area. As you select different items from the DropDownList, you will observe that the GridView updates dynamically without requiring a full postback to the server. This seamless update enhances the user experience by eliminating unnecessary page refreshes and reducing network traffic.
Moreover, the program includes Label controls that display the page load time and the time at which the data was last updated. These Label controls provide valuable information to the user, allowing them to track the timing of updates and ensuring data accuracy.
Default.aspx
<!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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server" >
<div>
<br />
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
<br /><br />
</div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true"
onselectedindexchanged="DropDownList1_SelectedIndexChanged">
</asp:DropDownList>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Load Combo" />
<br />
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>
<br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
Partial-page rendering
Through Ajax and Partial-page rendering, users are offered faceted interfaces that are partly replenished frequently, so they work in real-time. This procedure will help reduce network load, latency and also ensure an interactive activity that is more effective and better in performance.
Full Source | C#
using System;
using System.Data;
using System.Data.SqlClient;
public partial class _Default : System.Web.UI.Page
{
SqlConnection cnn;
string sql = "";
string connetionString = null;
protected void Page_Load(object sender, EventArgs e)
{
connetionString = "Data Source=SERVERNAME;Initial Catalog=pubs;User ID=sa;Password=YOURPASSWORD";
cnn = new SqlConnection(connetionString);
Label2.Text = "Page loaded time : " + DateTime.Now.ToString();
}
protected void Button1_Click(object sender, EventArgs e)
{
loadCombo();
}
public void loadCombo()
{
try
{
cnn.Open();
sql = "select pub_id,pub_name from publishers";
SqlDataAdapter adapter = new SqlDataAdapter();
SqlCommand sqlCmd;
DataSet ds = new DataSet();
sqlCmd = new SqlCommand(sql, cnn);
adapter.SelectCommand = sqlCmd;
adapter.Fill(ds);
cnn.Close();
DropDownList1.DataTextField = "pub_name";
DropDownList1.DataValueField = "pub_id";
DropDownList1.DataSource = ds.Tables[0];
DropDownList1.DataBind();
}
catch (Exception ex)
{
Label1.Text = "Can not open connection ! " + ex.ToString();
}
}
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
string pubid = DropDownList1.SelectedValue;
sql = "select title,type,pubdate from titles where pub_id='" + pubid + "'";
cnn.Open();
SqlDataAdapter adapter = new SqlDataAdapter();
SqlCommand sqlCmd;
DataSet ds = new DataSet();
sqlCmd = new SqlCommand(sql, cnn);
adapter.SelectCommand = sqlCmd;
adapter.Fill(ds);
cnn.Close();
//Label1.Text = ds.Tables[0].Rows.Count.ToString();
GridView1.DataSource = ds.Tables[0];
GridView1.DataBind();
Label1.Text = "Last updated time : " + DateTime.Now.ToString();
}
}
Full Source | VB.NET
Imports System.Data
Imports System.Data.SqlClient
Partial Class _Default
Inherits System.Web.UI.Page
Dim cnn As SqlConnection
Dim sql As String = ""
Dim connetionString As String = Nothing
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
connetionString = "Data Source=SERVER-NAME;Initial Catalog=pubs;User ID=sa;Password=PASSWORD"
cnn = New SqlConnection(connetionString)
Label2.Text = "Page loaded time : " + DateTime.Now.ToString()
End Sub
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
loadCombo()
End Sub
Public Sub loadCombo()
Try
cnn.Open()
sql = "select pub_id,pub_name from publishers"
Dim adapter As New SqlDataAdapter()
Dim sqlCmd As SqlCommand
Dim ds As New DataSet()
sqlCmd = New SqlCommand(sql, cnn)
adapter.SelectCommand = sqlCmd
adapter.Fill(ds)
cnn.Close()
DropDownList1.DataTextField = "pub_name"
DropDownList1.DataValueField = "pub_id"
DropDownList1.DataSource = ds.Tables(0)
DropDownList1.DataBind()
Catch ex As Exception
Label1.Text = "Can not open connection ! " + ex.ToString()
End Try
End Sub
Protected Sub DropDownList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles DropDownList1.SelectedIndexChanged
Dim pubid As String = DropDownList1.SelectedValue
sql = "select title,type,pubdate from titles where pub_id='" + pubid + "'"
cnn.Open()
Dim adapter As New SqlDataAdapter()
Dim sqlCmd As SqlCommand
Dim ds As New DataSet()
sqlCmd = New SqlCommand(sql, cnn)
adapter.SelectCommand = sqlCmd
adapter.Fill(ds)
cnn.Close()
'Label1.Text = ds.Tables[0].Rows.Count.ToString();
GridView1.DataSource = ds.Tables(0)
GridView1.DataBind()
Label1.Text = "Last updated time : " + DateTime.Now.ToString()
End Sub
End Class
Conclusion
Ajax introduces Partial-page rendering as an innovative technique for updating web pages. The provided ASP.NET program exemplifies the application of this concept by connecting a database and dynamically updating a GridView within an UpdatePanel control. The inclusion of Label controls further enhances the user experience by displaying important timing information. Ajax empowers developers to create highly interactive and responsive web applications that deliver efficient updates to specific page sections, improving overall performance and user satisfaction.