Introduction:
Managing and displaying specific data in an ASP.NET GridView often involves complex SQL queries. However, in this article, we explore a simplified approach to filter GridView data based on dropdown selections without the need for intricate SQL queries. The provided code and explanations will guide you through the process of binding XML data to dropdowns, dynamically updating dropdown options, and efficiently filtering GridView content.
HTML Markup: Design Page:
The article kicks off by presenting a scenario where filtering records from SQL Server to GridView is typically accomplished through SQL queries. The author introduces a more straightforward method by binding XML data to dropdowns and utilizing selected values to filter GridView data dynamically. Three dropdowns are presented: one for states, another for cities, and the last for blood groups. These dropdowns facilitate the process of selecting specific records without the need for SQL queries.
How to Bind XML File Data into the First DropDownList:
The first section dives into the process of binding XML file data to the initial dropdown, which represents states. The author emphasizes the need for dropdown controls and a GridView in the design page. The accompanying C# code illustrates how to populate the state dropdown from an XML file, providing users with a seamless selection process.
HTML Markup: Design Page:
The HTML markup demonstrates the necessary design elements for achieving the desired functionality. Clear instructions on adding dropdown controls, setting their properties, and incorporating an UpdatePanel for smooth interaction are provided. The code emphasizes the importance of maintaining proper IDs and event handling for the dropdowns.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" 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></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<table>
<tr>
<td>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<table>
<tr>
<td>
<asp:DropDownList ID="ddl_state" runat="server" AutoPostBack="True"
onselectedindexchanged="ddl_state_SelectedIndexChanged">
</asp:DropDownList>
</td>
<td>
<asp:DropDownList ID="ddl_city" runat="server">
</asp:DropDownList>
</td>
</tr>
</table>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddl_state" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
</td>
<td>
<asp:DropDownList ID="ddl_bloodgroup" CssClass="ddl" runat="server">
<asp:ListItem Text="Blood Group" Value="0"></asp:ListItem>
<asp:ListItem Text="A+ " Value="1"></asp:ListItem>
<asp:ListItem Text="A- " Value="2"></asp:ListItem>
<asp:ListItem Text="B+ " Value="3"></asp:ListItem>
<asp:ListItem Text="B- " Value="4"></asp:ListItem>
<asp:ListItem Text="AB+" Value="5"></asp:ListItem>
<asp:ListItem Text="AB-" Value="6"></asp:ListItem>
<asp:ListItem Text="O+ " Value="7"></asp:ListItem>
<asp:ListItem Text="O- " Value="8"></asp:ListItem>
</asp:DropDownList>
</td>
<td>
<asp:Button ID="btn_filter" runat="server" Width="100px" Text="Filter"
onclick="btn_filter_Click" />
</td>
</tr>
</table>
</div>
<br /><br />
<asp:GridView ID="GridView1" runat="server" BackColor="#DEBA84"
BorderColor="#DEBA84" BorderStyle="None" BorderWidth="1px" CellPadding="3"
CellSpacing="2">
<FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />
<HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />
<PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" />
<RowStyle BackColor="#FFF7E7" ForeColor="#8C4510" />
<SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#FFF1D4" />
<SortedAscendingHeaderStyle BackColor="#B95C30" />
<SortedDescendingCellStyle BackColor="#F1E5CE" />
<SortedDescendingHeaderStyle BackColor="#93451F" />
</asp:GridView>
</form>
</body>
</html>
Bind Data From SQL Server to GridView:
The article proceeds with a critical function - binding data from SQL Server to the GridView. A private method, BindFillData(), is introduced to handle this task. The method efficiently connects to the SQL Server, retrieves data through a SELECT query, and binds it to the GridView. The use of ViewState ensures data persistence across postbacks, enhancing the overall user experience.
private void BindFillData()
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["dbCon"].ToString());
SqlDataAdapter da=new SqlDataAdapter("Select * from donardetails", con);
DataSet ds = new DataSet();
da.Fill(ds);
if (ds.Tables[0].Rows.Count > 0)
{
ViewState["dd"] = ds.Tables[0];
GridView1.DataSource = ds;
GridView1.DataBind();
}
}
Bind XML Data into DropDownList State:
The next section focuses on creating a method, DisplayState(), responsible for reading XML file data and populating the state dropdown. The step-by-step code walkthrough highlights the simplicity of utilizing the ReadXml method to seamlessly integrate XML data into dropdown options. The resulting dropdown is now populated with state names, ready for user selection.
private void DisplayState()
{
DataSet ds = new DataSet();
ds.ReadXml(Server.MapPath("~/XML/State-City-Language.xml"));
if (ds.Tables[0].Rows.Count > 0)
{
ddl_state.DataSource = ds;
ddl_state.DataTextField = "Name";
ddl_state.DataBind();
ddl_state.Items.Insert(0, new ListItem(" Choose Your State ", "0"));
ddl_city.Items.Insert(0, new ListItem(" Choose Your City ", "0"));
ddl_city.Enabled = false;
ddl_state.SelectedIndex = 0;
ddl_city.SelectedIndex = 0;
}
}
Display DropDownList City Based on DropDownList State:
A crucial functionality in the filtering process is enabling the second dropdown (cities) based on the selected state. The ddl_state_SelectedIndexChanged event is employed to achieve this dynamic behavior. The code snippet demonstrates how the cities dropdown is updated based on the selected state, ensuring a responsive and user-friendly interface.
protected void ddl_state_SelectedIndexChanged(object sender, EventArgs e)
{
if (ddl_state.SelectedValue != "0")
{
ddl_city.Items.Clear();
DataSet dscity = new DataSet();
dscity.ReadXml(Server.MapPath("~/XML/State-City-Language.xml"));
if (dscity.Tables[0].Rows.Count > 0)
{
for (int i = 0; i < dscity.Tables[0].Rows.Count; i++)
{
if (ddl_state.SelectedItem.Text == dscity.Tables[0].Rows[i]["Name"].ToString())
{
string city = dscity.Tables[0].Rows[i]["City"].ToString();
ddl_city.Enabled = true;
ddl_city.Items.Insert(0, new ListItem(" Choose Your City ", "0"));
ddl_city.Items.Add(city);
break;
}
}
}
}
else
{
ddl_city.Items.Clear();
ddl_city.Items.Insert(0, new ListItem(" Choose Your City ", "0"));
ddl_city.Enabled = false;
}
}
C# Code: Filter Button Click:
The final piece of the puzzle involves handling the filter button click event. The btn_filter_Click event efficiently filters GridView data based on the selected state, city, and blood group. The code utilizes DataTables to manage data efficiently, providing users with a seamless experience when viewing filtered records.
protected void btn_filter_Click(object sender, EventArgs e)
{
string state = ddl_state.SelectedItem.Text.Trim();
string city = ddl_city.SelectedItem.Text.Trim();
string bloodgroup = ddl_bloodgroup.SelectedItem.Text.Trim(); ;
DataTable dt = (DataTable)ViewState["dd"];
if (dt.Rows.Count > 0)
{
DataTable dtfilter = new DataTable();
dtfilter.Columns.Add("ID");
dtfilter.Columns.Add("donarusername");
dtfilter.Columns.Add("donarfullname");
dtfilter.Columns.Add("donardob");
dtfilter.Columns.Add("donargender");
dtfilter.Columns.Add("donarstate");
dtfilter.Columns.Add("donarcity");
dtfilter.Columns.Add("donaremailid");
dtfilter.Columns.Add("donarphone");
dtfilter.Columns.Add("donarbloodgroup");
DataRow drfilter = null;
DataRow[] drw = dt.Select("donarstate='" + state + "' AND donarcity='" + city + "' AND donarbloodgroup='" + bloodgroup + "'");//
if (drw.Length > 0)
{
foreach (DataRow r in drw)
{
drfilter = dtfilter.NewRow();
drfilter["ID"] = r["ID"].ToString();
drfilter["donarusername"] = r["donarusername"].ToString();
drfilter["donarfullname"] = r["donarfullname"].ToString();
drfilter["donardob"] = r["donardob"].ToString();
drfilter["donargender"] = r["donargender"].ToString();
drfilter["donarstate"] = r["donarstate"].ToString();
drfilter["donarcity"] = r["donarcity"].ToString();
drfilter["donaremailid"] = r["donaremailid"].ToString();
drfilter["donarphone"] = r["donarphone"].ToString();
drfilter["donarbloodgroup"] = r["donarbloodgroup"].ToString();
dtfilter.Rows.Add(drfilter);
GridView1.DataSource = dtfilter;
GridView1.DataBind();
}
}
else
{
GridView1.EmptyDataText = " No Record Found....";
GridView1.DataBind();
}
}
}
Download the Source Code:
Conclusion:
In conclusion, this article presents a simplified approach to filter GridView data in ASP.NET without resorting to complex SQL queries. By leveraging XML data for dropdowns and incorporating responsive event handling, developers can enhance the user experience and streamline the process of displaying specific records. The provided code snippets and explanations empower developers to implement this efficient filtering mechanism in their ASP.NET projects. Simplify data management and enhance user interaction with this innovative approach.
0 Comments