csharp

Cascading DropDown List in ASP.Net Using Entity Framework

In this article, we learn how to perform Cascading DropDown List in ASP.Net Using Entity Framework. Here I have taken two dropdown list one for Country and another for State. Here we will see How to select State data based on the Country selection. So let’s Start.

In this blog, you will easily learn step by step how to work with a cascading dropdown list for country/state in ASP.Net using Entity Framework.

Create two table Country and State.
[php]
Step 1. Open SQL Server

Step 2. Create a database and use this database
create database CascadingDemoCountryState
use CascadingDemoCountryState //CascadingDemoCountryStateis the database name
[/php]

Step 3. Create two table like Country and State and create a stored procedure

[php]

create table tblCountry(
CountryId int primary key identity(1,1),
CountryName varchar(40)
)

/*Create State Table*/

create table tblState(
StateId int primary key identity(1,1),
StateName varchar(40),
CountryId int
)

[/php]

Step 4. Insert data into Country and State Table

[php]

/*Insert data into Country Table*/
insert into tblCountry(CountryName) values(‘India’),(‘America’),(‘Pakistan’)
[/php]

[php]
/*Insert data into State Table*/
insert into tblState(StateName,CountryId)values(‘UP’,1)
insert into tblState(StateName,CountryId)values(‘Bihar’,1)
insert into tblState(StateName,CountryId)values(‘Gujrat’,2)
insert into tblState(StateName,CountryId)values(‘New Mexico’,2)
insert into tblState(StateName,CountryId)values(‘New York’,2)
insert into tblState(StateName,CountryId)values(‘Pakistan’,3)
insert into tblState(StateName,CountryId)values(‘Karachi’,3)
insert into tblState(StateName,CountryId)values(‘Lahore’,3)

[/php]

Step 5. Create stored procedure for getting the data from country and state table.sp_tblCountry_get and sp_tblState procedure Name

[php]

create proc sp_tblCountry_get
as
begin
select * from tblCountry
end
<strong>//based on country selection tblState data is populated.</strong>

create proc sp_tblState
@CountryId int
as
begin
Select * from tblState where CountryId=@CountryId
end
[/php]

Step 6. Open Visual Studio select File open new Project. Then Select Web and click on Asp. net Empty website. Write the Name of the application of my application name “CascadindDemoCountryState”.

Step 7.After that right click on your project–>Select “ADD”–>select “New Item”–>Select “Web Form” and write the name of the form like “Default.aspx”

“Default.aspx” page write this code.First drag and drop two dropdown list.

Important Point: It is mandatory to OnSelectedIndexChanged Event is generated of Country Dropdownlist and AutoPostBack is true.

[php]
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="CascadindDemoCountryState.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>Country:</td>

<td><asp:DropDownList ID="ddlcountry" runat="server" OnSelectedIndexChanged="ddlcountry_SelectedIndexChanged" AutoPostBack="true"></asp:DropDownList></td>
</tr>
<tr>
<td>State:</td>

<td><asp:DropDownList ID="ddlState" runat="server"></asp:DropDownList></td>
</tr>
</table>
</div>
</form>
</body>
</html>

[/php]

After that Creating an entity data Model.
Screenshot describe the step to connect it to the Database using Entity Framework. Follow this step

“Right Click Your Project”–>”Add”–>”New Item”.

“select Data from left template”–>”ADO.Net Entity Data Model” –>write the name of Model extension is “.edmx”–>click “Add” button

After that Choose Model Content “Generate From Database” and click on “Next” button.

Next step is click on “New Connection” button.

Click on New Connection button “Connection Properties” windows is open. After that write your server name and select your database name after that click ok button.

Include table and stored procedure in your Model and click on finish button.

Following is the Entity Data model of the two table.

Finally open your “Default.aspx.cs” page and write this Code.
[php]
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace CascadindDemoCountryState
{
public partial class Default : System.Web.UI.Page
{
//create object of CascadingDemoCountryStateEntities
CascadingDemoCountryStateEntities cascadindDemoCountryState = new CascadingDemoCountryStateEntities();

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
PopulateCountry();
ddlState.Enabled = false;
ddlState.Items.Insert(0, new ListItem("–Select–", "0"));

}
}
//create method for populate country data.
//sp_tblCountry_get is used here like method
public void PopulateCountry()
{
var data= cascadindDemoCountryState.sp_tblCountry_get().ToList();
if (data.Count > 0)
{
ddlcountry.DataValueField = "CountryId";
ddlcountry.DataTextField = "CountryName";
ddlcountry.DataSource = data;
ddlcountry.DataBind();
ddlcountry.Items.Insert(0,new ListItem("–Select Country–","0"));
}
}
//create method for populate State data.
//this method is call on country onSelectIndexChanged Event
//sp_tblState is used like method and pass as parameter selected value of country.
public void PopulateState()
{
var data = cascadindDemoCountryState.sp_tblState(Convert.ToInt32(ddlcountry.SelectedValue)).ToList();
if (data.Count > 0)
{
ddlState.DataValueField = "StateId";
ddlState.DataTextField = "StateName";
ddlState.DataSource = data;
ddlState.DataBind();
}
}

protected void ddlcountry_SelectedIndexChanged(object sender, EventArgs e)
{
ddlState.Enabled = true;
PopulateState();
}
}
}

[/php]
Screenshot describe the output.

Any Suggestion and question-related to this article Cascading DropDown List in ASP.Net Using Entity Framework please comment.

3 thoughts on “Cascading DropDown List in ASP.Net Using Entity Framework

Leave a Reply

Your email address will not be published.