Monday, March 13, 2017

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

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!

Vikash Kumar Singh said...

Thanks for the awesome tutorial.
I have also written an articleon same topic.