Cascading Dropdown List In MVC Using LINQ to SQL

Atul Rawat

7y72k23100Article

MVC AJAXdropdownlist in mvclinq to sql in dropdownlist

23 Comments

Join the conversation! Your thoughts help the community grow.

Faridul Islam6y ago
There is no ViewData item of type 'IEnumerable<SelectListItem>' that has the key 'City'. [error]
Ambareesh c8y ago
@Html.DropDownList("country", ViewBag.countryid as SelectList, "Select a Country", htmlAttributes: new { onchange = "Getstate()" }). In this line getting error like Uncaught ReferenceError: Getstate is not defined at HTMLSelectElement.onchange so can you help me out...
Honey Modi9y ago
Http://localhost:2212/Home/@Url.Action('GetJsonState','Home')?id=1 404 (Not Found)... heya. i m getting this and my state list not getting populated
Nathalie Desrosiers9y ago
In your function, "dft" stands for what?
- Atul Rawat9y ago
  Dft is my controller name.
Atul Rawat11y ago
check this line @Html.DropDownList("country", ViewBag.countryid as SelectList, "Select a Country", htmlAttributes: new { onchange = "Getstate()" })
John qeqw11y ago
Im getting error in chrome console "Getstate is not defined"
Francesco Serafini11y ago
??????? ??????? ?? ???? ??????, ?????? ?????????.???????, ?? ????? ? ???? ??, ??? ???????: ..... error: function () { var items = ""; items = "<option value=''>Choose Country</option>"; $("#DropDownListStates").html(items); }, ..... ??? - ???????
Atul Rawat11y ago
Please read again json code....
Francesco Serafini11y ago
Just a silly question: how to reset the "State" dropdownlist to its initial value (i.e.: "Choose State") as the "Country" dropdownlist is set back to its initial value (i.e.: "Select a Country"). Thx
Vipin Tyagi11y ago
Great One Rawat.....
Abhishek Jaiswal11y ago
Nice Read!! :)
- Atul Rawat11y ago
  thanks abhishek
Santhakumar Munuswamy11y ago
Thanks for nice article
- Atul Rawat11y ago
  thanks for reading sir
Akash Nagina11y ago
Very Helpful!!
- Atul Rawat11y ago
  thanks akash
Gowtham K11y ago
Good one
- Atul Rawat11y ago
  thanks for reading gowtham
Shridhar Sharma11y ago
nice article buddy.
- Atul Rawat11y ago
  Thanks dude
Nitin11y ago
nice
- Atul Rawat11y ago
  thanks for reading!!!!!!!

Introduction

In this article we will learn how to bind data from a table to a DropDownList in MVC using LINQ to SQL and learn how to populate a child dropdown list depending on each new value as values are selected in the parent's DropDownList.

Database structure

Create two tables in the database with the names Country and State.

The following is the create table code for the country table:

CREATE TABLE [dbo].[country]
(
[countryid] [int] NOT NULL,
[countryname] [nvarchar](50) NULL,
)

In the preceding SQL query, countryid is the primary key.

The following is the create table code for the state table:

CREATE TABLE [dbo].[state]
(
[stateid] [int] NOT NULL,
[statename] [nvarchar](50) NULL,
[countryid] [int] NULL,
)

In the preceding SQL query, stateid is the primary key and countryid is the foreign key reference by country table.

Adding a LINQ to SQL Class

Step 1

Right-click on the project and select "Add new item", then select Data from the templates.

Step 2

Choose "LINQ to SQL classes" from the list and provide a name. Now after clicking on Add, you can see the .dbml file in the project.

Step 3

Drag the country and state tables from the database in the Server Explorer.

Create a dft Controller

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Data.SqlClient;
namespace dropdownlist.Controllers
{
public class dftController : Controller
{
DataClasses1DataContext db = new DataClasses1DataContext();
//
// GET: /dft/
public ActionResult Index()
{
DataClasses1DataContext db = new DataClasses1DataContext();
ViewBag.countryid = new SelectList(db.countries, "countryid", "countryname");
ViewBag.states = new SelectList(new List<state>() ,"stateid","statename");
return View();
}
public IList<state> Getstate(int id)
{
return db.states.Where(m => m.countryid == id).ToList();
}
public JsonResult GetJsonState(int id)
{
var stateListt = this.Getstate(Convert.ToInt32(id));
var statesList = stateListt.Select(m => new SelectListItem()
{
Text = m.statename,
Value = m.countryid.ToString()
});
return Json(statesList, JsonRequestBehavior.AllowGet);
}
}
}

Create a view for showing the values in the DropDownList

Right-click on the Index ActionResult method and select Add View. After selecting Add View, a dialog box will open. The view name is the index by default. Now select your model class and click on the OK button.

@model dropdownlist.country
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
@using (Html.BeginForm())
{
@Html.DropDownList("country", ViewBag.countryid as SelectList, "Select a Country", htmlAttributes: new { onchange = "Getstate()" })
@Html.DropDownList("State", ViewBag.states as SelectList, "Choose State", new { @class = "inputBox", @id = "DropDownListStates" })
}
<script>
function GetState() {
$.ajax({
url: "@Url.Action("GetJsonState", "dft")",
dataType: "json",
type: "GET",
data:{id:$("#country").val()},
error: function () {
},
beforeSend: function () {
},
success: function (data) {
var items = "";
items = "<option value=''>Choose State</option>";
$.each(data, function (i, item) {
items += "<option value=\"" + item.Value + "\">" + item.Text + "</option>";
});
$("#DropDownListStates").html(items);
}
});
}
</script>

The following is the output of the preceding code.

Summary

In this article we learned how to bind data from a table to a DropDownList in MVC using LINQ to SQL and learn how to populate a child dropdown list depending on each new value as values are selected in the parent's DropDownList.