Today we discuss about the cascadding dropdown list in MVC
4.0
First create database:-
create database test
USE [test]
GO
/****** Object:
Table [dbo].[st_city] Script
Date: 02/12/2014 20:15:11 ******/
DROP TABLE [dbo].[st_city]
GO
/****** Object:
Table [dbo].[st_city] Script
Date: 02/12/2014 20:15:11 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
SET ANSI_PADDING ON
GO
CREATE TABLE [dbo].[st_city](
[id] [int] NOT NULL,
[state]
[varchar](50) NULL,
[city]
[varchar](50) NULL,
CONSTRAINT [PK_st_city] PRIMARY
KEY CLUSTERED
(
[id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS
= ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
SET ANSI_PADDING OFF
GO
SET IDENTITY_INSERT [dbo].[st_city] ON
INSERT [dbo].[st_city] ([id], [state], [city]) VALUES (1, N'Bihar', N'Bettiah')
INSERT [dbo].[st_city] ([id], [state], [city]) VALUES (2, N'Bihar', N'Muzaffarpur')
INSERT [dbo].[st_city] ([id], [state], [city]) VALUES (3, N'UP', N'Noida')
INSERT [dbo].[st_city] ([id], [state], [city]) VALUES (4, N'UP', N'Agra')
INSERT [dbo].[st_city] ([id], [state], [city]) VALUES (5, N'Delhi', N'Mahipalpur')
INSERT [dbo].[st_city] ([id], [state], [city]) VALUES (6, N'Delhi', N'Mehroli')
SET IDENTITY_INSERT [dbo].[st_city] OFF
Code for Controller:-
using System;
using
System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using
MvcApplication1.Models;
namespace
MvcApplication1.Controllers
{
public class HomeController : Controller
{
testEntities1 te = new testEntities1();
public ActionResult drop_down()
{
ViewBag.data = te.st_city.Select(m
=> new SelectListItem {Text=m.state
}).Distinct().ToList();
return View();
}
public JsonResult city(string state)
{
var v = te.st_city.Where(m => m.state ==
state).Select(m => new { City = m.city });
return Json(v, JsonRequestBehavior.AllowGet);
}
}
}
Code for Drop_down.cshtml
@{
Layout = null;}
<script src="~/Scripts/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(function () {
$("#ddl").change(function () {
$.get("home/city", { state: $(this).val() }, function (data) {
$("#city").empty();
var v = "<option>Select</option>";
$.each(data, function (i, v1) {
v += "<option>" + v1.City + "</option>";
});
$("#city").html(v);
});
});
});
</script>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>drop_down</title>
</head>
<body style="text-align: center;">
<div style="width: 300px; margin-left: auto; margin-right: auto;">
<div>
State:- @Html.DropDownList("ddl", (List<SelectListItem>)ViewBag.data, "Select")
</div>
<br /><br /><br /><br /><br /><br />
<div>
City:-
<select id="city">
<option>Select</option>
</select>
</div>
</div>
</body>
</html>
Code for RoutConfig.cs
using System;
using
System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;
namespace MvcApplication1
{
public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "drop_down", id = UrlParameter.Optional }
);
}
}
}
0 comments:
Post a Comment