'How to create Cascading Dropdown

How to create Cascading Dropdown using Ajax Error Handling

Create dropdown Country State and District

1.When i click on on Country it show State.

2.When i click on State it Shows District.

public class Country
    {
        public int CountryId { get; set; }
        public string CountryName { get; set; }
    }

public class District
    {
        public int DistrictId { get; set; }
        public string DistrictName { get; set; }
    }

public class State
    {
        public int StateId { get; set; }
        public string StateName { get; set; }
    }

Controller

namespace Dropdown.Controllers
{
    public class CascadingController : Controller
    {
        private readonly DropdownContext _context;

        public CascadingController(DropdownContext context)
        {
            _context = context;
        }

        public IActionResult Index()
       {
            return View();
       }
       public IActionResult DropDown()
       {
            ViewBag.Country = _context.Country.ToList();
            ViewBag.District = _context.District.ToList();
            ViewBag.State = _context.State.ToList();
            return View();
       }
    }
}

this is my combine class

public class Combine
    {
        public int CombineId { get; set; }
        public int CountryId { get; set; }
        public int StateId { get; set; }
        public int DistrictId { get; set; }

        public Country Country { get; set; }
        public State State { get; set; }
        public District District { get; set; }
    }

View

this is View page i only add form html to show the dropdown i Does not add jQuery or something

@model Dropdown.Models.Combine
@{
    ViewData["Title"] = "DropDown";
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<html>
<head>
</head>
<body>
    <h1>DropDown</h1>
    <hr />

    <form>
        <div class="row">
            <div class="col-md-4">
                <div class="form-group" style="padding-top: 8px;padding-right:7px;">
                    <label asp-for="Country" class="control-label"></label>
                    <br />
                    <select asp-for="CountryId" class="form-control" asp-items="@(new SelectList(ViewBag.Country,"CountryId","CountryName"))">
                    </select>
                </div>
                <br />

                <div class="form-group" style="padding-top: 8px;padding-right:7px;">
                    <label asp-for="District" class="control-label"></label>
                    <br />
                    <select asp-for="DistrictId" class="form-control" asp-items="@(new MultiSelectList(ViewBag.District,"DistrictId","DistrictName"))">
                    </select>
                </div>
                <br />
                <div class="form-group" style="padding-top: 8px;padding-right:7px;">
                    <label asp-for="State" class="control-label"></label>
                    <br />
                    <select asp-for="StateId" class="form-control" asp-items="@(new SelectList(ViewBag.State,"StateId","StateName"))">
                    </select>
                </div>

                <br />

                <input type="submit" value="Create" class="btn btn-primary form-group" />


            </div>
        </div>
    </form>

</body>
</html>


<br>

<div>
    <a asp-action="Index">Back to List</a>
</div>

@section Scripts {
    <script><script type="text/javascript">
    </script>
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

enter image description here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'How to create Cascading Dropdown

Sources

Related Questions