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

執行程式,華麗的文字編輯器馬上出現,很酷吧!!

以上只是簡易示範,實務上會再建議做些調整:

  1. 在/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> 
  2. 把Html.Telerik().StyleSheetRegistrar()移到/Views/Shared/_Layout.cshtml的<head>區、Html.Telerik().ScriptRegistrar()加在/Views/Shared/_Layout.cshtml的最後端,或是另外建一個專屬Layout給要引用Telerik元件的cshtml使用,如此可省掉重複程式碼。

PS: 關於Telerik MVC元件的用法,可參考Telerik的線上Demo網站,每一個範例都附了程式碼,是很棒的學習資源。

歡迎推文分享:
Published 05 June 2011 03:16 AM 由 Jeffrey
Filed under: ,
Views: 28,003



意見

# 亞米斯 said on 05 June, 2011 09:35 AM

看文之後才知道 原來 Telerik MVC 是Open Source

馬上來玩看看 結果 用了一個 Calendar 想要套個中文

@(Html.Telerik().ScriptRegistrar().Globalization(true).DefaultGroup(

   group => group.Combined(true).Compress(true)))

結果 該顯示 日一二三四五六 的地方 都變成星星.....不知道如何下手改阿

# Jeffrey said on 06 June, 2011 06:19 PM

to 亞米斯, 請參考blog2.darkthread.net/post-2011-06-07-telerik-mvc-calendar-daynames.aspx

# benlee said on 14 June, 2011 05:42 AM

我的認知是你的商品內有摻入GPL的東西,整個商品就要變成GPL(open source)。

詳細點說,當你用GPL的元件製作網站,接下來會有兩種情況。

情況一、你利用網站賣廣告或銷售商品,並靠廣告或商品賺錢。

這樣GPL元件只是個工具,你不需要購買商用授權,也不用將網站open source。

情況二、你賣網站(技術)給別人,靠製作網站賺錢。如此GPL元件將成為你商品的一部分。一旦你賣GPL元件,你整個商品就必須也用GPL授權。此刻只有將網站GPL化(open source)或是購買商用授權兩條路可選,否則就算侵權。

# Jeffrey said on 14 June, 2011 07:15 AM

to benlee,感謝補充! 看起來應與我的認知相同,只要不把含GPL元件(成本)的程式本體當成商品販售,將程式運作的結果當成服務販賣是被允許且不受GPL限制的。

因此在企業內部或是企業對外網站引用GPL元件是可行的,但若要將程式本身也當成商品賣給別人,就算其中只有用到一丁點GPL,也必須用整個程式(這就是GPL的"感染"特性)以Open Source方式散佈。

# 亂馬客 said on 15 June, 2011 11:43 PM

請問一下,原本是<%="Test"%>,在Razor要如何表示呢? 謝謝!

# Jeffrey said on 16 June, 2011 05:12 PM

to 亂馬客, 寫成@("Test")就可以了。不確定Razor會怎麼決定判斷程式結尾時,可以用@(....)來包住程式片斷,它會圈出相當於傳統<% ... %>的一段程式碼專屬區塊

# player said on 14 March, 2013 03:53 AM

www.telerik.com/.../individual-kendoui-mvc.aspx

它賣 US$999 了?

那有別套MVC的月曆套件嗎?

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<June 2011>
SunMonTueWedThuFriSat
2930311234
567891011
12131415161718
19202122232425
262728293012
3456789
 
RSS
創用 CC 授權條款
【廣告】
twMVC
最新回應

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication