dynamic dropdown in asp.net mvc c#?

Question

two dynamic dropdown whenever we change 1st dropdown on change event the sencond dropdown value update based on 1st dropdown value.

Amit Mohanty · Answer

Check the below example: Models: public class Category { public int Id { get; set; } public string Name { get; set; } } public class SubCategory { public int Id { get; set; } public string Name { get; set; } public int CategoryId { get; set; } } Controllers: public class HomeController : Controller { // Sample data for demonstration private static List categories = new List { new Category { Id = 1, Name = "Category 1" }, new Category { Id = 2, Name = "Category 2" } }; private static List subCategories = new List { new SubCategory { Id = 1, Name = "SubCategory 1-1", CategoryId = 1 }, new SubCategory { Id = 2, Name = "SubCategory 1-2", CategoryId = 1 }, new SubCategory { Id = 3, Name = "SubCategory 2-1", CategoryId = 2 }, new SubCategory { Id = 4, Name = "SubCategory 2-2", CategoryId = 2 } }; public ActionResult Index() { ViewBag.Categories = new SelectList(categories, "Id", "Name"); return View(); } public JsonResult GetSubCategories(int categoryId) { var subCategoriesList = subCategories.Where(sc => sc.CategoryId == categoryId).ToList(); return Json(subCategoriesList, JsonRequestBehavior.AllowGet); } } Views: @{ ViewBag.Title = "Dynamic Drop-down"; } Dynamic Drop-down @Html.DropDownList("Categories", ViewBag.Categories as SelectList, "Select Category", new { id = "categories" }) @Html.DropDownList("SubCategories", new SelectList(Enumerable.Empty ()), "Select SubCategory", new { id = "subCategories" }) @section Scripts { $(document).ready(function () { $('#categories').change(function () { var categoryId = $(this).val(); if (categoryId) { $.getJSON('@Url.Action("GetSubCategories", "Home")', { categoryId: categoryId }, function (subCategories) { var subCategoryDropdown = $('#subCategories'); subCategoryDropdown.empty(); subCategoryDropdown.append($(' ').text('Select SubCategory').attr('value', '')); $.each(subCategories, function (index, subCategory) { subCategoryDropdown.append($(' ').text(subCategory.Name).attr('value', subCategory.Id)); }); }); } else { $('#subCategories').empty(); $('#subCategories').append($(' ').text('Select SubCategory').attr('value', '')); } }); }); }

Prasad Raveendran · Answer

In an ASP.NET MVC 5 application, you can create dynamic dropdown lists where the second dropdown's options depend on the selection of the first dropdown. This involves the use of AJAX to fetch the relevant data from the server when the first dropdown's value changes. public class Country { public int CountryId { get; set; } public string CountryName { get; set; } } public class City { public int CityId { get; set; } public string CityName { get; set; } public int CountryId { get; set; } } Controller public class HomeController : Controller { // This method will return the view with the dropdowns public ActionResult Index() { ViewBag.Countries = GetCountries(); return View(); } // This method will return the list of countries private List GetCountries() { return new List { new Country { CountryId = 1, CountryName = "USA" }, new Country { CountryId = 2, CountryName = "Canada" } }; } // This method will return the list of cities based on the countryId public JsonResult GetCities(int countryId) { var cities = new List { new City { CityId = 1, CityName = "New York", CountryId = 1 }, new City { CityId = 2, CityName = "Los Angeles", CountryId = 1 }, new City { CityId = 3, CityName = "Toronto", CountryId = 2 }, new City { CityId = 4, CityName = "Vancouver", CountryId = 2 } }; var filteredCities = cities.Where(c => c.CountryId == countryId).ToList(); return Json(filteredCities, JsonRequestBehavior.AllowGet); } } view @model dynamic @{ ViewBag.Title = "Index"; } Dynamic Dropdown Country: Select Country @foreach (var country in ViewBag.Countries) { @country.CountryName } City: Select City $(document).ready(function () { $('#countryDropdown').change(function () { var countryId = $(this).val(); if (countryId) { $.ajax({ type: "GET", url: '@Url.Action("GetCities", "Home")', data: { countryId: countryId }, contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { var cityDropdown = $('#cityDropdown'); cityDropdown.empty(); cityDropdown.append(' Select City '); $.each(data, function (i, city) { cityDropdown.append(' ' + city.CityName + ' '); }); }, error: function (ex) { alert('Failed to retrieve cities.' + ex); } }); } else { $('#cityDropdown').empty(); $('#cityDropdown').append(' Select City '); } }); }); In this example: The first dropdown ( countryDropdown ) is populated with a list of countries. When the country dropdown value changes, an AJAX request is sent to the GetCities action method in the HomeController . The GetCities method returns a list of cities filtered by the selected country. The second dropdown ( cityDropdown ) is then populated with the filtered list of cities. Make sure to include the jQuery library in your project, as it's used for the AJAX request in the view.

Jeremkidshjf · Answer

C# sample code for creating a linked dropdown list using spire.xls: using Spire.Xls; namespace SpireXlsDemo { internal class Program { static void Main(string[] args) { // Create a new workbook object Workbook workbook = new Workbook(); // Load the workbook from a file workbook.LoadFromFile("Sample.xlsx"); // Get the first worksheet Worksheet worksheet1 = workbook.Worksheets[0]; // Get the second worksheet Worksheet worksheet2 = workbook.Worksheets[1]; // Add named range objects and set reference ranges Spire.Xls.Core.INamedRange namedRange = workbook.NameRanges.Add(worksheet2.Range["A1"].Text); namedRange.RefersToRange = worksheet2.Range["B2:B6"]; namedRange = workbook.NameRanges.Add(worksheet2.Range["A2"].Text.Replace(" ", "_")); namedRange.RefersToRange = worksheet2.Range["C2:C6"]; namedRange = workbook.NameRanges.Add(worksheet2.Range["A3"].Text); namedRange.RefersToRange = worksheet2.Range["D2:D6"]; namedRange = workbook.NameRanges.Add(worksheet2.Range["A4"].Text); namedRange.RefersToRange = worksheet2.Range["E2:E6"]; namedRange = workbook.NameRanges.Add(worksheet2.Range["A5"].Text); namedRange.RefersToRange = worksheet2.Range["F2:F6"]; // Allow 3D ranges in data validation worksheet1.ParentWorkbook.Allow3DRangesInDataValidation = true; // Set the data range for data validation worksheet1.Range["A2"].DataValidation.DataRange = worksheet2.Range["A1:A5"]; worksheet1.Range["B2"].DataValidation.AllowType = CellDataType.User; // Set the formula worksheet1.Range["B2"].DataValidation.Formula1 = "=INDIRECT(SUBSTITUTE(A2,\" \",\"_\"))"; // Save the workbook to a file workbook.SaveToFile("Linked Dropdowns in the Same Worksheet.xlsx", ExcelVersion.Version2016); // Dispose of the workbook resources workbook.Dispose(); } } } Refer to: https://www.e-iceblue.com/Tutorials/Spire.XLS/Spire.XLS-Program-Guide/NET-Dropdown-List-Create-Excel-Dropdown-List-in-C-and-VB.NET.html

dynamic dropdown in asp.net mvc c#?

Answers (3)