Show list after select DropDownList value Razor

Question

I've been working for a while on this, I know how to resolve it using JQuery, but I need to solve this just using server side code, I'm in a Razor View The thing is:

I have an @Html.DropDownlist that is showing some States from USA, and once clicked one of the States from the DropDownList then I want to show some cities that belong to the State selected using other DropDownList, I'm not sure how to get the value from the selected field just using Razor syntax and then show the cities that belong to the State in other DropDownList when one State is selected, I'm using a SelectList and I have an StateID to bind the cities... I'm showing all the States inside a DropDownList that is working. Here is my code:

These are just two classes that I'm using to fill the SelectList with some properties:

 public States(int id, string name, List<string> list)
        {
            StateID = id;
            Name = name;
            Cities = list;
        }
        public int StateID { get; set; }
        public string Name { get; set; }
        public List<string> Cities { get; set; }
    }


    public static class Fill
    {
        public static List<States> GiveMeStates()
        {
            List<States> li = new List<States>() {
             new States(1, "Alabama",new List<string> {"Adamsville", "Addison", "Anderson","Anniston", "Arab" }),
             new States(2,"Alaska", new List<string> {"Anchorage","Juneau","Fairbanks","Sitka"}),
             new States(3,"Arizona", new List<string> { "Avondale", "Benson", "Besbee"})
            };
            return li;
        }
    }

And now this is my Razor View:

@using RazorMVC.Models;

@{ 
    List<States> aux = Fill.GiveMeStates();   
    SelectList states = new SelectList(aux, "StateID", "Name");
}
<form>
    @Html.DropDownList("ddlStates", states);

</form>

Answer 1

If you absolutely do not want to use javascript/jQuery, you may submit the form (with the selected state id) and get the states based on the posted state id and show that.

Assuming you want to show the cities for the selected state in the same view.

@{

  var stateId = Request.QueryString["ddlStates"] as string;
  List<States> aux = Fill.GiveMeStates();
  SelectList states = new SelectList(aux, "StateID", "Name");
  List<SelectListItem> cities = new List<SelectListItem>();
  if (!String.IsNullOrEmpty(stateId))
  {       
    var state = aux.FirstOrDefault(f => f.StateID == Convert.ToInt32(stateId));
    if (state != null)
    {
        cities = state.Cities
                      .Select(x => new SelectListItem {Value = x, Text = x}).ToList();
    }
  }
}
<label>Select a state and hit submit </label>
@using (Html.BeginForm("Index", "Home", FormMethod.Get)) 
{
  @Html.DropDownList("ddlStates", states)
  <label>Cities < /label>
  @Html.DropDownList("City", cities)
  <input type="submit" />
}

I personally prefer to not put a lot of C# code in the razor views. I usually create a view model and use that to pass the values needed in the view. So most of the above code you see in the view goes in my action method.

If you prefer to use jQuery/javascript (Why not ?), You may listen to the change event of the the first dropdown ,get the selected option value and send that to server via an ajax call. Let your server action method returns the states in json format and your ajax metod's call back can parse the json data and update the cities dropdown. Here is a sample to start with