在 ASP.NET MVC 中使用剑道 UI 网格绑定数据库答案

【问题标题】：Binding database with kendo UI grid in ASP.NET MVC在 ASP.NET MVC 中使用剑道 UI 网格绑定数据库
【发布时间】：2012-08-10 07:43:43
【问题描述】：

我正在尝试在我的 ASP.NET MVC 应用程序中实现 KendoUI Grid 控件。我知道 KendoUI 的人已经举了很多例子，但它对我不起作用。

我的型号代码是：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.SqlClient;
using System.Data.Sql;
using System.Data;

namespace KendoGrid.Models
{
    public class status
    {
        public string SiteId { get; set; }
        public string SiteName { get; set; }
        public string SiteStatus { get; set; }

        public static List<status> StatusInfo()
        {    
            SqlConnection sconn = new SqlConnection(@"Data Source=DS-7071BC8FDEE6\SQLEXPRESS;Initial Catalog=AmanoTest;User ID=sa;Password=india@123");
            SqlCommand cmd = new SqlCommand("select * from SiteMaster", sconn);
            SqlDataAdapter sda = new SqlDataAdapter(cmd);
            DataTable dt = new DataTable();
            sda.Fill(dt);
            status cstat;
            List<status> statlist = new List<status>();
            foreach (DataRow dr1 in dt.Rows)
            {
                cstat = new status();
                cstat.SiteId = dr1[0].ToString();
                cstat.SiteName = dr1[1].ToString();
                cstat.SiteStatus = dr1[2].ToString();

                statlist.Add(cstat);    
            }
            return statlist;
        }
    }
}

我的控制器代码是：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using KendoGrid.Models;
using Kendo.Mvc.UI;

namespace KendoGrid.Controllers
{
    public class statusController : Controller
    {
        //
        // GET: /status/

        public ActionResult Index()
        {
            return View();
        }
        public ActionResult Site()
        {
            //List<status> status = status.GetStatus();
            List<status> temp = status.StatusInfo();
            ViewData["table"] = temp;
            return View();
        }    
    }
}

而我的观点（.cshtml 页面）是：

@model KendoGrid.Models.status
@using Kendo.Mvc.UI 

@*@{
    Layout = null;
 }
*@
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Site</title>
</head>
<body>
    <div>
        @(Html.Kendo().Grid(Model)()
                .Name("Grid")
                .Columns(columns =>
                    {
                        columns.Bound(p => p.siteID);
                        columns.Bound(p => p.siteID);
                        columns.Bound(p => p.siteID);
                    })
            .Pageable()
            .Sortable()
            .Scrollable()
            .Filterable() 
            .DataSource(dataSource => dataSource        
        .Ajax()
        .ServerOperation(false)
        )
     )
   </div>
</body>
</html>

在执行时说：

最好的重载方法匹配 'Kendo.Mvc.UI.Fluent.WidgetFactory.Grid(System.Data.DataTable)' 有一些无效的参数

【问题讨论】：

您将其作为列表传回；但Grid 正在寻找数据表。

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

【解决方案1】：

看起来您在这里缺少了几个步骤。请完成此步骤，这可能会解决您的问题

http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/ajax-binding

【讨论】：

【解决方案2】：

你可以使用

var url = "/DesktopModules/MyServices/API/ATSManageClient/GetAllProjectsTechnologyBased?PortalId=210&tabid=95&Technology=" + selectedplatform;

var element = $("#grid").kendoGrid({
//debugger;
    type: "odata",
    dataSource: {
        transport: {
            read: url
        },
        schema: {
            model: {
                fields: {
                    RecievedDate: { type: "date" }
                }
            }
        },
        pageSize: 100
    },

    columnMenu: true,
    scrollable: true,
    filterable: true,
    resizable: true,
    sortable: true,
    detailTemplate: kendo.template($("#template").html()),
    detailInit: detailInit,
    dataBound: function () {
    },
    columns: [
{
    field: "ProjectID",
    title: "Action",
    template: "<a href='/Dashboard/Communication?ProjectID=#=ProjectID#'>View Communication</a>",
    width: "20%"
},
//s debugger;
 {
     field: "ClientName",
     width: "20%",
     title: "Client",
     template: "<a href='Accounts/UpdateClient.aspx?ClientId=#=ClientID#'> #= ClientName #</a>",
     attributes: {
         title: "#=ClientName#"
     }
 },
  {
      field: "ProjectTitle",
      width: "20%",
      title: "Project",
      template: "<a href='Project/EditProject.aspx?ProjectID=#=ProjectID#'> #= ProjectTitle #</a>",
      attributes: {
          title: "#=ProjectTitle#"
      }
  },
        {
            field: "ColorList",
            width: "20%",
            template: kendo.template($("#template2").html()),
            title: "Status"
        },
        {
            field: "RecievedDate",
            width: "20%",
            title: "Check List Status",
            template: ""
        },
        {
            field: "RecievedDate",
            width: "20%",
            title: "Opened Bugs",
            template: ""
        }

    ],
    pageable: {
        // we don't set any DataSource here
        pageSizes: [100, 150, 200]
    }
});

【讨论】：