How to filter a dropdown based on a previous selection

Question

I have two tables, namely State and Country. These two are drop-down lists on my browse page. I show the dropdown values ​​for each of them using an independent query. In table state, I have stateid and countryid. I need to filter state values ​​based on country selection. And I even have a main table called Table, which consists of identifiers of both the state and the country. The way of displaying is shown below.

enter code here 

// To get state values

 var query = (from i in dbContext.countries join j in dbContext.States on i.Country_id equals j.Country_id where j.State_id >= 0 select new { state = j.State_name}).ToArray//To get state values 

enter the code here

  var str = (from li in dbContext.countries where li.Country_id >= 1 select new { country = li.Country_name}).ToArray();//To get country 

values

And how can I request filtering of usin main table "table" values. I am facing a problem while writing a filtering request Is this possible with a linq request? Please suggest me how to do this. Thanks

Answer 1

This can be done in many ways. One way is to force the server to return a filtered list of valid parameters via Ajax when the first drop-down menu changes.

For example, suppose this scenario is: a view with two DropDownLists; one with countries, and the other with states. The DropDownList with states is empty and is disabled by default until a country is selected.

So you can have this action in your controller:

 public ActionResult Index() { ViewBag.Country = new [] { new SelectListItem() { Text = "Venezuela", Value = "1" }, new SelectListItem() { Text = "United States", Value = "2" } }; return View(); } 

And this view:

 <div class="editor-field"> @Html.DropDownList("Country") @Html.DropDownList("State", Enumerable.Empty<SelectListItem>(), "States", new { @disabled = "disabled" }) </div> 

Now add the POST action to the controller. It receives the identifier of the selected country and returns a JSON containing a filtered list of states:

 [HttpPost] public ActionResult StatesByCountry(int countryId) { // Filter the states by country. For example: var states = (from s in dbContext.States where s.CountryId == countryId select new { id = s.Id, state = s.Name }).ToArray(); return Json(states); } 

The last thing is client-side code. This example uses jQuery and sets up a listener for change events in the drop-down list of the country, which triggers a new controller action through Ajax. It then uses the return values ​​to update the "State" DropDownList.

 $(document).ready(function () { $('#Country').change(function () { $.ajax({ url: '/Home/StatesByCountry', type: 'POST', data: { countryId: $(this).val() }, datatype: 'json', success: function (data) { var options = ''; $.each(data, function () { options += '<option value="' + this.id + '">' + this.state + '</option>'; }); $('#State').prop('disabled', false).html(options); } }); }); });