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

Question

Please, how do I use dropdowwnlist to send data into table using MVC ASP. ADO.NET C#?

Tuhin Paul · Answer

1. Make sure you have a database table where you want to insert the data. 2. Create a C# model class that represents the data you want to insert into the table. 3. Create an MVC view with a dropdownlist and a form to submit the data. 4. Populate the dropdownlist with data, so users can select the appropriate value to insert into the table. 5. Create a controller that handles the form submission and inserts the data into the table using ADO.NET.

Jaimin Patel · Answer

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