一步一腳印 進入 WebMatrix 世界 (五) =>刀鋒試煉之三 Razor語法練習

這幾天忙開學,修練進度慢了下來,這幾天看了MSDN幾篇關於Razor語法介紹的文章,把一些自己的筆記重點摘錄下來:

1.Razor 語法是以 "@" 這個magic符號(蠻貼切的)為語法的標記,但是如果網頁中有電子郵件地址是否會產生混淆?

我們以下面例子為例實做一下,在WebMatrix範例站台上新增一個cshtml的檔案在<body>中加入mail@mail.com ,瀏覽測試一下

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        mail@mail.com
    </body>
</html>

執行結果畫面

image

IIS會自動把它認為是電子郵件地址,因為Razor 語法在@之前有空格或一行的開頭,才會視為程式碼或值在其中,所以正常的電子郵件電址是不會被誤認為程式碼。

舉例以下mail@Page.Title與mail @Page.Title只差別在mail與@之間的空格:

@{
    Page.Title = "測試資料";
}
<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
          <p>mail @Page.Title</p>
        <p>mail@Page.Title</p>
    </body>
</html>

執行結果

image

2.Razor 語法的註解,是以@*程式碼區塊*@的方式,以上為例如果把mail @Page.Title 改為 mail @*Page.Title*@

執行結果

image

代表Page.Title的值被註解掉了,@*程式碼區塊*@,中間的程式碼區塊可以是多行。

3.@符號後可以接單行的程式碼或值,舉例

@{
    Page.Title = "測試資料";
}
<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <p>mail @(3>4)</p>
        <p>mail @Page.Title</p>
    </body>
</html>

執行的結果

image

其中 @(3>4) 運算傳回False,而 @Page.Title傳回"測試資料" 。

4.如果程式碼有多行,在@符號之後要以{}將程式碼區塊包在其中,舉例

@{
    int x=0;
    Page.Title = "測試資料";
}
<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <p> @x</p>
        <p> @Page.Title</p>
    </body>
</html>

執行結果

image

5.如果我們要在多行的程式碼區塊中的某單行程式碼中加入呈現程式碼內容的文字,就必須在單行程式碼前加上‘@:’

舉例Page.Title是網頁的抬頭屬性,如果我們要在網頁一行中呈現以下內容

本頁的抬頭是: 測試資料.

@{
    Page.Title = "測試資料";
}
<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
     
     
        <p> @{
            @:本頁的抬頭是: @Page.Title. 
            }
</p>
    </body>
</html>

執行結果

image

6.如果要在程式區塊中加入單行或多行註解直接使用VB或C#的註解方式

以C#為例,C#單行註解是//,多行註解是/* 程式區塊 */

@{
    Page.Title = "測試資料";
    int x=0;
    x++;
}
<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
     
     
        <p> @{
           // @:本頁的抬頭是: @Page.Title. 
            @:x這個變數的值為: @x
            }
</p>
    </body>
</html>

執行結果,被註解的// @:本頁的抬頭是: @Page.Title. 這一行並沒有出現。

image

在WebMatrix的編輯器,會自動把註解的部分用不同顏色的字體呈現,蠻方便的。

image

7.Razor 語法有一點我認為最棒的地方,就在html指令與script指令的混合處理,比起ASP、JSP、PHP方便多了,在以前寫PHP或PERL CGI與ASP時,如果在程式碼流程中夾雜輸出html碼,必須在程式中對於html碼進行轉換為字串處理,再用script語言的輸出函數進行輸出,在Razor中不用這樣麻煩,只要在流程中{}中,Razor 自動會分辨html碼與@符號後的程式碼,以下為例:

@{
    Page.Title = "測試資料";
    int x=0;
    x++;
}
<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
     
     
        <p> @{
           // @:本頁的抬頭是: @Page.Title. 
            @:x這個變數的值為: @x
            }
</p>
        @if((x%2)==1) { 
     <p>現在時間是 @DateTime.Now </p>
} else { 
     <p>今天是: </p> @DateTime.Now
}
    </body>
</html>

執行結果

image

8.從第7點我們可知道,我們可以很方便將程式區塊中加入html碼,這個實在太方便了,舉例來說我們要動態輸出一個表格

image

我們只要這樣寫即可,把這一段加入即可產生上述的結果

 <table border="1">
        <tr><td>座號編號 </td><td>成績 </td></tr>
@{
    var countNum = 0; 
 while (countNum < 10) {
        countNum += 1;
        <tr><td>編號: @countNum </td>
        <td>成績: @(countNum*10) </td></tr>
    }
}
    </table>

一步一腳印 進入 WebMatrix 世界 (四) =>刀鋒試煉之二、如何啟用Microsoft Visual Web Developer 2010 Express ?

接續上一回(一步一腳印 進入 WebMatrix 世界 (三) =>刀鋒試煉之一、WebMatrix編輯功能介紹),WebMatrix雖然已經具備簡單的編輯功能,但是如果需要其他開發程式所需的功能,例如程式除錯的等功能,搭配其他工具會比較便利,我們可以在安裝WebMatrix時附帶安裝的免費的Microsoft Visual Web Developer 2010 Express進行除錯的功能,此版本雖然沒有Visual Studio 2010 專業版那麼完整強大的功能,不過如果單純進行專案編輯、除錯、發佈也足夠我們使用了,切換至"檔案"的頁面在WebMatrix的主程式畫面右上角有一個Visual Studio符號,點選此按鈕會起動Microsoft Visual Web Developer 2010,如果系統在安裝WebMatrix之前已經安裝了Visual Studio 2010,則不會啟用免費的Microsoft Visual Web Developer 2010,而會啟用先前所安裝的Visual Studio 2010版本。

image

以我們的範例網站為例,在我的WIN2003伺服器並事先並沒有安裝任何Visual Studio 2010版本,所以在啟用WebMatrix上的Visual Studio 2010功能,會啟用Microsoft Visual Web Developer 2010 Express,一開始啟用時,因為原本範例專案發佈的目標是ASP.NET2.0,但是安裝WebMatrix的.net framework是4.0,所以可能會產生某些功能無法正常運作的警示,所以我們可以依照指示將此站設成配合2.0的設定。

image

按"是"之後,畫面如下所示。

image

雖然Microsoft Visual Web Developer 2010 Express 是免費不過仍需註冊,否則只有30天的試用期限。

image

註冊方式很簡單,只要有hotmail、msn帳號或passport的帳號登入

image

輸入基本資料與一些問卷調查。

image

完成之後,微軟會寄一封驗證的電子郵件,至msn會hotmail信箱中

image

打開驗證的信件,點選驗證的超連結

image

完成驗證動作、按下確定!

image

在下面視窗取得註冊金鑰,複製貼至輸入金鑰位置,按下"立即註冊",即可完成Microsoft Visual Web Developer 2010 Express 註冊。

image

工欲善其事,必先選利器,選好工具我們可以進入下一階段…下回吧!

一步一腳印 進入 WebMatrix 世界 (三) =>刀鋒試煉之一、WebMatrix編輯功能介紹

萬事起頭難,要從無到有並不容易,台語講:有樣看樣,無樣自己想!範例學習對於我個人的學習經驗非常重要,從一個電腦門外漢到初窺門徑的資訊人,我都是從範例,逐步演練進行修改,再試著開發自己的程式構想!WebMatrix中應用到很多我不曾接觸的東西,像"相片藝廊"範例網站利用Razor這個新語法,對我只接觸過asp與asp.net1.0與2.0來說就是一個新的嘗試,WebMatrix提供了很方便的編輯與測試的功能,可以降低我們學習的曲線,就從"相片藝廊"這個範例來學習Razor。

首先我們在WebMatrix開啟前篇文章(一步一腳印 進入 WebMatrix 世界 (一))利用"相片藝廊"範本建立的網站,從"站台"切換至"檔案"的畫面。

image

在檔案列表中,會看到一個在asp或早先版本的asp.net沒有看過的網頁檔案(副檔名.cshtml),這種檔案就是用Razor 語法撰寫而成的網頁檔案,Razor 語法支援c#與vb兩種程式語法,副檔案名稱cshtml表示是使用c#語法,如果是vbhtml代表使用vb語法,而在IIS中我們經常會設定"預設內容頁"的檔名為 index.xxx 或 Default.xxx 。

image

WebMatrix已經包含簡單的文字編輯器於其程式中,所以我們可以用滑鼠點選Default.cshtml按滑鼠左鍵兩次打開Default.cshtml,看裡面有什麼?

image

可以看到一段這樣的程式碼,這段程式碼的作用如註解所示

@{
    // 重新導向至所要的起始頁
    Response.Redirect("~/Gallery");
}

這個就是所謂的Razor 語法,看起來非常的簡潔,這就是為什麼取名為Razor (有剔刀之意),以下簡單介紹一下我們會看到的Razor 語法的規則:

首先和php與asp一樣可以html標記與程式片段混合,不過Razor 語法的規則不再像asp、php或jsp用<?>這組符號,代表程式的片段,而是用@這個符號作為程式片段的標記,如果程式只有一行只要在@符號後加入程式片段,舉例來說,如果我要在互動式的網頁即時秀出時間,用以下這行就可以呈現

現在時間是: @DateTime.Now

其次如果有多行程式碼或內容可以在@符號之後接一組{},將程式碼置於{}之中,如Default.cshtml中雖然只有一行,但是有註解在內所以超過一行就必須用{}含括。

@{
    // 重新導向至所要的起始頁
    Response.Redirect("~/Gallery");
}

 

有了WebMatrix這個網站魔具實在太方便,我們可以馬上在WebMatrix上實際測一下,首先在我們的範例站台,檔案的位置按滑鼠右鍵在突顯功能表中選取"新增檔案"

image

然後在"選擇檔案類型"選擇CSHTML,名稱我們就用預設Page.cshtml,然後按下確定

image

WebMatrix會幫我們產生一個帶有基本html標記的cshtml檔案

image

我們把剛才那一段內容貼到<body>之後

image

然後滑鼠游標移至Page.cshtml,按下滑鼠右鍵,在突顯功能表中選擇"在瀏覽器中啟動"

image

馬上就可以看到如下的網頁結果,是不是很方便!

image

 

Razor 語法還有一些特點與規則,我們下回分解吧!

一步一腳印 進入 WebMatrix 世界 (二) 範例網站發佈

承續前文一步一腳印 進入 WebMatrix 世界 (一)我們利用WebMatrix在本機建立一個範例網站,在本機上看到的樣子是否也同樣能在網路看到,以教學生網頁設計的經驗,最常發生的就是在本機看到的與透過瀏覽器在網路伺服器上看到的不一樣,所以我們就來實際放到網路上另一台機器看看是否與本機相同,現在手邊沒有跑IIS7的伺服器,我直接用虛擬機器上的WIN2003上安裝上WebMatrix,利用IIS7 Express來測試。

1.首先我們按照上一篇文章所做的"往事回憶"範例,發佈至裝有WebMatrix的Win2003,如何把本機的範例網站發佈至指定的機器上?WebMatrix已經提供簡單的發行工具,在WebMatrix的『首頁』功能區的『發行』群組中可以看到幾個選項,我們先執行『設定』

image

2.在"發行設定"表單中進行設定,"通訊協定"有兩個選擇"Web Deploy"與"FTP",因為使用的WIN2003有架設FTP伺服器所以我選擇"FTP","伺服器"就設定你的伺服器的IP或網路名稱,因為是測試我所指定的WIN2003的IP為學校內部IP 192.168.0.4 ,使用者其他的部分就依照,設定之後我們可以執行"測試連線",如果出現"已順利連線",表示用FTP發佈的方式可以執行,然則再點選"儲存"

image

3.回到webmatrix的主畫面,在WebMatrix的『首頁』功能區的『發行』群組中的"發行"

image

程式會丟一些檔案去測試相容性

image

我的伺服器測出來的結果如下圖的結果,不過不用管它,因為我要用伺服器上新安裝WEBMATRIX所使用的IIS7 Express來跑這個範例網站。image

4.按下"繼續"如果出現以下網站檔案的列表,表示已經可以進發行。記得要勾選資料庫下PhotoGallery.sdf複製成檔案這個選項,因為我們要把資料庫一併發行至伺服器。

image

按"繼續"可以看到程式的下方會出,正在發行…範例網站中的檔案

image

如果想看完整的記錄,可以點選下方的"記錄"

image

可以看到完整的發行記錄

image

完成發行會之後,會看到程式下方出現以下的完成的訊息

 

image

5.我們進到Win2003啟動WebMatrix

image

6.在快速入門畫面選擇"依據資料夾的站台"

image

7.找到我們發行至win2003的目錄,按下確定。

image

8.開啟之後WebMatrix會出現我們上傳的檔案目錄,點選下方"站台"的選項,切換至站台

image

9.在"站台"畫面會看到發行的url為http://localhost:47270,這樣在網路上別台機器是看不到,我們必須改成IP。

image

10.按一下站台名稱"webmatrix"把"設定"選項下拉出來,點選設定。

image

11.進行設定前按下"停止",在http://後輸入我們要改的IP與PORT,因為使用的WIN2003已經有跑IIS6,80埠已經被使用了,所以我們指定一個沒有用到的4000埠,設定之後再把網站"啟動",記得WIN2003的防火牆要把設定的4000埠打開。

image

12.看到程式下方訊息列出現順利啟動訊息,我們切回"站台"畫面。

image

看URL是否為192.168.0.4:4000 ,再找一台同樣網段的機器用IE連連看。

image

13.如果看到以下的畫面表示大功告成。

image

 

接下來我們可以開始試著修改這個範例網站了,留待下回吧!

一步一腳印 進入 WebMatrix 世界 (一)

對於我們這種非本科而是資訊自學方案的初學者,學習一個新的東西最好能夠簡化一些旁支末節的部分,把注意力集中在要學的部分,想當初在唸研究所,不自量力挑了一個與電腦輔助教學相關的題目,為了進行論文問卷資料收集,原本要向隔壁實驗室同學學習寫cgi,後來就放棄了。因為光學習如何把系統環境架設好,就耗掉不少研二寶貴的時間,弄了半天根本還不到真正進入學寫cgi程式,已經是火燒眉毛,不得不放棄(準時畢業比較重要),還是用傳統紙筆問卷,直到畢業後才真正開始學寫cgi。

說這段過往不是說系統環境架設這些東西不重要,而是資訊科學如此浩瀚,要樣樣精通談何容易,現在看到WebMatrix這樣的工具,現在做這方面的學習幸福多了,看完前文(WebMatrix 環境安裝)安裝好WebMatrix後,相信讀者一定躍躍欲試,既然是修練活動,我們就實際一步一腳印從頭開始吧!

WebMatrix中已經預設一些不錯的範本供使用者使用,我們就選其中一個開始,首先啟動WebMatrix,在啟動畫面中選擇"依據範本的站台"。

image

在以下視窗中選擇一個範本,我們就拿這個中文版"相片藝廊"的範本為建立的樣版,選取"相片藝廊",在"站台名稱"輸入站台的名稱(例如:往事回憶),再按『確定』鈕。

image

按下『確定』鈕,WebMatrix便會依據此範本建立網站架構,建立完成便會進入WebMatrix的主程式畫面(如下圖)

image

在WebMatrix的主程式畫面中的『首頁』功能區中,可以看到目前我所建立的"往事回憶"網站已經處在啟動的狀態,從這個功能區我們可以進行網站的一些簡單管理,目前這個網站是建立在我使用的電腦上,也就是一般所謂的本機或localhost之上。

image

我們可以點取『首頁』功能區中『執行』/『Internet Explorer』,看一下這個網站從瀏覽器看到的是什麼樣子。

image

執行之後會啟動IE,就可以看到一個基本架構俱全的網站,是不是很簡單?

image

仔細看一下IE的網址列,可以看到http://localhost:62092/Gallery這個網址,表示這個是在本機上並不是在網路上的位置,所以別人是看不到,如果希望放置在別人看得到的地方,我們要找一台伺服器,發行到上面,這個留待下回吧!

初窺WebMatrix 門徑…網站模(魔)具的威力

參加WebMatrix修練活動真的是來修練的,自從卸下資訊組長的工作,已經很久沒有再接觸關於網站維護與建置的工作,幾年前還在擔任資訊組長時,因為學校接辦板土區的國語文競賽,要建立一個與這個活動相關的網站系統,雖然已經有前面學校(江翠國中的老師)用asp寫了一個現成的網站系統,但是因為某些功能必須修改,自己嫌麻煩想要重新建立,那時自己剛好嘗試要把學校網站中一些用vs2003建置的功能用vs2005修改升級,就冒險一試利用暑假的時間按照競賽所需要的功能,利用vs2005重新建置這個系統。剛接觸vs2005時已經讓我驚豔於其建立網站網頁神奇的便利性,尤其對於從open source環境開始學習的我來說真的太方便,尤其最棒的是那時已經有很多現成的網站樣版,讓使用者能夠快速建立網站的基本架構,後來我就用其中一個club的樣版進行修改,完成了任務。

自從報名了『WebMatrix 修練大會』這活動,這幾天仔細的試了一些WebMatrix的功能,WebMatrix 真的是Magic。只能說資訊科技的發展真的一日千里,資訊人如果不自我修練,那他的『半衰期』真的很短!

從目前試到WebMatrix的功能幾乎整合了網站開發與管理者所需的各項功能,從簡潔的啟用畫面中,使用者可以選擇開發網站的樣版,而且不再限制是.NET程式的環境,連PHP的網站樣版也可以,透過WebMatrix也能進行設定管理。

 

image

 

舉例來說像教育人員最常使用的moodle平台,它使用的PHP與MySql架構,如果自己要重頭到尾自己架設,要費一番工夫,透過WebMatrix點選『依據Web組件庫的站台』,只要下一步、下一步、把資料庫密碼與管理者密碼與passwordsalt設一下,就完成了!

image

下載組件

image

image

 

image

如果沒設passwordsalt會出現下列訊息,passwordsalt在表單最下方,要拉一下捲軸

image

passwordsalt不能太簡單(畫面中1234567不會過,要有數字與英文字母)

image

出現下面畫面就完成moodle所需要平台的安裝,按下確定回到WebMatrix的主程式畫面

image

如果要看moodle平台是否可以在本機正確執行,點選『執行』 /『Internet Explorer』

image

瀏覽器出現以下畫面,表示可以進行moodle的安裝與設定,以下的步驟就請讀者自己試一試吧!

image

點選continue進入系統服務環境檢測,可以看到服務全部ok!

image

WebMatrix 環境安裝

我的電腦環境是WIN7 X64 ,IE9與VS2010

1.使用者可以點選以下http://www.microsoft.com/web/webmatrix/,在網頁畫面中點選Install WebMatriximage

2.網頁會轉址至微軟的網站,瀏覽器會出現以下提示視窗,請求允許網站開啟電腦中的程式,請選擇允許。

image

3.程式會啟用Web Platform Installer 3.0開始進行安裝

image

4.Web Platform Installer 3.0載入以下內容,點選安裝。如果要了解安裝的項目為何,可以點選畫面左下角的1.要安裝的項目(I)

image

5.點選安裝後,Web Platform Installer 3.0開始下載安裝WebMatrix軟體環境相關程式。

image

6.安裝完成Web Platform Installer 3.0出現以下內容,可以按一下畫面中啟動的連結,直接啟動webmatrix

image

7.出現以下畫面,就完成WEBMATRIX的安裝。

image