Rock N Code: Telerik Extensions for ASP .NET MVC

MVC有點黏又不太黏的關係，讓前端開發相較傳統ASP .NET有點點不順手，尤其"查詢"一直佔系統的大宗，如何將大量複雜的資料以優美介面呈現予用戶就顯得非常重要！

網路上不少佛心來的第三方控件，本文將介紹TELERIK公司開發的Telerik Extensions for ASP.NET MVC(以下簡稱Telerik)

和其他open source一樣可使用MSI檔auto install或自解壓縮檔至對應路徑，本人懶惰就直接使用MSI搞定，但若有特殊版本需求請自行上網download解壓。

另外要特別注意Telerik支援的MVC版本，以本文2011 Q2(2011/7/12 release)為例支援MVC 1、2、3，但並非""同時支援""多重版本，不同版本請refrence相應的Telerik.Web.Mvc.dll

Telerik安裝完畢在C:\Program Files的檔案架構

VS2010多了專屬Telerik的Project Template

若專案規模不大，又懶得手動設定所需的相關檔案，可參照上圖選用Telerik MVC 3 Web Application，毋須額外設定即可著手撰寫專案 0 . <

話說回來，採用MVC開發的系統都不小，要如何在團隊規劃的架構下順順使用Telerik呢？
假設Telerik安裝完畢且MVC開發環境也備齊，使用方式如下：

1. 於MVC的WEB專案參考Telerik.Web.Mvc.dll(注意MVC版本)

2. web.config加入下列設定
<add namespace="Telerik.Web.Mvc.UI"/>

<sectionGroup name="telerik"><section name="webAssets" type="Telerik.Web.Mvc.Configuration.WebAssetConfigurationSection,
Telerik.Web.Mvc" requirePermission="false" /><sectionGroup>

<add name="asset" preCondition="integratedMode" verb="GET,HEAD" path="asset.axd" type="Telerik.Web.Mvc.WebAssetHttpHandler,
Telerik.Web.Mvc" />

<telerik> <webAssets useTelerikContentDeliveryNetwork="true" /> telerik>
新版(Version Q1 2012)設定請看此→Telerik Extensions for ASP .NET MVC(Version Q1 2012)

3. 加入JavaScript file並註冊

以本文使用的2011 Q2為例，在C:\Program Files\Telerik\Extensions for ASP.NET MVC Q2 2011\Scripts內附""2011.2.712""資料夾，包括Telerik所用的全數JS，請將這個以日期命名的資料夾整份複製(也就是說Scripts資料夾內有2011.2.712資料夾)到WEB專案的Scripts資料夾。

註冊位置在所有component之後與< / body>之前
<%:Html.Telerik().ScriptRegistrar().Globalization(true).DefaultGroup(g => g.Combined(true).Compress(true)) %>
4. 加入CSS file並註冊
以本文使用的2011 Q2為例，在C:\Program Files (x86)\Telerik\Extensions for ASP.NET MVC Q2 2011\Content內附""2011.2.712""資料夾，包括Telerik所用的全數CSS，請將這個以日期命名的資料夾整份複製到WEB專案的Content資料夾。

註冊位置於head tag之間

<head><%:
Html.Telerik().StyleSheetRegistrar().DefaultGroup(g =>
g.Add("telerik.common.css").Add("telerik.vista.css").Add("telerik.rtl.css").Combined(true).Compress(true))%> < /head>

完成上述步驟就可以安心服用Telerik各類花俏component

Telerik Extensions for ASP .NET MVC

沒有留言: