Kendo UI 使用视图模型创建 ButtonGroup 控件答案

【问题标题】：Kendo UI Create ButtonGroup control using a viewmodelKendo UI 使用视图模型创建 ButtonGroup 控件
【发布时间】：2018-02-15 16:15:53
【问题描述】：

我正在尝试找到一个使用视图模型创建 ButtonGroup 的示例。我该怎么做？

   @(Html.Kendo().ButtonGroup().Name("PredictionType").Items(t =>
                               {
                                   t.Add().Text("Monthly");
                                   t.Add().Text("Weekly");
                                   t.Add().Text("Yearly");
                               }))

【问题讨论】：

视图模型中的内容是什么？文本？
是的，理查德，我不想要静态项目。

标签： kendo-ui kendo-asp.net-mvc telerik-mvc buttongroup

【解决方案1】：

ButtonGroup没有有一个DataSource 配置项，如Grid 或DropDownList。使用 HtmlHelper 中的 Razor 代码块循环添加的项目列表。此示例让控制器创建项目列表。

视图 - 视图\Example1\Index.cshtml

@model Example.ViewModels.MySettings

@{
    ViewBag.Title = "Index";
}

<div>
    Prediction Type
    @(Html.Kendo().ButtonGroup()
        .Name("PredictionType")
        .Items(t =>
        {
            foreach (var item in Model.PredictionTypeItems)
            {
                t.Add().Text(item);
            }
        })
    )
</div>

<div>
    Exponent Level
    @(Html.Kendo().ButtonGroup()
        .Name("ExponentLevel")
        .Items(t =>
        {
            foreach (var item in Model.ExponentLevelItems)
            {
                t.Add().Text(item.ToString());
            }
        })
    )
</div>

模型 - ViewModels\MySetting.cs

using System.Collections.Generic;

namespace Example.ViewModels
{
    public class MySettings
    {
        public IList<string> PredictionTypeItems { get; set; }
        public IList<int> ExponentLevelItems { get; set; }

    }
}

控制器 - Controllers\Example1Controller.cs

using System.Collections.Generic;
using System.Web.Mvc;
using Example.ViewModels;

namespace Example.Controllers
{
    public class Example1Controller : Controller
    {
        public ActionResult Index()
        {
            var model = new MySettings {
                PredictionTypeItems = new List<string> { "Monthly", "Weekly", "Yearly" },
                ExponentLevelItems = new List<int> { -2, -1, 0, 1, 2 }

            };

            return View(model);
        }
    }
}

更稳健的方案是项目来自数据库表。

【讨论】：