In the previous article, we have discussed How to get data from database using JQuery Ajax in asp net MVC, In This article, we will discuss how to create MVC Cascading Dropdown using JQuery AJAX i.e we will cascade one dropdown list with another dropdown list in ASP.Net MVC using JQuery AJAX. In this article, we will take 3 dropdown lists, Organization, Employees, and Employee_address.
We will see how to fill the Employees dropdown list based on the data of the Organization dropdown list and then the Employee_address dropdown list based on the selected Employees.
Step 1: Create Database Table
Let’s create the database table for our task, for cascading dropdownlist in asp.net MVC using jquery ajax. I have created 3 tables called “Organization” with column Id, Name. “Employees” with [Id],[Name] ,[Salary],[OrganizationId] and Employee_address with column [Id],[Address],[City],[ZipCode],[EmployeeId].
You can find the SQL Script of the table below.
/****** Object: Table [dbo].[Employee_address] Script Date: 2/11/2022 2:51:52 PM ******/
CREATE TABLE [dbo].[Employee_address](
[Id] [int] IDENTITY(1,1) NOT NULL,
[Address] [nvarchar](50) NULL,
[City] [nvarchar](50) NULL,
[ZipCode] [int] NULL,
[EmployeeId] [int] NULL,
CONSTRAINT [PK_Departments] PRIMARY KEY CLUSTERED
(
[Id] ASC
))
/****** Object: Table [dbo].[Employees] Script Date: 2/11/2022 2:51:52 PM ******/
CREATE TABLE [dbo].[Employees](
[Id] [int] IDENTITY(1,1) NOT NULL,
[Name] [nvarchar](50) NULL,
[Salary] [float] NULL,
[OrganizationId] [int] NULL,
CONSTRAINT [PK_Employees] PRIMARY KEY CLUSTERED
(
[Id] ASC
) ON [PRIMARY])
/****** Object: Table [dbo].[Organization] Script Date: 2/11/2022 2:51:52 PM ******/
CREATE TABLE [dbo].[Organization](
[Id] [int] IDENTITY(1,1) NOT NULL,
[CompanyName] [nvarchar](50) NULL,
CONSTRAINT [PK_Organization] PRIMARY KEY CLUSTERED
(
[Id] ASC
))
GO
SET IDENTITY_INSERT [dbo].[Employee_address] ON
GO
INSERT [dbo].[Employee_address] ([Id], [Address], [City], [ZipCode], [EmployeeId]) VALUES (1, '3899 Grey Fox Farm Road', 'Houston', 20120, 1)
GO
INSERT [dbo].[Employee_address] ([Id], [Address], [City], [ZipCode], [EmployeeId]) VALUES (2, '4790 Happy Hollow Road', 'Wilmington', 28405, 2)
GO
INSERT [dbo].[Employee_address] ([Id], [Address], [City], [ZipCode], [EmployeeId]) VALUES (3, '742 Arbutus Drive', 'Miami', 33145, 3)
GO
INSERT [dbo].[Employee_address] ([Id], [Address], [City], [ZipCode], [EmployeeId]) VALUES (4, '1852 Willow Greene Drive', 'Montgomery', 5522, 4)
GO
INSERT [dbo].[Employee_address] ([Id], [Address], [City], [ZipCode], [EmployeeId]) VALUES (5, '7742 Arbutus Drive', 'Miami', 33145, 5)
GO
INSERT [dbo].[Employee_address] ([Id], [Address], [City], [ZipCode], [EmployeeId]) VALUES (6, '742 Drive', 'Miami', 33145, 6)
GO
SET IDENTITY_INSERT [dbo].[Employee_address] OFF
GO
SET IDENTITY_INSERT [dbo].[Employees] ON
GO
INSERT [dbo].[Employees] ([Id], [Name], [Salary], [OrganizationId]) VALUES (1, 'Mark', 6000, 1)
GO
INSERT [dbo].[Employees] ([Id], [Name], [Salary], [OrganizationId]) VALUES (2, 'Henry', 3000, 1)
GO
INSERT [dbo].[Employees] ([Id], [Name], [Salary], [OrganizationId]) VALUES (3, 'Thomas', 4000, 2)
GO
INSERT [dbo].[Employees] ([Id], [Name], [Salary], [OrganizationId]) VALUES (4, 'Jack', 6000, 2)
GO
INSERT [dbo].[Employees] ([Id], [Name], [Salary], [OrganizationId]) VALUES (5, 'Tim', 5000, 3)
GO
INSERT [dbo].[Employees] ([Id], [Name], [Salary], [OrganizationId]) VALUES (6, 'Luis', 4000, 3)
GO
INSERT [dbo].[Employees] ([Id], [Name], [Salary], [OrganizationId]) VALUES (7, 'Southy', 6000, 3)
GO
SET IDENTITY_INSERT [dbo].[Employees] OFF
GO
SET IDENTITY_INSERT [dbo].[Organization] ON
GO
INSERT [dbo].[Organization] ([Id], [CompanyName]) VALUES (1, 'Microsoft')
GO
INSERT [dbo].[Organization] ([Id], [CompanyName]) VALUES (2, 'Google')
GO
INSERT [dbo].[Organization] ([Id], [CompanyName]) VALUES (3, 'Apple')
GO
SET IDENTITY_INSERT [dbo].[Organization] OFF
GO
ALTER TABLE [dbo].[Employee_address] WITH CHECK ADD CONSTRAINT [FK_Departments_Employees] FOREIGN KEY([EmployeeId])
REFERENCES [dbo].[Employees] ([Id])
GO
ALTER TABLE [dbo].[Employee_address] CHECK CONSTRAINT [FK_Departments_Employees]
GO
ALTER TABLE [dbo].[Employees] WITH CHECK ADD CONSTRAINT [FK_Employees_Organization] FOREIGN KEY([OrganizationId])
REFERENCES [dbo].[Organization] ([Id])
GO
ALTER TABLE [dbo].[Employees] CHECK CONSTRAINT [FK_Employees_Organization]
GO
Step 2 :Open your VS19 or VS22, create an empty MVC website if don’t know how to create an empty project then please read below basic crud operation article.
Step 3 : we are using Entity Framework for Cascading dropdown
In Model Folder, right-click then select Add New Item -> Data option on the left side menu. select ADO .net entity framework.
and follow the below step.
Step 4: Adding HomeController in our project
Now let’s add a Homecontroller in our project for showing the list, Right-click on the Controller folder in the project =>add an empty controller.
Now open Homecontroller.cs and let’s write the code in our controller, and add the following action methods. Here, I am going to add one action method to our controller which returns all Index view.
Homecontroller.cs
using Cascading.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace Cascading.Controllers
{
public class HomeController : Controller
{
DemoDatabaseEntities context = new DemoDatabaseEntities();
// GET: Home
public ActionResult Index()
{
var Organizations = context.Organizations.ToList();
return View(Organizations);
}
//retrun all employee by OrganizationsId
[HttpPost]
public JsonResult GetEmployeedByOrganizationIdId(int OrganizationId)
{
var Employees = (from r in context.Employees
where r.OrganizationId == OrganizationId
select new
{
r.Id,
r.Name
}).ToList();
return Json(Employees, JsonRequestBehavior.AllowGet);
}
//return all employee address because a employee can have multiple address
[HttpPost]
public JsonResult GetEmployeeAddressBydId(int EmployeeId)
{
var EmployeesAddress = (from r in context.Employee_address
where r.EmployeeId == EmployeeId
select new
{
r.Id,
r.Address
}).ToList();
return Json(EmployeesAddress, JsonRequestBehavior.AllowGet);
}
}
}
Step 5: Create copy paste the below code in Index.cshtml view
@model IEnumerable<Cascading.Models.Organization>
@{
ViewBag.Title = "Index";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<h2>Cascading Dropdownlist Example</h2>
<div>
<label>Organizations</label>
<select id="ddlOrganization" onchange="LoadEmployees()">
<option>Select Organization</option>
@if (Model != null && Model.Count() > 0)
{
foreach (var item in Model)
{
<option value="@item.Id">@item.CompanyName</option>
}
}
</select>
<br />
<br />
<label>Employees</label>
<select id="ddlEmployees" onchange="LoadEmployeesAddress()">
</select>
<br />
<br />
<label>Employees Address</label>
<select id="ddlAddress">
</select>
</div>
<script type="text/javascript">
function LoadEmployees()
{
var OrzanId = $("#ddlOrganization").val();
if (OrzanId) {
$.ajax({
type: "POST",
url: "/Home/GetEmployeedByOrganizationIdId",
data: { OrganizationId: OrzanId},
success: function (empdata) {
var ddlEmployees = $("#ddlEmployees");
ddlEmployees.empty()
$("#ddlAddress").empty();
if (empdata) {
ddlEmployees.append($('<option/>', {
value: 0,
text: "Select a employees"
}));
$.each(empdata, function (index, empData) {
ddlEmployees.append($('<option/>', {
value: empData.Id,
text: empData.Name
}));
});
}
}
,
error: function (ex) {
alert(ex);
}
});
}
}
function LoadEmployeesAddress() {
var EmployeesId = $("#ddlEmployees").val();
if (EmployeesId) {
$.ajax({
type: "POST",
url: "/Home/GetEmployeeAddressBydId",
data: { EmployeeId: EmployeesId },
success: function (empaddressdata) {
var ddlAddress = $("#ddlAddress");
ddlAddress.empty()
if (empaddressdata) {
$.each(empaddressdata, function (index, empaddData) {
ddlAddress.append($('<option/>', {
value: empaddData.Id,
text: empaddData.Address
}));
});
}
}
,
error: function (ex) {
alert(ex);
}
});
}
}
</script>
Step:6 Build Run Project
The post [Simple Way]-Cascading DropDownList in Asp.Net Mvc Using Jquery Ajax appeared first on Software Development | Programming Tutorials.
Read More Articles
- Write a value which contain comma to a CSV file in c#?
- Reading CSV File with cells containing commas c#
- Split CSV with columns may contain ‘,’ Comma C#
- [Simple Way]-Cascading DropDownList in Asp.Net Mvc Using Jquery Ajax
- [Simple Way]-How to get data from database using JQuery Ajax in asp net MVC
- [Simple Way]-ASP.NET Core Upload Multiple File Web API model
- [Simple Way]- Image Upload in .NET Core Web API
- [Easy Way]-Receive File and other form data together in ASP.NET Core Web API
- Replace image in word document using C#
- How to add new rows to an existing word document table in C#
- Simple Way Find and replace text in Word document using C#
- Implementing “Remember Me” Feature in ASP.NET MVC
- [Solved]-Cookie loses value when page is changed in MVC
- How to post File Upload and other form fields to one action Asp .Net MVC C#
- How To Post File and Data to API using HttpClient C#
- Create ASP.NET Core Web API Without Entity Framework
- .NET Core Web API Using Code First Entity Framework Approach
- Create Asp.Net Core Web Api Using Entity Framework Database First
- Registration form with image upload in MVC using jquery Ajax
- How to make an Inline editable table in MVC using jquery?
- CRUD operation using partial view in MVC with modal popup
- Insert Update Delete Using Jquery Ajax and Modal Popup in Mvc
- Crud Operations in MVC Without Entity Framework
- Create Login,Signout and Registration in Asp .Net Mvc Using Entity
- Export Gridview to Excel and Csv in Asp .Net With Formatting Using c#
- How to Display Binary Image in Gridview from Database in Asp .Net c#
- [Solved]-How to Upload pdf file using jquery MVC?
- [Solved]-Uploading both data and files in FormData using Ajax MVC
- C# -Saving a base64 string as an image into a folder on server in Web Api
- [Solved]-Download pdf file from link and save in local file folder in Asp .Net
- [Solved]-Delete Files older than X Months,Days,Minute in a Directory- C# .NET
- [Solved]-LEFT OUTER JOIN in LINQ With Where clause in C#
- INNER JOIN,RIGHT JOIN,LEFT JOIN USING LINQ IN Multiple Table C#
- [Solved]-Convert Base64 To Image And Save in folder and Display it- C#
- [Solved]-How to Overlay Two Images in .NET-C#
- How to Create Multilingual Website in Asp .Net
- C# – How to add double quotes to a string that is inside a variable
- Update an Image with Upload Button For Each Row in Gridview-Asp .Net
- How to Bind Data in DataList Control in Asp.Net – C#
- Upload and Display an Image in Gridview From Image Path in Database -C#