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

Question

我有模特清单

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对象，以便可以使用淘汰表将其设置为dropdownlist

谢谢迈克

Answer 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'" 
})

这将与淘汰表绑定列表

谢谢

Answer 2

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

而是在您的控制器上创建一个返回JSON结果的方法

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

    return Json(list, JsonRequestBehavior.AllowGet);
}

这应该创建一个json响应，您可以使用它来填充您的ko viewmodel

Answer 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>

Answer 4

您需要将ViewBag.clubTypeDDL序列ViewBag.clubTypeDDL JSON：

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

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

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