Telerik UI for ASP. NET MVC擁有使用JavaScript和HTML5構建網站和移動應用所需的70+UI部件，來滿足開發者的各種需求，提供無語倫比的開發性能和用戶體驗。它主要是針對專業級的 ASP.NET開發，通過該產品的強大功能，開發者可以開發出功能豐富、適應標準廣泛的響應式應用程序。

對于任何長度的網格，如果用戶沒有能力將條目過濾到他們真正感興趣的條目，那么開發的頁面體驗就會很差，只有在讓用戶找到他們需要的項目才能體現開發的應用的價值。

Telerik_KendoUI產品技術交流群：726377843    歡迎一起進群討論

更具體地說，雖然提供了用戶可能需要的每個過濾選項，但默認設置并不關注用戶在這個UI中需要什么。Telerik UI for ASP. NET MVC的網格組件提供了創建專注于用戶實際需求的過濾體驗所需的所有選項。

下面是添加到應用程序默認索引中的網格標記，例如，cshtml Razor Page(它幾乎MVC視圖中使用的內容相同)：

<kendo-grid name="products">
<datasource name="productsDS" type="DataSourceTagHelperType.Ajax">
<transport>
<read url='@Url.Page("/Index","Read")' data="dataFunction" />
</transport>
<schema>
<model>
<fields>
<field name="TotalQuantity" type="number"></field>
<field name="LastDelivery" type="date"></field>
<field name="InStock" type="boolean"></field>
</fields>
</model>
</schema>
</datasource>
<columns>
<column field="ProductId" title="Id" width="100" />
<column field="ProductName" title="Name" width="240"/>
<column field="LastDelivery" format="{0:MMM-dd}" title="Last Delivery" width="150" />
<column field="InStock" title="In Stock" width="150" />
<column field="TotalQuantity" title="Quantity on Hand" width="150" />
</columns>
<filterable enabled="true" mode="row" />
</kendo-grid>

從過濾的角度來看，標記中有趣的元素是最后一個：可過濾元素，它通過將Grid的過濾模式設置為“row”，將所有列的過濾菜單配置為用戶更友好的內容。

雖然可過濾元素是自定義網格（Grid）過濾功能的第一步，但在自定義網格（Grid）過濾功能時，網格（Grid）標記中的其他部分也很重要。

數據源

傳輸元素中的read元素指定將Grid下載到瀏覽器后從哪里獲取數據，傳輸元素還支持更新/刪除/插入請求，因此它的所有調用都作為POST請求發送到數據源。

這也是反映Grid在Razor Page上的唯一區域，將讀取選項設置為指向Razor Page中處理程序方法的URL，使用 Url. Page（只需要傳遞頁面名稱和處理程序名稱）。

模式

該元素允許開發者為網格列出的復雜對象屬性指定數據類型（在本文示例中，是Product對象），默認情況下，所有對象的屬性都假定為字符串類型，所以開發者只需要為那些不是字符串的屬性提供類型：TotalQuantity(一個數字)，LastDelivery(一個日期)和InStock(一個布爾值)。

列

該元素定義Grid中的列，指定要顯示對象上的屬性和一些附加選項（例如列的標題、數據的格式字符串等）。當網格顯示一個對象時，篩選是圍繞Grid的列組織的。

代碼

為了記錄，這里是頁面代碼隱藏文件中的c#代碼。當頁面第一次被請求時，OnGet方法被自動調用，并加載一個名為ps的Product對象集合。

 在瀏覽器中顯示網格時調用OnPostRead方法，使用在網格的傳輸部分中設置的URL。由于Grid的調用總是POST請求，并且將處理程序名稱指定為“Read”，所以方法必須調用OnPostRead。

這個例子返回將ps List轉換成網格可以使用的JSON結果：

public class IndexModel : PageModel
{
public static IList<Product> ps;

public async void OnGet()
{
if ( ps == null)
{
ProductRepo pr = new ProductRepo();
ps = await pr.GetAllAsync();
}
}

public JsonResult OnPostRead([DataSourceRequest] DataSourceRequest request)
{
return new JsonResult(ps.ToDataSourceResult(request));
}
}

可以設置網格來調用任何想要的Web服務，開發者更偏愛Razor Pages將所有內容捆綁到一個包中的方式，也可以很容易地使用實體框架上下文和表來構建網格的對象列表。