MVC 4 - 剑道网格数据绑定答案

【问题标题】：MVC 4 - Kendo Grid Data BindingMVC 4 - 剑道网格数据绑定
【发布时间】：2014-03-05 13:34:58
【问题描述】：

这是我项目中的所有内容：

控制器A

public ActionResult Index()
{
    return View();
}

public ActionResult User_Read()
{
    ViewModels.ViewModelA objView = new ViewModels.ViewModelA();

        objView.MyList = new List<ViewModels.SomeClass>();
        objView.MyList.Add(new ViewModels.SomeClass() { FirstName = "FN1", Supervisor = "SV1" });
        objView.MyList.Add(new ViewModels.SomeClass() { FirstName = "FN2", Supervisor = "SV2" });

        return Json(objView, JsonRequestBehavior.AllowGet);
}

ViewModelA

public class ViewModelA
{
    public List<SomeClass> MyList { get; set; }
}

public class SomeClass
{
    public string FirstName { get; set; }
    public string Supervisor { get; set; }
}

Index.cshtml

@using Kendo.Mvc.UI

@(Html.Kendo().Grid<Solution1.ViewModels.ViewModelA>()
    .Name("grid")
    .Columns(columns =>
        {
            columns.Bound(c => c.FirstName);
            columns.Bound(c => c.Supervisor);
        })
        .HtmlAttributes(new { style = "height: 380px" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("User_Read", "ControllerA"))
        )
)

详细信息：当我运行此页面时，页面加载正常，没有错误，但是页面上没有填充任何数据。所以，网格在那里，但它只显示 FirstName 和 Supervisor 的列名。我知道你不应该硬编码数据，但我现在只是想在网格上显示一些东西，我希望数据像原来一样来自控制器。

问题：我需要更改哪些内容才能在网格上显示数据？ ~~另外，从Controller中的数据，如何才能在网格中添加多于一行？~~

更新：我最初提出的问题已部分解决。仍然需要帮助才能将数据显示到网格中。

【问题讨论】：

标签： c# asp.net-mvc-4 razor kendo-grid

【解决方案1】：

要让代码正常工作，您需要做两件事。

你需要返回一个列表（或者实际上任何支持 IEnumerable 接口的东西）。
您需要通过调用 ToDataSourceResult 来格式化返回数据。

因此

    public ActionResult User_Read([DataSourceRequest]DataSourceRequest request)
    {
        var model = new List<ViewModelA>()
        {
            new ViewModelA()
            {
                FirstName = "Name",
                Supervisor = "Mgr",
            },
            new ViewModelA()
            {
                FirstName = "FirstName",
                Supervisor = "Supervisor",
            },
        };

        return Json(model.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
    }

其他一切都与您在编辑之前的原始示例中完全相同。

查看 Kendo 演示解决方案并研究示例。它不是最好的演示，有时您需要深入研究源代码以准确了解发生了什么，而不是仅仅依靠演示似乎暗示您需要什么。例如，在通过 Ajax 填充网格演示中，由 Ajax 调用并返回数据的实际操作方法在演示中没有显示！

【讨论】：

太好了，这是解决我问题的正确方法！谢谢。
感谢您的准确回答。为我节省了十几个小时

【解决方案2】：

您需要将网格绑定到列表才能显示多行。

例如：

public class ViewModelA
{
    public List<SomeClass> MyList { get; set; }
}
public class SomeClass
{
    public string FirstName { get; set; }
    public string Supervisor { get; set; }
}

然后将值分配给列表以将它们显示在您的网格中。

ViewModelA objView = new ViewModelA()  ;
objView.MyList = new List<SomeClass>();
objView.MyList.Add(new SomeClass() { FirstName = "Test", Supervisor = "SomeValue" });
objView.MyList.Add(new SomeClass() { FirstName = "AnotherTest", Supervisor = "SomeMore" });

将您的 ViewModelA.MyList 传递给网格以显示所有元素

@(Html.Kendo().Grid<Solution1.ViewModels.ViewModelA.MyList>()
    .Name("grid")
    .Columns(columns =>
        {
            columns.Bound(c => c.FirstName);
            columns.Bound(c => c.Supervisor);
        })
        .HtmlAttributes(new { style = "height: 380px" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("User_Read", "ControllerA"))
        )
)

【讨论】：

这回答了我一半的问题，但网格仍然没有显示数据。我将更新我的原始帖子以反映您提供的信息。

【解决方案3】：

这里有一些你必须做的改变

您的数据在MyList 中可用，但您正在为ViewModelA 创建网格，因此您必须从控制器返回MyList 并使用该列表构建网格。

在控制器中

    public ActionResult User_Read()
    {
        ViewModels.ViewModelA objView = new ViewModels.ViewModelA();

            oViewModelA objView = new ViewModelA()  ;
            objView.MyList = new List<SomeClass>();
            objView.MyList.Add(new SomeClass() { FirstName = "Test", Supervisor =                   "SomeValue" });
            objView.MyList.Add(new SomeClass() { FirstName = "AnotherTest", Supervisor = "SomeMore" });

            return Json(objView.MyList, JsonRequestBehavior.AllowGet);
    }

在 Index.cshtml 中

@using Kendo.Mvc.UI

@(Html.Kendo().Grid<SomeClass>()
    .Name("grid")
    .Columns(columns =>
        {
            columns.Bound(c => c.FirstName);
            columns.Bound(c => c.Supervisor);
        })
        .HtmlAttributes(new { style = "height: 380px" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("User_Read", "ControllerA"))
        )
)

希望这会有所帮助。

【讨论】：

'Solution1.ViewModels.ViewModelA.MyList' 是一个“属性”，但我从中得到的是“类型”。
我尝试了此处列出的所有组合，但我的网格上没有显示任何内容。我看到的只是列名。
打开开发工具并检查网络选项卡，确保为读取请求正确返回数据。

【解决方案4】：

据我所见，您所拥有的应该可以工作，只需将您的 return 语句更改为：

return Json(objView.MyList.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);

您已经拥有.Read(read => read.Action("User_Read", "ControllerA"))，所以我不知道其他人在哪里说这是要添加的新内容或启示。您可以直接将列表设为 DataSourceResult 并返回它。

【讨论】：