Связывание источника данных в сетке кендо на MVC - PullRequest
Новая
       49

Связывание источника данных в сетке кендо на MVC

0 голосов
/ 29 марта 2019

Прежде всего, это моя первая работа с использованием kendo ui. В работе у меня есть некоторые данные из базы данных, я хотел бы заменить свою сетку MVC на впечатляющую сетку кендо. Я создал список из базы данных, и я пытаюсь привязать к сетке Кенто. После настройки источника данных. Тем не менее сетка остается пустой. 

 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;
        }

Что я делаю не так

1 Ответ

1 голос
/ 29 марта 2019

Во-первых, решите, собираетесь ли вы получать все данные на стороне сервера данных и представлять их в сетке, или вы собираетесь использовать 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)
 )

Теперь создайте действие чтения для возврата JSON и воспользуйтесь преимуществом DataSourceRequest Kendo, который обрабатывает разбиение на страницы, фильтрацию, сортировку и т. Д. 

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);
}
...