ASP.NET WebForms中Kendo UI控件如何实现服务器端数据绑定？

Absolutely! Server-side data binding is fully supported for Kendo UI in ASP.NET WebForms, and it’s a fantastic solution to tackle performance issues caused by client-side binding—especially with large datasets. Let me break down how to implement this for common controls, starting with the Kendo Grid since that’s where most folks hit performance bottlenecks.

Option 1: Use Kendo UI for ASP.NET WebForms Server Controls (Direct Server Binding) #

If you’re using Telerik’s official Kendo UI for ASP.NET WebForms control suite, server-side binding is straightforward. Let’s use the Kendo Grid as an example:

Step 1: Define the Grid in Your .aspx Page #

First, register the Kendo namespace at the top of your page, then define the grid with your desired columns:

<%@ Register TagPrefix="kendo" Namespace="Kendo.Mvc.UI" Assembly="Kendo.Mvc" %>

<kendo:Grid ID="OrdersGrid" runat="server" AutoGenerateColumns="false">
    <Columns>
        <kendo:GridBoundColumn DataField="OrderID" HeaderText="Order ID" />
        <kendo:GridBoundColumn DataField="CustomerName" HeaderText="Customer" />
        <kendo:GridBoundColumn DataField="OrderDate" HeaderText="Order Date" DataFormatString="{0:MM/dd/yyyy}" />
        <kendo:GridBoundColumn DataField="TotalAmount" HeaderText="Total" DataFormatString="{0:C}" />
    </Columns>
</kendo:Grid>

Step 2: Bind Data in the Code-Behind #

In your .cs file’s Page_Load event, fetch your data (from a database, service, etc.) and bind it to the grid:

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        // Replace this with your actual data retrieval logic
        var orders = GetSampleOrders();
        OrdersGrid.DataSource = orders;
        OrdersGrid.DataBind();
    }
}

// Sample data method (swap this with your DB query)
private List<Order> GetSampleOrders()
{
    return new List<Order>
    {
        new Order { OrderID = 1, CustomerName = "John Doe", OrderDate = DateTime.Now, TotalAmount = 99.99m },
        new Order { OrderID = 2, CustomerName = "Jane Smith", OrderDate = DateTime.Now.AddDays(-1), TotalAmount = 149.50m }
        // Add more records as needed
    };
}

// Sample entity class
public class Order
{
    public int OrderID { get; set; }
    public string CustomerName { get; set; }
    public DateTime OrderDate { get; set; }
    public decimal TotalAmount { get; set; }
}

With this approach, the grid renders fully on the server, embedding data directly into the HTML. No client-side AJAX calls are needed—great for smaller datasets or when you need full server-side control over rendering.

Option 2: Server-Side Data Provider for Kendo jQuery Controls (Optimized AJAX Binding) #

If you’re using Kendo’s jQuery-based client controls (the more common setup for flexible UIs), you can still offload data processing to the server to boost performance. This lets you use features like server-side pagination, sorting, and filtering to avoid loading all data at once.

Step 1: Define the Client-Side Grid #

Set up the Kendo Grid in your page’s JavaScript, pointing to a server endpoint for data:

<div id="ordersGrid"></div>

<script>
    $(document).ready(function() {
        $("#ordersGrid").kendoGrid({
            dataSource: {
                type: "json",
                transport: {
                    read: {
                        url: "<%= ResolveUrl("~/Orders.aspx/GetOrders") %>",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json"
                    }
                },
                schema: {
                    data: "d", // WebMethods wrap JSON responses in a "d" property
                    total: "total", // For pagination, return the total record count
                    model: {
                        fields: {
                            OrderID: { type: "number" },
                            CustomerName: { type: "string" },
                            OrderDate: { type: "date" },
                            TotalAmount: { type: "number" }
                        }
                    }
                },
                pageSize: 10,
                serverPaging: true,
                serverSorting: true,
                serverFiltering: true
            },
            columns: [
                { field: "OrderID", title: "Order ID" },
                { field: "CustomerName", title: "Customer" },
                { field: "OrderDate", title: "Order Date", format: "{0:MM/dd/yyyy}" },
                { field: "TotalAmount", title: "Total", format: "{0:C}" }
            ],
            pageable: true,
            sortable: true,
            filterable: true
        });
    });
</script>

Step 2: Create a WebMethod to Serve Data #

Add a WebMethod in your page’s code-behind to handle data requests, including pagination, sorting, and filtering logic:

using System.Web.Services;
using System.Linq;

[WebMethod]
public static object GetOrders(int page, int pageSize, string sortField, string sortDirection, string filter)
{
    // Fetch all orders (replace with your actual data source)
    var allOrders = GetSampleOrders();
    
    // Apply sorting
    if (!string.IsNullOrEmpty(sortField))
    {
        allOrders = sortDirection == "asc" 
            ? allOrders.OrderBy(o => o.GetType().GetProperty(sortField).GetValue(o, null))
            : allOrders.OrderByDescending(o => o.GetType().GetProperty(sortField).GetValue(o, null));
    }
    
    // Apply basic filtering (extend this based on your needs)
    if (!string.IsNullOrEmpty(filter))
    {
        allOrders = allOrders.Where(o => o.CustomerName.Contains(filter));
    }
    
    // Apply pagination
    var totalCount = allOrders.Count();
    var pagedOrders = allOrders.Skip((page - 1) * pageSize).Take(pageSize).ToList();
    
    // Return data and total count for pagination
    return new { d = pagedOrders, total = totalCount };
}

This approach only loads the data needed for the current page, drastically reducing client-side data load and processing. Perfect for large datasets where client-side binding would cause lag.

General Approach for Other Kendo Controls #

The same logic applies to other Kendo UI controls like DropDownLists, ComboBoxes, or ListViews:

• For server controls: Set the DataSource property in the code-behind and call DataBind().
• For client controls: Use a server-side endpoint (WebMethod, HTTP Handler) to serve data, and configure the client-side data source to point to it.

Key Notes #

• Double-check that you’re using compatible versions of Kendo UI assemblies and scripts to avoid errors.
• For very large datasets, always prioritize server-side pagination/sorting/filtering to minimize client-side overhead.
• Server-side binding makes it easier to enforce data permissions—you can filter sensitive data before sending it to the client.

内容的提问来源于stack exchange，提问作者Surya Prakash