Question

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

我有@Html.DropDownlist显示来自美国的一些国家，一旦点击了DropDownList中的一个州，我想显示一些属于使用其他DropDownList选择的州的城市，我不确定如何仅使用Razor syntax从所选字段中获取值，然后在选择一个状态时显示属于其他DropDownList中State的城市，我使用{ {1}}我有一个SelectList来绑定城市...我正在显示StateID内正在运行的所有州。这是我的代码：

这些只是我用来填充SelectList的两个类：

DropDownList

现在这是我的剃刀视图：

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

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

我个人不喜欢在剃刀视图中放入很多C＃代码。我通常创建一个视图模型，并使用它来传递视图中所需的值。因此，您在视图中看到的上述代码大部分都在我的操作方法中。

如果您更喜欢使用jQuery / javascript（为什么不呢？），您可以收听第一个下拉列表的更改事件，获取所选的选项值并通过ajax调用将其发送到服务器。让您的服务器操作方法以json格式返回状态，并且您的ajax metod的回调可以解析json数据并更新城市下拉列表。这是一个以{/ 3}开头的<{p}}

选择DropDownList值Razor后显示列表

1 个答案: