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.TypeDDL = new List<Type>(TypeDDL);
return View(m);

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

感谢迈克

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

这会将列表与knockout.js绑定

谢谢

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序列化为JSON：

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

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

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

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

4 个答案: