在 mvc 上的 kendo 网格中绑定数据源

Question

首先，这是我使用 kendo ui 的第一部作品。在工作中，我有一些来自数据库的数据，我想将我的 mvc webgrid 替换为令人印象深刻的 kendo 网格。我已经从数据库创建了一个列表，我正在尝试绑定到 kento 网格。设置数据源后。网格仍然是空的。

 public ActionResult Index()
        {
            SqlConnection sqcon = new SqlConnection(conn);
            SqlCommand cmd = new SqlCommand();
            SqlDataAdapter sd = new SqlDataAdapter(cmd);
            DataTable dt = new DataTable();
            cmd.Connection = sqcon;
            cmd.CommandText = "sps_selectemp";
            cmd.CommandType = System.Data.CommandType.StoredProcedure;

            sqcon.Open();
            sd.Fill(dt);
            sqcon.Close();
            List<EmployeeDetails> StudentList = new List<EmployeeDetails>();
            foreach (DataRow dr in dt.Rows)
            {
                EmployeeDetails st = new EmployeeDetails();
                st.ID = Convert.ToInt32(dr["EmpID"]);
                st.FirstName = dr["FirstName"].ToString();
                st.SecondName = dr["SecondName"].ToString();
                st.Email = dr["Email"].ToString();
                st.Gender = dr["Gender"].ToString();
                st.Mobile = dr["Mobile"].ToString();
                st.State = dr["State"].ToString();
                st.City = dr["City"].ToString();
                st.Country = dr["Country"].ToString();


                StudentList.Add(st);
            }
            return View(StudentList.ToList());
        }

然后我添加了对应视图的视图

    @model List<webkendo.Models.EmployeeDetails>
    @(Html.Kendo().Grid<webkendo.Models.EmployeeDetails>()
            .Name("grid")
            .Columns(columns =>
            {
                columns.Bound(c => c.FirstName);

                columns.Bound(c => c.SecondName);
                columns.Bound(c => c.Email);
                columns.Bound(c => c.Gender).Width(150);
            })
            .HtmlAttributes(new { style = "height: 550px;" })
            .Scrollable()
            .Groupable()
            .Sortable()

            .DataSource(dataSource => dataSource
                .Ajax()
                .Read(read => read.Action("getusers", "Home"))
                .PageSize(20)
            )
    )

还是尝试了不同的方法

 public List<EmployeeDetails> getusers()
        {
            SqlConnection sqcon = new SqlConnection(conn);
            SqlCommand cmd = new SqlCommand();
            SqlDataAdapter sd = new SqlDataAdapter(cmd);
            DataTable dt = new DataTable();
            cmd.Connection = sqcon;
            cmd.CommandText = "sps_selectemp";
            cmd.CommandType = System.Data.CommandType.StoredProcedure;

            sqcon.Open();
            sd.Fill(dt);
            sqcon.Close();
            List<EmployeeDetails> StudentList = new List<EmployeeDetails>();
            foreach (DataRow dr in dt.Rows)
            {
                EmployeeDetails st = new EmployeeDetails();
                st.ID = Convert.ToInt32(dr["EmpID"]);
                st.FirstName = dr["FirstName"].ToString();
                st.SecondName = dr["SecondName"].ToString();
                st.Email = dr["Email"].ToString();
                st.Gender = dr["Gender"].ToString();
                st.Mobile = dr["Mobile"].ToString();
                st.State = dr["State"].ToString();
                st.City = dr["City"].ToString();
                st.Country = dr["Country"].ToString();


                StudentList.Add(st);
            }
            return StudentList;
        }

我做错了什么

Answer 1

首先，决定是否要获取所有数据服务器端并将其呈现在网格中，或者是否要使用 AJAX 进行分页等，这对较长的列表更好。你正试图同时做这两件事。

首先，您需要去掉 Read 并设置 ServerOperation(false):

// Your model is the list of data
@(Html.Kendo().Grid(Model)
...
// Tell kendo you are providing the data
.DataSource(dataSource => dataSource
    .Ajax()
    .ServerOperation(false)
    .PageSize(20)
    // No Read since you provide all the data up front
 )

对于第二个选项：

// Tell kendo the type you are going to fetch in the Read
@(Html.Kendo().Grid<EmployeeDetails>()
...
// Tell kendo you want data retrieved via AJAX
.DataSource(dataSource => dataSource
    .Ajax()
    .Read(read => read.Action("getusers", "Home"))
    .PageSize(20)
 )

现在创建对 return JSON 的读取操作，并利用 Kendo 处理分页、过滤、排序等的 DataSourceRequest

public JsonResult getusers([DataSourceRequest] DataSourceRequest request)
{
    // The AJAX generally works with IQueryables so that it can select a 
    // page full or records at a time. Entity Framework makes this easy.
    // You would need to amend for ADO.NET with stored proc.
    var employees = _db.Employees;
    DataSourceResult response = employees.ToDataSourceResult(request);
    return Json(response, JsonRequestBehavior.AllowGet);
}

在 mvc 上的 kendo 网格中绑定数据源

Binding data source in kendo grid on mvc

asp.net-mvc-5

kendo-grid

kendo-asp.net-mvc

kendo-ui-mvc