Ajax Update Panel with Drop down list

Ajax Update Panel with Drop down list :

Use of select index change in drop down list (fill Second Drop down list when we change the value of first list)

Many time in the programming web/windows, we need to fill second dropdown list according to the first list .and want if first is change the second is automatically change.

Select index change in dropdown list.html

So for this we give another Example.

Here we need to change the name of class in first drop down then change Subject name in to second list According to the selected class in to first drop down.

How to bind dropdownlist

Know we explain how to use select index change Event use in to asp.net programming for binding to second drop down list.

Step 1: make a page as given in to the past post .then you have one drop down list which has class names.

Asp.net Programming

Step 2:

Take the Second drop down list for Subject .and double clicks on this drop down for make “Select Index Change” Event.

Step 3: Go to the Code page and write some code in to SelectedIndexChanged Event.

protected void ddlclassId_SelectedIndexChanged(object sender, EventArgs e)

{

if (ddlclassId.SelectedIndex != 0)

{

String SQL1 = "SELECT SubjectDetails.SubjectName, SubjectDetails.SubjectID, Assign_Subject_ClassWise.AssignSubjectID, SubjectDetails.IsElective FROM Assign_Subject_ClassWise INNER JOIN SubjectDetails ON Assign_Subject_ClassWise.SubjectID = SubjectDetails.SubjectID where ClassID = " + ddlclassId.SelectedValue + " Order By SubjectName";

DataSet ds = new DataSet();

ds = objCommom.RunSQLQuery(SQL1);

ddlsubjectid.DataSource = ds;

ddlsubjectid.DataTextField = "SubjectName";

ddlsubjectid.DataValueField = "SubjectID";

ddlsubjectid.DataBind();

ddlsubjectid.Items.Insert(0, new ListItem("Select", "0"));

}

else

{

ddlsubjectid.Items.Clear();

}

here we make SQL QUERY form Page and Execute this by class file .and fetch data form server data base. We use where close for giving some conditional query .

Step 3: if you need the use update panel for refers a particular part of page .

1. Registered to the Ajax in to the page .

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

2. Take up date panel .

<asp:UpdatePanel ID="Up1" runat="server">

<asp:AsyncPostBackTrigger ControlID="ddlclassId"EventName="SelectedIndexChanged" />

</Triggers>

//html code here ………………………make all things in this block.

</ContentTemplate>

</asp:UpdatePanel>

Step 4: for validation you can use some java script code .

function Validate() {

if (document.getElementById("<%=ddlclassId.ClientID%>").value == "0")

{

alert("Please Select Class.");

document.getElementById('<%=ddlclassId.ClientID%>').focus();

return false;

}

</script>

Full Code ………………………………………… code for

droupdownExample.aspx.

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

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

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

function Validate() {

if (document.getElementById("<%=ddlclassId.ClientID%>").value == "0")

{

alert("Please Select Class.");

document.getElementById('<%=ddlclassId.ClientID%>').focus();

return false;

}

</script>

</head>

<body>

<div>

<%-- here use update panel for using ajax tool for updateing a particular part of page --%>

<asp:UpdatePanel ID="Up1" runat="server">

<asp:AsyncPostBackTrigger ControlID="ddlclassId" EventName="SelectedIndexChanged" />

</Triggers>

<tr>

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

</td>

<td>

</td>

</td>

</tr>

<tr>

<strong>Class :</strong>  

</td>

<asp:DropDownList ID="ddlclassId" runat="server" Width="128px" AutoPostBack="True"

OnSelectedIndexChanged="ddlclassId_SelectedIndexChanged">

</asp:DropDownList>

</td>

</td>

</tr>

<tr>

<strong>Subject :</strong>

</td>

<td>

<asp:DropDownList ID="ddlsubjectid" runat="server" Width="128px"

</asp:DropDownList>

</td>

</td>

</tr>

</table>

</ContentTemplate>

</asp:UpdatePanel>

</div>

</form>

</body>

</html>

Code for drop down Example .aspx.cs:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

public partial class droupdownExample : System.Web.UI.Page

{

clsDefineClass objc1 = new clsDefineClass();

clsCommon objCommom = new clsCommon();

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

FillClass();

}

private void FillClass()

{

ddlclassId.DataSource = objc1.Select_Class();

ddlclassId.DataTextField = "Class";

ddlclassId.DataValueField = "ClassId";

ddlclassId.DataBind();

ddlclassId.Items.Insert(0, new ListItem("Select", "0"));

}

protected void ddlclassId_SelectedIndexChanged(object sender, EventArgs e)

{

if (ddlclassId.SelectedIndex != 0)

{

DataSet ds = new DataSet();

ds = objCommom.RunSQLQuery(SQL1);

ddlsubjectid.DataSource = ds;

ddlsubjectid.DataTextField = "SubjectName";

ddlsubjectid.DataValueField = "SubjectID";

ddlsubjectid.DataBind();

ddlsubjectid.Items.Insert(0, new ListItem("Select", "0"));

}

else

{

ddlsubjectid.Items.Clear();

}

Search This Blog

Tutorials Place