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#
- Select option from DropDown and automaticly set value in another TextField ASP .NET MVC
- Knockout + MVC disable html button and change color after ajax call
- Handling Like and Unlike of an entity in ASP.NET MVC using AJAX
- Dropdown of associated entities using MVC 5 and Entity framework
- Creating and using DropDown custom extension in asp.net mvc 3
- how to access unity container at application_beginrequest using asp.net mvc and unity?
- GridView on change of dropdown list selection
- Bind checkbox visibility to converted bool and another checkboxes visibility
- Danger of Using Fire and Forget in ASP.NET MVC
- How scalable is using .Contains for searching and auto-complete search in asp.net MVc web applications
- Operator '>' cannot be applied to operands of type 'string' and 'int' using Asp.net Mvc
- How to send nested json object to mvc controller using ajax
- MVC Shared Partial Views using different controllers and models
- Change label inner text that contains link using Ajax
- MVC 4 Modal window and AJAX
- Using a MessageBox in Visual Studio 2010 how can I display a message, a timer int and then another message?
- How to get dropdown list selected value in Label without using autopostback and update panel in asp.net
- ASP.NET MVC and NHibernate - using attributes instead of XML
- C# Create multiple .txt files using strings from another file and textbox
- Using a class and its features in another class in .NET Core Web API when using dependency injection
- How to add API authentication and authorization to an MVC Controller already using Identity?
- How to bind dropdownlist from database using c# and stored procedure
- Uploading and processing multiple files using MVC
- C#.NET: internal class accessible from another class using Type.GetType and Activator.CreateInstance?
- Auto-populating Select Boxes using jQuery & AJAX in asp.net MVC
- Can I toy around learning ASP.NET MVC using only VS 2010 Express and localhost on Windows 7?
- using Ninject with ASP.NET MVC and services layer
- Using Jquery and Ajax in ASP.NET
- Sending data through controller, in mvc pattern using ajax
- How to locate a text in a table and referring the element click on another element using Selenium in C#?
- Smallest and biggest value in slice of 3D array
- Private variables inside DelegatingHandler mixing values from other requests
- Autoproperty debugging
- Convert Word Document to XML and back ASP.Net
- Task.ContinueWith doesn't work after previous Task completed
- DotNetZip (Ionic.Zip.dll) doesn't work with compress Chinese File or Folder name
- Breeze suitability in a SPA Architecture Questions
- Set Number format in excel using interop
- C# Razor Page Dynamically Create Divs with Attributes
- Handling values which are not part of the enumeration with datacontract serialization C#
- Unity quaternion, leaving the x and z rotations as they are
- how do I display a 2 dimensional datagrid
- Retrieving and changing value in a multidimensional List
- Challenging Regex with Matching Brackets
- Passing null to an optional parameter with default value null
- How OpenXmlReader.Skip supposed to work?
- Find appended text from txt file
- Reduce Code Duplication when Searching for values in XML with XPath
- Policies and claims in ASP.NET Core 2.1
- How to prevent 'System.FormatException' occurred in mscorlib.dll' with an empty textbox?