Using Dropdownlist to Save Data into Database in MVC ADO.NET

 The provided code includes examples of how to create cascading dropdowns for countries, states, and cities, allowing users to select specific locations for student data.

Prerequisites: To follow this tutorial, you should have a basic understanding of ASP.NET MVC, C#, jQuery, and Entity Framework.

Building the Dropdown Form

Building the Dropdown Form: In the "Index.chtml" file, we have designed a form to collect student data, including cascading dropdowns for countries, states, and cities.

    


        @if (ViewBag.Country != null)

        {

            @Html.DropDownListFor(x => x.Country, ViewBag.Country as SelectList, "Select Country", new { @class = "form-control" })

        }

    

    


        Please wait for State..

        @Html.DropDownListFor(x => x.State, ViewBag.State as SelectList, "Select State", new { @class = "form-control" })

        @Html.ValidationMessageFor(x => x.State)

    

    


        Please wait for City..

        @Html.DropDownListFor(x => x.City, ViewBag.City as SelectList, "Select City", new { @class = "form-control" })

        @Html.ValidationMessageFor(x => x.City)

    

Implementing AJAX for Dropdowns:

Implementing AJAX for Dropdowns: In the JavaScript section, we've added AJAX functions to handle the country and state dropdowns dynamically.

/------ Country Function -------/

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

    var stateID = $(this).val();

    $('#State').empty();

    $('#City').addClass('d-none');

    console.log(stateID);

    var statesProgress = $("#states-loading-progress");

    statesProgress.show();

    if (stateID > 0) {

        $(".stateSection").addClass('active');

        $.ajax({

            type: "GET",

            url: "/Home/GetStateById/" + stateID,

            success: function (data) {

                $("#State").html('');

                var defaultOption = "Select State";

                $("#State").append(defaultOption);

                $.each(data, function (id, option) {

                    var optionHtml = "" + option.StateName + "";

                    $("#State").append(optionHtml);

                });

                statesProgress.hide();

            },

            error: function (xhr, ajaxOptions, thrownError) {

                alert('State function failed');

                statesProgress.hide();

            }

        });

    } else {

        $(".stateSection").removeClass('active');

        $(".citySection").removeClass('active');

        $.notify("Please select a Country", "error");

    }

});

/------ State Function -------/

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

    $('#City').removeClass('d-none');

    var cityID = $(this).val();

    var statesProgress = $("#states-loading-progress");

    statesProgress.show();

    if (cityID > 0) {

        $(".citySection").addClass('active');

        $.ajax({

            type: "GET",

            url: "/Home/GetCityById/" + cityID,

            success: function (data) {

                $("#City").html('');

                var defaultOption = "Select City";

                $("#City").append(defaultOption);

                $.each(data, function (id, option) {

                    var optionHtml = "" + option.CItyName + "";

                    $("#City").append(optionHtml);

                });

                statesProgress.hide();

            },

            error: function (xhr, ajaxOptions, thrownError) {

                alert('City function failed');

                statesProgress.hide();

            }

        });

    } else {

        $(".citySection").removeClass('active');

        $.notify("Please select a State", "error");

    }

});

Handling Dropdown Requests in the Controller

Handling Dropdown Requests in the Controller: In the "HomeController," we've added action methods to retrieve country, state, and city data from the database and return them as JSON results for the AJAX requests.

// Home Controller Method

public class HomeController : Controller

{

    public ActionResult Index()

        {

            List CountryList = db.CountryTable.ToList();

            ViewBag.Country = new SelectList(CountryList, "Id", "countryName");

            List StateList = db.StateTable.ToList();

            ViewBag.State = new SelectList(StateList, "StateID", "StateName");

            List CityList = db.CityTable.ToList();

            ViewBag.City = new SelectList(CityList, "Id", "CItyName");

            return View();

        }

        public JsonResult GetStateById(int ID)

        {

            db.Configuration.ProxyCreationEnabled = false;

            var stateList = db.StateTable.Where(x => x.CountryID == ID).ToList();

            return Json(stateList, JsonRequestBehavior.AllowGet);

        }

        public JsonResult GetCityById(int ID)

        {

            db.Configuration.ProxyCreationEnabled = false;

            var CityList = db.CityTable.Where(x => x.StateID == ID).ToList();

            return Json(CityList, JsonRequestBehavior.AllowGet);

        }

        public ActionResult EditStudent(int ID)

        {

            var result = repo.EditFunction(ID);

            // Set selected values for the dropdown lists

            List  CountryList = db.CountryTable.ToList();

            ViewBag.CountryList = new SelectList(CountryList, "Id", "countryName", result.Country);

            List StateList = db.StateTable.ToList();

            ViewBag.StateList = new SelectList(StateList, "StateID", "StateName", result.State);

            List CityList = db.CityTable.ToList();

            ViewBag.CityList = new SelectList(CityList, "Id", "CItyName", result.City);

            return View(result);

        }

    }    

}

Conclusion: In this article, we have learned how to create dynamic dropdown lists with cascading behavior in an ASP.NET MVC application using AJAX. The JavaScript AJAX functions communicate with the server to fetch data based on user selections, and the ASP.NET MVC controller methods handle the requests and return JSON results. By following this guide, you can enhance your web application with more interactive features and improve the user experience with dynamic dropdowns. Happy coding! https://jaimin047.hashnode.dev/creating-dynamic-dropdown-lists-in-aspnet-mvc-using-ajax