在 select 后显示列表 DropDownList 值 Razor

Question

我已经为此工作了一段时间，我知道如何使用 JQuery 解决它，但我需要使用服务器端代码解决这个问题，我在 Razor View 事情是：

我有一个 @Html.DropDownlist 显示美国的一些州，单击 DropDownList 中的一个州后我想显示一些属于使用其他所选州的城市DropDownList，我不确定如何仅使用 Razor syntax 从所选字段中获取值，然后在选择一个州时在其他 DropDownList 中显示属于该州的城市，我使用的是 SelectList 并且我有一个 StateID 来绑定城市...我正在显示正在工作的 DropDownList 中的所有州。这是我的代码：

这只是两个类，我用它们来填充 SelectList 的一些属性：

 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;
        }
    }

现在这是我的 Razor 视图：

@using RazorMVC.Models;

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

</form>

Answer 1

如果您绝对不想使用 javascript/jQuery，您可以提交表单（带有选定的州 ID）并根据发布的州 ID 获取州并显示。

假设您想在同一视图中显示所选州的城市。

@{

  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" />
}

我个人不喜欢在 razor 视图中放置大量 C# 代码。我通常创建一个视图模型并使用它来传递视图中所需的值。所以你在视图中看到的大部分代码都在我的操作方法中。

如果您更喜欢使用 jQuery/javascript（为什么不呢？），您可以监听第一个下拉列表的更改事件，获取选定的选项值并通过 [=22= 将其发送到服务器] 称呼。让您的服务器操作方法 returns 以 json 格式显示状态，并且您的 ajax 方法的回调可以解析 json 数据并更新城市下拉列表。这是一个 sample 开头

在 select 后显示列表 DropDownList 值 Razor

Show list after select DropDownList value Razor

html

c#

asp.net-mvc

razor

single-page-application