Telerik UI for ASP. NET MVC擁有使用JavaScript和HTML5構(gòu)建網(wǎng)站和移動(dòng)應(yīng)用所需的70+UI部件，來(lái)滿足開發(fā)者的各種需求，提供無(wú)語(yǔ)倫比的開發(fā)性能和用戶體驗(yàn)。它主要是針對(duì)專業(yè)級(jí)的 ASP.NET開發(fā)，通過(guò)該產(chǎn)品的強(qiáng)大功能，開發(fā)者可以開發(fā)出功能豐富、適應(yīng)標(biāo)準(zhǔn)廣泛的響應(yīng)式應(yīng)用程序。

對(duì)于任何長(zhǎng)度的網(wǎng)格，如果用戶沒(méi)有能力將條目過(guò)濾到他們真正感興趣的條目，那么開發(fā)的頁(yè)面體驗(yàn)就會(huì)很差，只有在讓用戶找到他們需要的項(xiàng)目才能體現(xiàn)開發(fā)的應(yīng)用的價(jià)值。

Telerik_KendoUI產(chǎn)品技術(shù)交流群：726377843    歡迎一起進(jìn)群討論

更具體地說(shuō)，雖然提供了用戶可能需要的每個(gè)過(guò)濾選項(xiàng)，但默認(rèn)設(shè)置并不關(guān)注用戶在這個(gè)UI中需要什么。Telerik UI for ASP. NET MVC的網(wǎng)格組件提供了創(chuàng)建專注于用戶實(shí)際需求的過(guò)濾體驗(yàn)所需的所有選項(xiàng)。

下面是添加到應(yīng)用程序默認(rèn)索引中的網(wǎng)格標(biāo)記，例如，cshtml Razor Page(它幾乎MVC視圖中使用的內(nèi)容相同)：

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

從過(guò)濾的角度來(lái)看，標(biāo)記中有趣的元素是最后一個(gè)：可過(guò)濾元素，它通過(guò)將Grid的過(guò)濾模式設(shè)置為“row”，將所有列的過(guò)濾菜單配置為用戶更友好的內(nèi)容。

雖然可過(guò)濾元素是自定義網(wǎng)格（Grid）過(guò)濾功能的第一步，但在自定義網(wǎng)格（Grid）過(guò)濾功能時(shí)，網(wǎng)格（Grid）標(biāo)記中的其他部分也很重要。

數(shù)據(jù)源

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

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

模式

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

列

該元素定義Grid中的列，指定要顯示對(duì)象上的屬性和一些附加選項(xiàng)（例如列的標(biāo)題、數(shù)據(jù)的格式字符串等）。當(dāng)網(wǎng)格顯示一個(gè)對(duì)象時(shí)，篩選是圍繞Grid的列組織的。

代碼

為了記錄，這里是頁(yè)面代碼隱藏文件中的c#代碼。當(dāng)頁(yè)面第一次被請(qǐng)求時(shí)，OnGet方法被自動(dòng)調(diào)用，并加載一個(gè)名為ps的Product對(duì)象集合。

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

這個(gè)例子返回將ps List轉(zhuǎn)換成網(wǎng)格可以使用的JSON結(jié)果：

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

可以設(shè)置網(wǎng)格來(lái)調(diào)用任何想要的Web服務(wù)，開發(fā)者更偏愛Razor Pages將所有內(nèi)容捆綁到一個(gè)包中的方式，也可以很容易地使用實(shí)體框架上下文和表來(lái)構(gòu)建網(wǎng)格的對(duì)象列表。