Asp.Net – How to do a Partial PostBack using UpdatePanel and ScriptManager Controls?

February 14th, 2013
“Asynchronous Java and XML” also known as the “AJAX” has come a long way. It has always been very useful since the Classic ASP era. And it has definitely made web browsing very easy and thrilling.

Partial PostBack or Partial Page Rendering of a Web page can be done using Microsoft’s two Ajax controls. The “UpdatePanel” control and the “ScriptManager” control. These are server side controls and helps doing a PostBack without refreshing the entire web page. A “PostBack” is generally calling the server to execute a specific request, like getting data from a database table.

PostBack Using UpdatePanel

Start “Visual Studio” and create a “New Web Site”. In the “Design” click the “Toolbox” and look for “AJAX Extensions”. From the list of “Extensions”, drag and drop the “ScriptManager” control and the “UpdatePanel” control on the page.

<form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            ...
        </asp:UpdatePanel>
    </div>
</form>

We just need a “DropDownList” control for our demo. The drop down list will have a list of “Employee” names. Selecting a name from list will do a “PostBack” to the server and fetch more details about the employee.

Ref: Create the Employee Details table in your database.

Complete Source (Default.aspx)
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" 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>AutoPostBack using UpdatePanel</title>
    <style type="text/css">
        .ddl { font-family:Tahoma, Arial; font-size:12px; font-weight:normal; color:#000; height:20px; 
            margin-bottom:1px; border:solid 1px #CCC; border-radius:2px; -moz-border-radius:2px; 
            -webkit-border-radius:2px; padding:1px; width:120px}
	    #divDetails { float:right; position:absolute; left:150px; top:13px; background:#F7F7F9; 
	        border:solid 1px #D6DBE1; color:#333; padding:5px}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div style="font-family:Tahoma, Arial; font-size:12px; font-weight:normal">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" 
                            OnTextChanged="ShowEmpDetails" CssClass="ddl">
                            
                        <asp:ListItem></asp:ListItem>
                        <asp:ListItem>CHIN YEN</asp:ListItem>
                        <asp:ListItem>MIKE PEARL</asp:ListItem>
                        <asp:ListItem>GREEN FIELD</asp:ListItem>
                        <asp:ListItem>DEWANE PAUL</asp:ListItem>
                        <asp:ListItem>MATTS</asp:ListItem>
                        <asp:ListItem>PLANK OTO</asp:ListItem>
                    </asp:DropDownList>
                    <div id="divDetails" runat="server"></div>
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="DropDownList1" />
                </Triggers>
            </asp:UpdatePanel>
        </div>
    </form>
</body>
</html>
C#
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;
using System.Configuration;

public partial class _Default : System.Web.UI.Page 
{
    SqlConnection myConn = default(SqlConnection);
    SqlCommand sqComm = default(SqlCommand);

    protected void Page_Load(object sender, EventArgs e)
    {
        setConn();
    }

    // FETCH DATA FROM "EMPLOYEE DETAILS" TABLE.
    protected void ShowEmpDetails(object sender, EventArgs e)
    {
        string sQuery = "SELECT EmpID, Mobile, Email FROM EmployeeDetails WHERE EmpName = '" + 
            DropDownList1.Text + "'";
        SqlDataReader sdrEmp = GetDataReader(sQuery);
        try
        {
            if (sdrEmp.HasRows)
            {
                String sDetails = System.String.Empty;
                if (sdrEmp.Read()){
                    sDetails = "ID: " + sdrEmp["EmpID"] + "<br />";
                    sDetails = sDetails + "Name: " + DropDownList1.Text + "<br />";
                    sDetails = sDetails + "Mobile: " + sdrEmp["Mobile"] + "<br />";
                    sDetails = sDetails + "Email ID: " + sdrEmp["Email"];
                }
                divDetails.InnerHtml = sDetails;
            }
        }
        catch (Exception ex) { }
        finally
        {
            sdrEmp.Close();
            sdrEmp = null;
        }
    }

    private bool setConn()
    {
        // SET DATABASE CONNECTION.
        try
        {
            myConn = new SqlConnection(ConfigurationManager.ConnectionStrings["DNA_DB"].ConnectionString);
            myConn.Open();

            sqComm = new SqlCommand();
            sqComm.Connection = myConn;
        }
        catch (Exception ex) { return false; }
        return true;
    }

    private SqlDataReader GetDataReader(string sQuery)
    {
        SqlDataReader functionReturnValue = default(SqlDataReader);
        sqComm.CommandText = sQuery;
        sqComm.ExecuteNonQuery();
        functionReturnValue = sqComm.ExecuteReader();
        sqComm.Dispose();
        return functionReturnValue;
    }
}
VB.Net
Option Explicit On
Imports System.Data.SqlClient

Partial Class _Default
    Inherits System.Web.UI.Page

    Dim myConn As SqlConnection
    Dim sqComm As SqlCommand

    Protected Sub form1_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles form1.Load
        setConn()
    End Sub

    ' FETCH DATA FROM "EMPLOYEE DETAILS" TABLE.
    Protected Sub ShowEmpDetails(ByVal sender As Object, ByVal args As EventArgs)
        Dim sQuery As String = "SELECT EmpID, Mobile, Email FROM EmployeeDetails " & _
            "WHERE EmpName = '" & Trim(DropDownList1.Text) & "'"
        Dim sdrEmp As SqlDataReader = GetDataReader(sQuery)
        Try
            Dim sDetails As String = ""
            If sdrEmp.Read Then
                sDetails = "ID: " & sdrEmp.Item("EmpID") & "<br />"
                sDetails = sDetails & "Name: " & Trim(DropDownList1.Text) & "<br />"
                sDetails = sDetails & "Mobile: " & sdrEmp.Item("Mobile") & "<br />"
                sDetails = sDetails & "Email ID: " & sdrEmp.Item("Email")
            End If
            divDetails.InnerHtml = sDetails
        Catch ex As Exception
        Finally
            sdrEmp.Close() : sdrEmp = Nothing
        End Try
    End Sub

    Private Function setConn() As Boolean
        ' SET DATABASE CONNECTION.
        Try
            myConn = New SqlConnection("Data Source=DNA;Persist Security Info=False;" & _
                "Integrated Security=SSPI;
                "Initial Catalog=DNA_CLASSIFIED;User Id=sa;Password=;Connect Timeout=30;")

            myConn.Open()

            sqComm = New SqlCommand
            sqComm.Connection = myConn
        Catch ex As Exception
            Return False
        End Try
        Return True
    End Function

    Private Function GetDataReader(Optional ByVal sQuery As String = "") As SqlDataReader
        sqComm.CommandText = sQuery
        sqComm.ExecuteNonQuery()
        GetDataReader = sqComm.ExecuteReader
        sqComm.Dispose()
    End Function
End Class

Note: Add a connection string in the “Web.Config” file inside the “<configuration>” tag. The Web.Config file will automatically created when you create a “New Web Site” using the Visual Studio.

<connectionStrings>
    <add name="DNA_DB" connectionString="Data Source=DNA;Persist Security Info=False;
        Integrated Security=SSPI; Initial Catalog=DNA_CLASSIFIED;User Id=sa;Password=dna; Connect Timeout=30;"/>
</connectionStrings>
comments powered by Disqus

Join our Google Plus Community and be a part of a discussion!