TechnoTips : Part 36 - Cascading dropdown list using Jquery and Partial View in Asp.net MVC

#Expected Output

#Controller Code(TestController.cs)

using MVCTutorial.Models;
using System;
using System.Collections.Generic;
using System.Globalization;
using System.IO;
using System.Linq;
using System.Net;
using System.Threading;
using System.Web;
using System.Web.Mvc;

namespace MVCTutorial.Controllers
{
    public class TestController : Controller
    {

        public ActionResult Index()
        {

            ViewBag.CountryList = new SelectList(GetCountryList(),"CountryId","CountryName");

            return View();
        }

     
        public List<Country> GetCountryList()
        {

            MVCTutorialEntities db = new MVCTutorialEntities();

            List<Country> countries = db.Countries.ToList();

            return countries;


        }

        public ActionResult GetStateList(int CountryId)
        {
            MVCTutorialEntities db = new MVCTutorialEntities();

            List<State> stateList = db.States.Where(x => x.CountryId == CountryId).ToList();

            ViewBag.StateOptions = new SelectList(stateList, "StateId", "StateName");

            return PartialView("StateOptionPartial");

        }

    }
}

#Model (CountryAndStateVM.cs)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MVCTutorial.Models
{
    public class CountryAndStateVM
    {
        public int CountryId { get; set; }
        public int StateId { get; set; }

    }
}

# View (Index.cshtml)

@model MVCTutorial.Models.CountryAndStateVM
@{
    ViewBag.Title = "Index";
    // Layout = null;
}

<div class="panel panel-body" style="min-height:256px">

    @*<div class="col-md-3">

        @{ Html.RenderAction("SideMenu", "Test");}

    </div>*@
    <div class="col-md-9">

        @if (ViewBag.CountryList != null)
        { 
         @Html.DropDownListFor(m => m.CountryId, ViewBag.CountryList as SelectList, "-- Select Country--", new { @class="form-control"})
         
        }
        @Html.DropDownListFor(m => m.StateId, new SelectList(""), "--Select State--", new { @class = "form-control" })


    </div>

</div>

<script>

    $(document).ready(function () {

        $("#CountryId").change(function () {

            var countryId = $(this).val();
            debugger
            $.ajax({

                type: "Post",
                url: "/Test/GetStateList?CountryId=" + countryId,
                contentType:"html",
                success: function (response) {
                  debugger
                    $("#StateId").empty();
                    $("#StateId").append(response);

                }

            })

        })

    })

</script>

# Partial View (StateOptionPartial.cshtml)

<option value="">--Select State--</option>
@if (ViewBag.StateOptions != null)
{
    
    foreach (var item in ViewBag.StateOptions) { 
    
      <option value="@item.Value">@item.Text </option>
    
    }

}

#Database Script (MVCTutorial)

USE [MVCTutorial]
GO
/****** Object:  Table [dbo].[Country]    Script Date: 13-03-2017 17:06:59 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
SET ANSI_PADDING ON
GO
CREATE TABLE [dbo].[Country](
 [CountryId] [int] IDENTITY(1,1) NOT NULL,
 [CountryName] [varchar](100) NULL,
 CONSTRAINT [PK_Country] PRIMARY KEY CLUSTERED 
(
 [CountryId] 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
/****** Object:  Table [dbo].[State]    Script Date: 13-03-2017 17:07:00 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
SET ANSI_PADDING ON
GO
CREATE TABLE [dbo].[State](
 [StateId] [int] IDENTITY(1,1) NOT NULL,
 [StateName] [varchar](100) NULL,
 [CountryId] [int] NULL,
 CONSTRAINT [PK_State] PRIMARY KEY CLUSTERED 
(
 [StateId] 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].[Country] ON 

GO
INSERT [dbo].[Country] ([CountryId], [CountryName]) VALUES (1, N'India')
GO
INSERT [dbo].[Country] ([CountryId], [CountryName]) VALUES (2, N'United States')
GO
SET IDENTITY_INSERT [dbo].[Country] OFF
GO
SET IDENTITY_INSERT [dbo].[State] ON 

GO
INSERT [dbo].[State] ([StateId], [StateName], [CountryId]) VALUES (1, N'Delhi', 1)
GO
INSERT [dbo].[State] ([StateId], [StateName], [CountryId]) VALUES (2, N'Uttar Pradesh', 1)
GO
INSERT [dbo].[State] ([StateId], [StateName], [CountryId]) VALUES (3, N'Punjab', 1)
GO
INSERT [dbo].[State] ([StateId], [StateName], [CountryId]) VALUES (4, N'Haryana', 1)
GO
INSERT [dbo].[State] ([StateId], [StateName], [CountryId]) VALUES (5, N'Bihar', 1)
GO
INSERT [dbo].[State] ([StateId], [StateName], [CountryId]) VALUES (7, N'California', 2)
GO
INSERT [dbo].[State] ([StateId], [StateName], [CountryId]) VALUES (8, N'Texas', 2)
GO
INSERT [dbo].[State] ([StateId], [StateName], [CountryId]) VALUES (9, N'New York', 2)
GO
INSERT [dbo].[State] ([StateId], [StateName], [CountryId]) VALUES (10, N'Michigan', 2)
GO
INSERT [dbo].[State] ([StateId], [StateName], [CountryId]) VALUES (11, N'Virginia', 2)
GO
INSERT [dbo].[State] ([StateId], [StateName], [CountryId]) VALUES (12, N'New Jersey', 2)
GO
SET IDENTITY_INSERT [dbo].[State] OFF
GO
ALTER TABLE [dbo].[State]  WITH CHECK ADD  CONSTRAINT [FK_State_Country] FOREIGN KEY([CountryId])
REFERENCES [dbo].[Country] ([CountryId])
GO
ALTER TABLE [dbo].[State] CHECK CONSTRAINT [FK_State_Country]
GO

All Code Factory

3 comments:

Unknown said...: Thank you for the videos, do you have anything on blog and comments? I am trying to create a blog but failed to do the commenting functionality following your posts. hatah01@gmail.com; June 11, 2017 at 3:17 PM
Unknown said...: Hola Ashish, no entendí como sacaste la clase "countries" en el método GetCountryList(),
al parecer no la sugiere el db context... Saludos!; February 14, 2018 at 5:32 PM
Vikash Kumar Singh said...: Thanks for the awesome tutorial.
I have also written an articleon same topic.; February 23, 2019 at 2:18 AM

TechnoTips

Labels

Monday, March 13, 2017

Part 36 - Cascading dropdown list using Jquery and Partial View in Asp.net MVC

3 comments: