January 30, 2011

AJAX in ASP.NET using UpdatePanel/ScriptManager


Fetch Data From Database in AJAX Way (Without Post Back)Using AJAX Extensions in ASP.NET

I have a student table in DB with columns Student_id,FirstName,LastName
On form I have a Student DropdownList and Displaytext is Firstname
On page load I am fetching this data from Database
When There is change in student selection ,It should get the Corresponding Record From DB and Display  in GridView in Asynchronous way (AJAX)

 Below is the code
AJAXAssignment2.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AJAXAssignment2.aspx.cs" Inherits="AJAXAssignment2" %>

<!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>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
    
    </div>
      <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="ddlStudent"  />
        </Triggers>
        <ContentTemplate >
          
            <asp:GridView ID="gvStudent" runat="server">
            </asp:GridView>
        </ContentTemplate>
           
        </asp:UpdatePanel>
         <asp:DropDownList id="ddlStudent" AutoPostBack=true  runat="server"  OnSelectedIndexChanged="ddlStudent_SelectedIndexChanged" >
            </asp:DropDownList>
    </form>
</body>
</html>



AJAXAssignment2.aspx.cs

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;

public partial class AJAXAssignment2 : System.Web.UI.Page
{
      SqlConnection connObj = new SqlConnection();
        DataSet ds;
        SqlCommand objCommand;
        SqlDataAdapter objAdapter;
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {

            connObj.ConnectionString = ConfigurationManager.ConnectionStrings["DotNetTrainingConnectionString"].ToString();
            connObj.Open();
            ds = new DataSet();
            objCommand = new SqlCommand("Select * from student", connObj);
            objAdapter = new SqlDataAdapter(objCommand);
            objAdapter.Fill(ds);
            connObj.Close();

            ddlStudent.DataSource = ds.Tables[0];
            ddlStudent.DataTextField = "FirstName";
            ddlStudent.DataValueField = "Student_ID";
            ddlStudent.DataBind();
        }
    }
    protected void ddlStudent_SelectedIndexChanged(object sender, EventArgs e)
    {



        connObj.ConnectionString = ConfigurationManager.ConnectionStrings["DotNetTrainingConnectionString"].ToString();
        connObj.Open();
        ds = new DataSet();
        objCommand = new SqlCommand("Select * from student where Student_id=" + ddlStudent.SelectedValue, connObj);
        objAdapter = new SqlDataAdapter(objCommand);
        objAdapter.Fill(ds);
        connObj.Close();
       
        gvStudent.DataSource = ds.Tables[0];
        gvStudent.DataBind();
    }
}



Below is the DotNetTrainingConnectionString Defined in the web.config



 <connectionStrings>
    <add name="DotNetTrainingConnectionString" connectionString="Data Source=tanvi\sqlexpress;Initial Catalog=DotNetTraining;Integrated Security=True" providerName="System.Data.SqlClient"/>
  </connectionStrings>


Below is my output based on Different Selections



No comments:

Post a Comment