MVC 4 - Kendo网格数据绑定

Question

以下是我的项目内容:

控制器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的列名。我知道不应该硬编码数据，但现在我只想在网格上展示一些东西，并且希望数据像现在这样从控制器中获取。

问题：我需要改变什么才能在网格上显示数据？另外，如何从控制器的数据中添加多行到网格中？

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

- JohnAtrik

Answer 1

有两件事情需要做才能让你的代码正常工作。

1. 你需要返回一个列表（或者说任何支持IEnumerable接口的对象）。

2. 你需要调用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并返回数据的操作方法未在演示中显示！

- Mike Dymond

---

太好了，这是我问题的正确解决方案！谢谢。 - JohnAtrik

感谢你提供这个准确的答案。省了我很多时间。 - warunanc

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

- Rajesh Dhiman

---

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

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

希望这有所帮助。

- Anto Subash

---

我从中得到的是 "'Solution1.ViewModels.ViewModelA.MyList' 是一个 '属性'，但被用作了一个 '类型'" 的错误提示。 - JohnAtrik

我尝试了这里列出的所有组合，但我的网格上没有显示任何内容。我只看到列名。 - JohnAtrik

打开开发者工具，检查网络选项卡，并确保读取请求的数据被正确返回。 - Anto Subash

Answer 4

根据我所看到的，你现在的代码应该是可以工作的，只需要将你的返回语句改为这样：

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

你已经有了.Read(read => read.Action("User_Read", "ControllerA"))，所以我不知道其他人在说什么新的东西需要添加或揭示。你可以直接将列表作为DataSourceResult并返回。

- vapcguy