ASP.NET Issues: AJAX

Showing posts with label AJAX. Show all posts

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

January 28, 2011

AJAX with DATABASE

Use AJAX to Fetch the Data From Database in AJAX Way (Without Post Back)

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 in

Asynchronous way (AJAX) Below is the code

EXAJAXDATABASE.aspx

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

function showStudent(str)

{

alert(str);

var xmlhttp;

if (str=="")

{

document.getElementById("txtHint").innerHTML="";

return;

}

if (window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}

else

{// code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

document.getElementById("txtHint").innerHTML=xmlhttp.responseText;

}

xmlhttp.open("GET","EXAJAXSERVER_DB.aspx?q="+str,true);

xmlhttp.send();

}

</script>

</head>

<body>

<asp:DropDownList ID="ddlStudent" runat="server" onChange="showStudent(this.value)">

</asp:DropDownList>

</form>

<br />

<div id="txtHint">Studnet info will be listed here...</div>

</body>

</html>

EXAJAXDATABASE .aspx.cs
//Contain Code to Fill the Student DropDown List

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 EXAJAXDATABASE : System.Web.UI.Page
{
   SqlConnection connObj = new SqlConnection();
   DataSet ds;
   SqlCommand objCommand;
   SqlDataAdapter objAdapter;
   protected void Page_Load(object sender, EventArgs e)
   {
   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();

   }
}

//Server Side code to fetch the data based on Student Selection from Dropdown

EXAJAXSERVER_DB .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 EXAJAXSERVER_DB : System.Web.UI.Page

{

SqlConnection connObj = new SqlConnection();

DataSet ds;

SqlCommand objCommand;

SqlDataAdapter objAdapter;

protected void Page_Load(object sender, EventArgs e)

{

int id= int.Parse (Request.QueryString["q"].ToString ());

connObj.ConnectionString = ConfigurationManager.ConnectionStrings["DotNetTrainingConnectionString"].ToString();

connObj.Open();

ds = new DataSet();

objCommand = new SqlCommand("Select * from student where Student_id=" + id, connObj);

objAdapter = new SqlDataAdapter(objCommand);

objAdapter.Fill(ds);

connObj.Close();

Response .Write ("<table>");

for(int i=0;i<ds.Tables [0].Columns .Count ;i++)

{

Response.Write("<tr><td><b>" + ds.Tables[0].Rows[0][i].ToString () +"</b></td>");

//Response.Write("<td>" & x.value & "</td></tr>");

}

Response .Write("</table>");

}

Below is the DotNetTrainingConnectionString Defined in the web.config

Below will be the output based on diff Selection

ASP.NET Issues

Pages

January 30, 2011

AJAX in ASP.NET using UpdatePanel/ScriptManager

January 28, 2011

AJAX with DATABASE

Translate

Search This Blog

Total Pageviews

Contact Me

Popular Posts