如何将 MVC 5 列表绑定到 JSON 对象答案

【问题标题】：How do I bind a MVC 5 list to a JSON object如何将 MVC 5 列表绑定到 JSON 对象
【发布时间】：2014-08-15 21:05:27
【问题描述】：

我的模型上有一个列表

public SelectList listItems { get; set; }

然后我使用 linq to sql 选择项目

var TypeDDL = TypeMethod();

private Type[] TypeMethod()
        {
            var TypeDDL = (from c in db.TypeLists select new Type { Type = c.Type, cid = c.ID }).ToArray();
            return TypeDDL;
        }

然后我将其设置为 viewbag 项

ViewBag.TypeDDL = new List<Type>(TypeDDL);
return View(m);

我现在需要知道的是如何将它绑定到 Json 对象，以便我可以使用 knockoutjs 将其设置为下拉列表

谢谢麦克

【问题讨论】：

可以使用JsonResult

标签： c# asp.net-mvc json knockout.js

【解决方案1】：

最好的方法是使用 html.raw 帮助器并将您的 viewbag 项分配给一个对象

var TypeList = Html.Raw(JsonConvert.SerializeObject(ViewBag.TypeDDL));

然后在 JavaScript 中

<script type="text/javascript">
    $(document).ready(function ()
    {
        var vm = new ViewModel();            
        vm.Type = ko.mapping.fromJS(@TypeList);
        ko.applyBindings(vm);
    });
</script>

请注意 iv 在本示例中使用了 jQuery dom 准备就绪

然后你会想在你的剃刀视图中使用@html.DropDownList：

@Html.DropDownList("Typelist", (SelectList)Model.listItems, new { 
    id = "id", 
    data_bind = " options: Type, optionsText: 'Type', optionsValue: 'id'" 
})

这会将列表与 knockout.js 绑定

谢谢

【讨论】：

这似乎是最好的方法，谢谢艾伦，但我不能给你投票，对不起
另外，这是使用完美的淘汰赛:)
一旦我也能对您的答案投票，感谢您的帮助。

【解决方案2】：

您无需涉及视图即可实现此目的。

相反，在控制器上创建一个返回 JSON 结果的方法

public ActionResult YourEndpointName()
{
    var list = TypeMethod();

    return Json(list, JsonRequestBehavior.AllowGet);
}

这应该会创建一个 json 响应，您可以使用它来填充您的 ko 视图模型

【讨论】：

【解决方案3】：

我通常会先序列化控制器中的对象。

ViewBag.clubTypeDDL = JsonConvert.Serialize(new List<Type>(TypeDDL));

然后把它放在视图上一个隐藏的输入框里：

<input id="TypeDDL" value="@ViewBag.clubTypeDDL "/>

然后用脚本：

<script>
    var json = $("#TypeDDL").val(); /// here is your json string
    // use this wherever you need
</script>

【讨论】：

【解决方案4】：

需要将ViewBag.clubTypeDDL序列化为JSON：

<script>
var ClubTypes = @Html.Raw(Json.Encode(ViewBag.clubTypeDDL));
</script>

然后将下拉元素的options 绑定到它：

<select data-bind="options: ClubTypes"></select>

【讨论】：