ASP.NET MVC CRUD之路 (2) - Telerik Extensions for ASP.NET MVC Open Source Project
【系列文章】
由WebForm轉進ASP.NET MVC，面臨到的一項大挑戰是原本在WebForm開發時已經發展或尋找到製作網站常用的小元件(像是日期選擇器、只能輸入數字的欄位…)，因WebForm與MVC特性上的差異，大多都無法再沿用，有種慣用武器忽然被沒收的慌張感，因此在ASP.NET MVC環境中尋找過去慣用控制項的替代品也是一項重要工作。
經過一些評估，發現Telerik Extensions fro ASP.NET MVC這套為ASP.NET MVC量身打造的優秀網頁控制項套件，使用jQuery及頗為簡潔的HTML標籤結構，提供了Grid, ComboBox, Calendar, Menu, TabStrip, TreeView... 等網站開發不可或缺的元件。而最棒的一點，除了商業版本外，Telerik還透過CodePlex提供GPL v2 的Open Source版本，意味著若不是要包在產品中發行(指將程式碼散佈給他人)，我們可以免費取得使用授權，並在專案中自由引用及修改。 (聲明: 我不是Open Source方面的專家，但依查到的案例解釋，只要不散佈程式碼，GPLv2條歀就不會發揮效果，連對外網站亦可放心使用。[若認知有誤歡迎指正])
商業版提供了Visual Studio Extension工具，能快速建立特製專案(或轉換現有專案)以支援Telerik Extensions for ASP.NET MVC，會在專案中引用Telerik.Web.Mvc.dll並加入相關css、js檔案。若想在專案中要引用Open Source版Telerik Extensions for ASP.NET MVC，自然要回歸王道--又該NuGet上場的時刻了!!
在專案中透過Add Library Package Reference可找到TelerikMvcExtensions，目前的最新版是2011.1.315，與Codeplex上的最新版本同步。安裝後，在Content, Scripts目錄下會新增名為2011.1.315的子目錄，裡面分別被放入Stylesheet相關檔案及Javascirpt，同時web.config也會新增一些設定，專案就能使用Telerik為ASP.NET MVC打造的專屬元件囉!!
修改Index.cshtml試玩一下: 在Index.cshtml的最開始要宣告@using Telerik.Web.Mvc.UI， 網頁主體用Html.Telerik().Editor()在網頁加入一個RichText編輯器；而網頁最後一段則透過Html.Telerik().StyleSheetRegistrar()為網頁加入telerik.common.css及telerik.default.css等Style設定，Html.Telerik().ScriptRegistrar()則是會依使用到的元件自動加上必要的<script src=”…”>。值得一提的是，呼叫Combined(true)及Compress(true)可啟用Telerik提供的asset.axd替我們合併及壓縮js、css等檔案，提高網站運轉效率。
@using Telerik.Web.Mvc.UI
<div>
@Html.Telerik().Editor().Name("txtEditor")</div>
@(Html.Telerik().StyleSheetRegistrar().DefaultGroup(group =>
group.Add("telerik.common.css").Add("telerik.default.css") .Combined(true).Compress(true)))
@(Html.Telerik().ScriptRegistrar().DefaultGroup(
group => group.Combined(true).Compress(true)))
執行程式，華麗的文字編輯器馬上出現，很酷吧!!
以上只是簡易示範，實務上會再建議做些調整:
- 在/Views/Web.config加入Namespace，如此就不用每個cshtml加@using Telerik.Web.Mvc.UI
<pages pageBaseType="System.Web.Mvc.WebViewPage">
<namespaces>
<add namespace="System.Web.Mvc" />
<add namespace="System.Web.Mvc.Ajax" />
<add namespace="System.Web.Mvc.Html" />
<add namespace="System.Web.Routing" />
<add namespace="Telerik.Web.Mvc.UI"/>
</namespaces>
</pages>
- 把Html.Telerik().StyleSheetRegistrar()移到/Views/Shared/_Layout.cshtml的<head>區、Html.Telerik().ScriptRegistrar()加在/Views/Shared/_Layout.cshtml的最後端，或是另外建一個專屬Layout給要引用Telerik元件的cshtml使用，如此可省掉重複程式碼。
PS: 關於Telerik MVC元件的用法，可參考Telerik的線上Demo網站，每一個範例都附了程式碼，是很棒的學習資源。