StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Here is a solution that can work for you. I have changed your code quite a bit to what I feel comfortable with and I tried to follow best practices. Edit it to fit in with your scenario. I never use <code>ViewBag</code> and I never use <code>SelectList</code>.</p> <p>I will be answering this question based on my assumption that when a state is selected then all that state's districts will be loaded in a another drop down.</p> <p>Go and create domain model classes called <code>State</code> and <code>District</code>. This will represent all of your states and districts.</p> <pre><code>public class State { public int Id { get; set; } public string Name { get; set; } } public class District { public int Id { get; set; } public string Name { get; set; } } </code></pre> <p>You will have a view model that you will populate with data in your controller and will then pass this view model to your view. Your view model can contain other properties if you need to capture other data.</p> <pre><code>public class LocationViewModel { public int StateId { get; set; } public IEnumerable<State> States { get; set; } public int DistrictId { get; set; } public IEnumerable<District> Districts { get; set; } } </code></pre> <p>Now you need to populate your view model with data and pass it to the view. You will pass in a list of all your states and an empty list of districts.</p> <pre><code>public class CascadeListController : Controller { private readonly IStateRepository stateRepository; private readonly IDistrictRepository districtRepository; public LocationController(IStateRepository stateRepository, IDistrictRepository districtRepository) { this.stateRepository = stateRepository; this.districtRepository = districtRepository; } public ActionResult Create() { LocationViewModel viewModel = new LocationViewModel { States = stateRepository.GetAll(), Districts = Enumerable.Empty<District>() // Empty because no state has been selected }; return View(viewModel); } [HttpPost] public ActionResult Create(LocationViewModel viewModel) { // Do whatever you need to do here } } </code></pre> <p>Your view is strongly typed:</p> <pre><code>@model YourProject.ViewModels.Locations.LocationViewModel @Html.DropDownListFor( x => x.StateId, new SelectList(Model.States, "Id", "Name", Model.StateId), "-- Select --", new { id = "States" } ) @Html.ValidationMessageFor(x => x.StateId) @Html.DropDownListFor( x => x.DistrictId, new SelectList(Model.Districts, "Id", "Name", Model.DistrictId), "-- Select --", new { id = "Districts" } ) @Html.ValidationMessageFor(x => x.DistrictId) </code></pre> <p>Your jQuery to handle the change and population of the second drop down:</p> <pre><code>$(document).ready(function () { $("#Departments").change(function () { var url = '@Url.Action("GetDistrictsByStateId", "CascadeList")'; var stateId = $("#States").val(); $.getJSON(url, { stateId: stateId }, function (data) { $('#Districts').empty(); var items = '<option>-- Select --</option>'; $.each(data, function (i, district) { items += "<option value='" + district.Id + "'>" + district.Name + "</option>"; }); $('#Districts').html(items); }); }); }); </code></pre> <p>And then lastly your GetDistrictsByStateId action method to bring back all the districts for a specific state:</p> <pre><code>public ActionResult GetDistrictsByStateId(int stateId) { IEnumerable<District> districts = districtRepository.GetDistrictsByStateId(stateId); var displayedDistricts = districts.Select(x => new { Id = x.Id.ToString(), Name = x.Name }); return Json(displayedDistricts, JsonRequestBehavior.AllowGet); } </code></pre> <p>There are probably other ways of doing this but this is the easiest for me to accomplish this. Please excuse if I have left something out :)</p> <p>I hope this can help you on the right path.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload