How to create cascading dropdownlist in asp.net mvc

Question

How to create cascading dropdownlist in asp.net mvc, can someone guide me

Rajanikant Hawaldar · Answer

https://www.c-sharpcorner.com/UploadFile/abhikumarvatsa/cascading-dropdownlist-in-Asp-Net-mvc/

Sachin Singh · Answer

copy paste and run , then analyze , if you don't understand some lines of code then let me know. I am loading students based on their courses, means when you will select a course all students enrolled in that course will become accessible in studentdropdownlist. Step 1.View @{ Layout = null; } "viewport" content= "width=device-width" /> cascadeDisplay "jquery-3.5.1.min.js" > @Html.DropDownList( "ddlCourse" , (IEnumerable )ViewBag.data, "Select Course" ) "ddlStudent" > "-1" >Select Student $( '#ddlCourse' ).change(function () { debugger; var ddlStudent = $( "#ddlStudent" ); var Id=$( "#ddlCourse" ).val(); $.ajax({ url: '/Home/getStudentByCourse' , method: 'post' , dataType: 'json' , data: { Id: Id }, success: function (data) { debugger; $(data).each(function (index, item) { ddlStudent.append($( ' ' , { value: item.Id, text: item.Name })); }); }, error: function (err) { alert(err); } }); }); Step 2.Models and Controller Action public class Student { public int Id { get; set; } public string Name { get; set; } public int CourseId { get; set; } } public class Course { public int Id { get; set; } public string Name { get; set; } } public ActionResult cascadeDisplay() { List courses = new List () { new Course(){Id=1,Name= "Asp.Net" }, new Course(){Id=2,Name= "Jquery" }, }; var list = courses.Select(x => new SelectListItem { Text=x.Name, Value=Convert.ToString(x.Id), Selected= false }); ViewBag.data = list; return View(); } public ActionResult getStudentByCourse( int Id) { List studentList = new List (){ new Student(){Id=1,Name= "Sachin" ,CourseId=1}, new Student(){Id=2,Name= "Arjun" ,CourseId=2}, new Student(){Id=3,Name= "Vikash" ,CourseId=1}, new Student(){Id=4,Name= "Pocha" ,CourseId=2}, }; var students = studentList.Where(x=>x.CourseId==Id); return Json(students,JsonRequestBehavior.AllowGet); }

Rijwan Ansari · Answer

Check this tutorial, quite easy to implement. https://www.codeproject.com/Tips/883701/An-ASP-NET-MVC-Cascading-Dropdown-List

Satya Karki · Answer

Try this http://www.tutorialspanel.com/create-cascading-dropdown-list-asp-net-mvc/index.htm

Jignesh Kumar · Answer

Hi Sanjay, Please refer this article which will help you to build cascading dropdown step by step, https://www.c-sharpcorner.com/blogs/cascading-dropdownlist-in-asp-net-mvc https://www.aspsnippets.com/Articles/Implement-Cascading-Dependent-DropDownLists-without-jQuery-in-ASPNet-MVC.aspx https://www.c-sharpcorner.com/UploadFile/sourabh_mishra1/cascading-dropdownlist-in-Asp-Net-mvc/

Sanjay Kumar · Answer

Yes @Sachin I beginner web technologies, Thanks helping(to reply you in messages I have no inuf permissions it was asking me to make at least 100 points to reply your message thank you so much for helping nature). Thank u all for your help

Harsh Shah · Answer

Try this link... https://www.aspsnippets.com/Articles/Implement-Cascading-Dependent-DropDownLists-without-jQuery-in-ASPNet-MVC.aspx

Salman Beg · Answer

Check this link also, https://www.c-sharpcorner.com/UploadFile/4d9083/creating-simple-cascading-dropdownlist-in-mvc-4-using-razor/ https://www.c-sharpcorner.com/UploadFile/sourabh_mishra1/cascading-dropdownlist-in-Asp-Net-mvc/

How to create cascading dropdownlist in asp.net mvc

Insert Link

Embed YouTube Video

Table Options

Insert Image

Answers (8)