在MVC 4中如何将JSON绑定到DropDownList？附代码及JSON数据

嘿，这事儿不难，我给你拆解成几步来做，保证你能搞定MVC4里把JSON绑定到DropDownList的需求：

你现有的Teams模型里，id是int类型，但JSON返回的id是字符串格式（"20"）——不过反序列化时会自动转成int，不用太担心。另外，我们需要把JSON里的团队列表转换成SelectListItem集合，所以模型里的names属性正好用来存这个下拉数据源，team属性可以用来绑定选中值。

为了让反序列化更清晰，建议新建一个只存id和name的小类，避免和视图模型混在一起，职责更明确。

你已经用到了JavaScriptSerializer，接下来把反序列化后的团队列表转成下拉控件需要的格式，完整控制器代码如下：

using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
using System.Web.Script.Serialization;

public class TeamsController : Controller
{
    public ActionResult Teams()
    {
        // 替换成你从网络面板拿到的真实JSON字符串
        var jsonString = "[{\"id\":\"20\",\"name\":\"System Team\"}]";
        
        var serializer = new JavaScriptSerializer();
        // 反序列化到我们新建的TeamItem类集合
        var teamDataList = serializer.Deserialize<List<TeamItem>>(jsonString);
        
        // 转换成DropDownList需要的SelectListItem集合
        var dropDownOptions = teamDataList.Select(team => new SelectListItem
        {
            Text = team.name, // 下拉框显示的文本
            Value = team.id   // 对应的值（这里JSON是字符串，直接用就行，若要转int也可以ToString()）
        }).ToList();
        
        // 给视图模型赋值
        var viewModel = new Teams
        {
            names = dropDownOptions
        };
        
        return View(viewModel);
    }
    
    // 专门用来接收反序列化数据的内部类
    private class TeamItem
    {
        public string id { get; set; }
        public string name { get; set; }
    }
}

如果你的项目里已经用了Newtonsoft.Json（Json.NET），也可以替换成更简洁的反序列化代码：

var teamDataList = JsonConvert.DeserializeObject<List<TeamItem>>(jsonString);

打开对应的Teams.cshtml视图，用Html.DropDownListFor来做强类型绑定，这样后续提交表单时也能自动绑定选中值：

@model YourNamespace.Teams <!-- 替换成你的Teams类所在的命名空间 -->

@using (Html.BeginForm())
{
    <div class="form-group">
        @Html.LabelFor(m => m.team, "选择团队")
        <!-- 第一个参数是绑定的选中值属性，第二个是数据源，第三个是默认提示文本 -->
        @Html.DropDownListFor(m => m.team, Model.names, "请选择一个团队", new { @class = "form-control" })
        @Html.ValidationMessageFor(m => m.team)
    </div>
    
    <button type="submit" class="btn btn-primary">提交</button>
}

如果只是单纯展示下拉列表不需要提交，也可以用Html.DropDownList：

@Html.DropDownList("SelectedTeam", Model.names, "请选择团队")

• 强类型的TeamItem比用dynamic更安全，能避免拼写错误，推荐使用。
• 确保视图里的@model命名空间和你的Teams类完全匹配，不然会报错。

内容的提问来源于stack exchange，提问作者BVP