无法使用 MVC 在下拉列表中显示数据

Question

我的页面上有一个下拉菜单，显示 class 中硬编码的数据。

我有以下 class 状态：

public class State
{
    public string StateCode {get; set;}
    public string StateName { get; set; }

    public static IQueryable<State> GetStates()
    {
        return new List<State>
        {
            new State{
                StateCode="DE",
                StateName="Delaware"
            },
            new State{
                StateCode="NJ",
                StateName="New Jersey"
            },
            new State{
                StateCode="PA",
                StateName="Pennsylvania"
            }

        }.AsQueryable();
    }
}

我的家庭控制器有以下操作：

public ActionResult Index()
    {
        return View();
    }

    public ActionResult StateList()
    {
        IQueryable states = State.GetStates();
        if (HttpContext.Request.IsAjaxRequest())
        {
            return Json(new SelectList(states,
                "StateCode",
                "StateCode"), JsonRequestBehavior.AllowGet
                );
       }
        return View(states);
    }

这是我的观点：

@section scripts {
<script type="text/javascript">
$(function () {
    $.getJSON("/Home/States/List", function (data) {
        var items = "<option>Please Select</option>"
        $.each(data, function (i, state) {
            items += "<option value='" + state.Value + "'>" + state.Text + "</option>";
        });
        $("States").html(items);
    });


});

</script>
}

@using (Html.BeginForm())
{

<label for="States"></label>
<br />
<select id="States" name="States"></select>

}

我也将此添加到我的路由中：

routes.MapRoute(
            "StatesList",
            "Home/States/List",
            new { controller = "Home", action = "StateList" }
        );

我没有收到任何错误，但我的下拉框中也没有显示任何数据。我尝试调试我的控制器，我可以看到状态数据进入了动作中的对象状态。谁能帮我诊断问题？

Answer 1

$("States").html(items); 需要是 $("#States").html(items);（散列表示 jQuery ID Selector）

旁注：

IQueryable GetStates() should really be IEnumerable GetStates()（参考链接文档）
不需要额外的开销来创建 SelectList 在 StateList() 方法中。它可以简单地 return Json(states, JsonRequestBehavior.AllowGet); 然后在 ajax success 功能：items += "<option value='" + state.StateCode + "'>" + state.StateName + "</option>";
目前如果选择第一个选项（"Please Select"），它将 post 返回我怀疑不是你的值 Please Select 想。 Intead，给选项一个 null 值（然后你可以使用与 [Required] 属性一起强制选择）。例如：var items = $('<option>Please Select</option>').val('');

无法使用 MVC 在下拉列表中显示数据

Can't display data in a dropdown with MVC

asp.net-mvc

dropdownbox