使用WebMatrix 2開發ASP.NET Web Pages網頁(1)

by vivid 27. 二月 2013 10:23

.NET Magazine國際中文電子雜誌
作 者:許薰尹
審 稿:張智凱
文章編號:N130213302
出刊日期:2013/2/27

WebMatrix是微軟的網站開發工具,目前的最新版本是WebMatrix 2,它可以用來開發使用Visual Basic/Visual C# 程式語言搭配Razor語法的ASP.NET Web Pages網頁。不僅僅如此,它還可以用來開發一般的HTML、ASP、PHP...等等類型的程式碼。看倌聽到這邊心中會不會產生出疑問?微軟不是已經有一個Visual Studio 2012開發工具了,也有ASP.NET Web Forms與ASP.NET MVC 4技術可以用來撰寫網站應用程式,那麼WebMatrix與ASP.NET Web Pages又何解?

微軟將WebMatrix定位成一個網站應用程式的開發平台,重點是它們是免費的,能夠快速建置出動態網頁,和以資料驅動為基礎的網頁。ASP.NET Web Pages則架構在ASP.NET基礎架構之上,它的定位和ASP.NET Web Forms與ASP.NET MVC 4相同,都是用來撰寫網站類型的應用程式。

WebMatrix的優點:

  • WebMatrix可以撰寫在伺服端執行的動態網頁。
  • 以資料趨動為基礎,意指可以快速撰寫新增、刪除、修改以及查詢資料庫資料的頁面。
  • 簡單容易使用。
  • 容易學習。
  • 免費。
  • 不受限於開發ASP.NET網頁,也可以用來撰寫PHP、Node.js、或HTML5類型的程式。
  • 為ASP.NET平台的一部分,可以善用.NET Framework所提供的功能。
  • 提供許多開放源碼的網站範本,例如WordPress、DotNetNuke等等。
  • 和MVC使用相同的Razor語法建立頁面,技術可以共通。

 

下載與安裝Web Matrix 2

首先您必需到以下網址下載,以及安裝Web MebMatrix 2:http://www.microsoft.com/web/webmatrix/。請參考下圖所示,點選「Free Download」進行下載:

clip_image002

圖 1:下載與安裝Web Matrix 2。

此外在www.asp.net網站上有一些教學文件可以參考,網址在:http://www.asp.net/web-pages

安裝Web Matrix 2時,會順帶安裝許多元件和工具程式,包含了:

  • Web Matrix 2開發工具。
  • ASP.NET Web Pages:它的定位類似ASP.NET Web Forms或MVC的View。
  • SQL Server Compact Edition資料庫。
  • IIS Express版本。

 

探索Web Matrix 2

Web Matrix 2安裝完成之後,便可啟動之,啟動畫面請參考下圖所示:

clip_image004

圖 2:Web Matrix 2啟動畫面。

點選畫面中的「範本」項目可以看到畫面如下,Web Matrix 2預設安裝許多不同類型的網站範本,例如入門網站、相片藝廊等等,可以以預設的網站範本為基礎,快速建立網站,請參考下圖所示:

clip_image006

圖 3:預設提供許多網站範本。

若點選任一個範本,為它取一個名稱後,按下「下一步」按鈕,就會自動下載安裝範本檔案,請參考下圖所示:

clip_image008

圖 4:使用範本建立網站。

安裝畫面,請參考下圖所示:

clip_image010

圖 5:範本安裝畫面。

若點選首頁的「應用程式庫」項目,同樣會看到許多網站範本,只要點選範本,就會自動從網際網路下載來安裝,請參考下圖所示:

clip_image012圖 6:「應用程式庫」範本。

點選首頁畫面中的「開啟站台」選項,選單中的「我的站台」項目可以開啟已建立的網站程式,以Windows 8作業系統為例,這些站台中的檔案預設是存放在「C:\Users\登入帳號\Documents\My Web Sites」資料夾中,請參考下圖所示:

clip_image013

圖 7:「開啟站台」選項。

若要刪除已建立的站台,可以使用滑鼠右鍵點選某個已建立的站台,再按滑鼠右鍵,從選單選取「刪除」,請參考下圖所示:

clip_image015

圖 8:刪除已建立的站台。

而「以資料夾為站台」選項就不限制站台檔案的所在資料夾,您可以挑選任意資料夾當作站台根目錄。

 

建立站台

讓我們從無到有來建立一個空白網站,順便了解一下Web Matrix 2的開發架構,從「開啟站台」-「範本」-選取「空白網站」,建立一個空白網站,在視窗下方的文字方塊,為站台取一個名稱,請參考下圖所示:

clip_image017

圖 9:建立空白網站。

目前看起來的畫面大約如下圖:

clip_image019

圖 10:建立站台。

 

點選「站台」頁-「設定」選項,可以進一步監控進行中的HTTP請求,或設定站台的URI位址、使用的.NET Framework版本,或者是否啟用SSL等等,請參考下圖所示:

 
clip_image021

圖 11:站台設定。

 

點選左下方的「檔案」頁,請參考下圖所示,可以看到預設WebMatrix 會建立一個Robots.txt檔案,此檔案是用來限制搜尋引擎或Web Crawlers是否可以存取此站台內的文件。您可以查詢http://www.w3.org/TR/html4/appendix/notes.html#h-B.4.1.1網站進一步了解Robots.txt檔案的細節。

clip_image022

圖 12:「檔案「頁。

「資料庫」頁可以讓你建立與管理SQL Server Compact資料庫;而「報告」頁則可以建立統計報表,參考下圖是網站的效能報表。

clip_image024

圖 13:報告。

 

ASP.NET Web Pages

ASP.NET Web Pages網頁可以包含HTML標籤、用戶端與伺服端程式碼。檢視預設網站建立的範本,其中包含一個Default.cshtml檔案,它是一個以Razor語法定義的ASP.NET Web Matrix網頁,預設支援HTML5標準,檔案以DOCTYPE標籤開始,標籤如下:

@{
   
}
 
<!DOCTYPE html>
 
<html lang="zh">
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta charset="utf-8" />
        <title>我的站台標題</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    </head>
    <body>
       
    </body>
</html>

您可以在此網頁中加入HTML,在輸入HTML標籤時,Web Matrix工具將提供提示功能,列出所有HTML標籤供選擇,包含HTML5標準的標籤,也會自動補結尾標籤,請參考下圖所示:

clip_image025

圖 14:輸入HTML標籤時的提示。

當然輸入JavaScript程式碼時,也會提供提示,請參考下圖所示:

clip_image026

圖 15:輸入JavaScript標籤時的提示。

讓我們修改Default.cshtml網頁程式如下,加入一個顯示「Click Me」字串的P標籤,註冊了onclick事件,事件觸發時,透過JavaScript程式碼,顯示「Hello World!」訊息:

@{
   
}
<!DOCTYPE html>
 
<html lang="zh">
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta charset="utf-8" />
        <title>我的Demo站台</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <script>
            function clickme() {
                alert("Hello World!");
            }
        </script>
    </head>
    <body>
        <p onclick="clickme()">
            Click Me
        </p>      
    </body>
</html>

你可以直接按鍵盤F12鍵,或按下視窗上方的「執行」,選取安裝在此電腦上的任意瀏覽器來進行測試,請參考下圖所示:

clip_image027

圖 16:測試網頁。

預設安裝在此電腦上的瀏覽器會自動出現在清單之中,若想要新增一些手機模擬器來進行測試,可以選擇上圖畫面上的「新增」選項。

此範例執行的結果參考下圖,當你點選「Click Me」字串,就會跳出「Hello World!」訊息:

clip_image028

圖 17:Default.cshtml網頁執行結果。

 

Razor語法

在ASP.NET Web Pages網頁中,可以利用Razor語法來新增一些伺服端執行的動態內容,可以搭配Visual Basic或C#語言使用。Razor語法的語法號稱簡單、容易使用。除了應用在ASP.NET Web Pages中撰寫網頁之外,也可以在ASP.NET MVC 4撰寫檢視,它是ASP.NET MVC 4預設的檢視引擎。

例如在Default.cshtml之中加入一個<div>標籤,輸入以下程式碼:

 

<div> 今天是 : @DateTime.Now.ToShortDateString() </div>

 

Razor程式以@符號開始,可以直接插入HTML標籤之中,不需要結尾的符號,它會自動推論出程式區塊。同時在輸入C#語法的過程中,也會有適當的提示,請參考下圖所示:

clip_image029

圖 18:使用Razor語法會有提示。

 

使用Form表單

我們來看一個較複雜的使用Form範例來提交資料給伺服器。在Web Matrix專案中,若要新增網頁,可以在「Navigation Pane」-「站台的名稱」上方按滑鼠右鍵,然後選取快捷選單中的「新增檔案」項目,請參考下圖所示:

clip_image030

圖 19:新增檔案。

選取檔案的類型,例如下圖選取支援Razor語法的CSHTML檔案,視窗下方的文字方塊可以設定檔案的名稱,請參考下圖所示:

clip_image032

圖 20:選取支援Razor語法的CSHTML檔案。

讓我們輸入一些HTML表單程式到Page1.cshtml,使用者可以在網頁中輸入名稱,並將表單利用submit按鈕提交到伺服器:

@{
   
}
 
<!DOCTYPE html>
 
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <form method="post" action="Page2.cshtml">
            請輸入您的名稱 :
            <input type="text" name="txtName"/>
            <input type="submit"/>
           
        </form>
    </body>
</html>

Form標籤中設定提交資料使用的HTTP方法,以此例而言使用的是HTTP POST;action設定為Page2.cshtml,表示提交網頁之後,會導向Page2.cshtml。

另外加入一個Page2.cshtml,利用Request物件從Form集合中取得文字方塊輸入的內容:

@{
   
}
 
<!DOCTYPE html>
 
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        歡迎 :  @Request.Form["txtName"].ToString()
    </body>
</html>

若不是要從網站的Default.cshtml網頁執行,而是從特定的網頁執行,您可以在WebMatrix 工具 -「Navigation Pane」-「欲執行的檔案」上方按滑鼠右鍵,然後選取快捷選單中的「在瀏覽器中啟動」項目,便可以執行選取的網頁,請參考下圖所示:

clip_image033

圖 21:執行選取的網頁。

在瀏覽器輸入名稱之後按下「提交」按鈕,便可以將名字傳遞到Page2.cshtml,顯示歡迎的訊息,範例執行結果請參考下圖所示:

clip_image034

圖 22:顯示提交到伺服器的內容。

 

使用程式碼區塊

在cshtml檔案中可以在Razor@{ … }區塊加入多行C#程式碼,這樣就可以撰寫更複雜的程式邏輯,例如以下程式碼範例展示宣告一個title 變數,以及一個List<string>集合,新增多筆圖書資料。在HTML Body標籤之中,使用@title印出標題,並利用foreach迴圈,將集合中的圖書資料一一讀出,顯示在清單方塊之中:

@{
    var title = " 書籍清單 :";
    List<string> bookList = new List<string>();
    bookList.Add("jQuery Mobile");
    bookList.Add("C#");
    bookList.Add("VB");
    bookList.Add("jQuery");
   
}
 
<!DOCTYPE html>
 
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
       @title
        <ul>
        @foreach (string b in bookList){
         <li>@b</li>       
        }
        </ul>
    </body>
</html>

 

此範例執行的結果參考下圖:

clip_image035

圖 23:使用程式碼區塊。

 

部分頁面(Partial Page)

在網站的多個不同的頁面中,可能會有許多資料重複地出現。較好的做法,是不需要在個別頁面內重複定義這些資料,例如表頭、表尾資料。

舉例來說,在站台中新增一個_header.cshtml檔案來存放表頭內容,程式如下:

 

<img src="~/images/logo.jpg" alt="logo" width="100px" height="100px"/>
<h1>我的網站</h1>
 

「_」符號開頭命名的檔案無法直接在瀏覽器執行,我們稱之為部分頁面(Partial Page),若直接在瀏覽器執行此種頁面,會得到一個錯誤訊息,請參考下圖所示:

clip_image036

圖 24:執行「_」符號開頭的檔案會顯示錯誤資訊。

另外在站台中定義一個_footer.cshtml檔案,包含網頁想顯示的表尾內容,程式如下:

 
Copyright test@demo.com

在主要的頁面中,可以利用RenderPage方法來插入表頭、表尾等部分頁面(Partial Page)的內容,例如以下Page4.cshtml範例程式碼,在「歡迎!!」訊息的上、下方,各叫用RenderPage方法插入_header.cshtml 與_footer.cshtml檔案的內容。

@{
   
}
 
<!DOCTYPE html>
 
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        @RenderPage("_header.cshtml")
        <div>歡迎!!</div>
        <br/>
        <br/>
        @RenderPage("_footer.cshtml")
    </body>
</html>

Page4.cshtml範例網頁執行的結果如下,RenderPage方法的所在之處,就是載入的部分頁面內容,請參考下圖所示:

clip_image037

圖 25:使用部分頁面。

若檢視瀏覽器收到的HTML,參考如下,在執行階段,將會自動將部分頁面插入主要頁面之中,用戶端感覺不出檔案的內容是定義在兩個以上的檔案:

 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <img src="/images/logo.jpg" alt="logo" width="100px" height="100px"/>
<h1>我的網站</h1>
        <div>歡迎!!</div>
        <br/>
        <br/>
        Copyright test@demo.com
    </body>
</html>

 

配置頁面(Layout Page)

若想要設計類似ASP.NET主版頁面(Master Page)功能,可以使用配置頁面 (Layout Page,類似Web Forms中的*.master檔),將網站中所有網頁的共用標籤、程式碼與結構定義在配置頁面,並以其為基礎,加入內容頁面(Content Page,類似Web Forms中的*.aspx檔)。

在站台之中加入一個_Layout.cshtml網頁,此程式範例在配置頁面中使用了RenderBody()方法來產生內容頁面:

@{
   
    var title ="我的 demo 網站";
    
}
 
<!DOCTYPE html>
 
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title> @title </title>
    </head>
    <body>
        @RenderPage("_header.cshtml")
        <div>歡迎!!</div>
         <div id="content">
            @RenderBody()
        </div>
        @RenderPage("_footer.cshtml")
    </body>
</html>

內容頁面(Page5.cshtml)定義如下,在Razor程式區塊中,使用Layout屬性指明配置頁面的檔案名稱:

@{
   Layout = "_Layout.cshtml"; 
}
<h1> 我的內容頁面 </h1>

內容頁面(Page5.cshtml)執行的結果如下:

clip_image038

圖 26:使用配置頁面。

檢視瀏覽器收到的HTML,參考如下,配置頁面和內容頁面的內容會合併輸出:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title> 我的 demo 網站 </title>
    </head>
    <body>
        <img src="/images/logo.jpg" alt="logo" width="100px" height="100px"/>
<h1>我的網站</h1>
        <div>歡迎!!</div>
         <div id="content">
<h1> 我的內容頁面 </h1>
        </div>
        Copyright test@demo.com
    </body>
</html>

使用RenderSection產生自訂區段

若每個網頁固定的位置想要顯示的內容不同,但需要利用配置頁面來定位,您可以在內容頁面定義區段(Section),然後在配置頁面叫用RenderSection方法插入內容頁面定義的區段。配置頁面中可以叫用RenderSection方法多次,以為不同的區段做定位。

修改_Layout.cshtml檔案如下,在body標籤下叫用RenderSection方法:

@{
   
    var title ="我的 demo 網站";
    
}
 
<!DOCTYPE html>
 
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title> @title </title>
    </head>
    <body>
        @RenderSection("menu")
        @RenderPage("_header.cshtml")
        <div>歡迎!!</div>
         <div id="content">
            @RenderBody()
        </div>
        @RenderPage("_footer.cshtml")
    </body>
</html>

Page6.cshtml內容頁面程式如下,定義一個名為menu的區塊,包含一些超連結:

@{
    Layout = "_Layout.cshtml";
}
<h1> 我的內容頁面 </h1>
@section menu
{
   <nav>
        <a href="default.cshtml"> Home </a>
        <a href="Page1.cshtml"> Page1 </a>
        <a href="Page3.cshtml"> Page3 </a>
        <a href="Page4.cshtml"> Page4 </a>
</nav>
}

Page6.cshtml執行結果如下,上方會插入menu區段的內容:

clip_image039

圖 27:使用RenderSection產生自訂區段。

檢視瀏覽器收到的HTML,參考如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>我的 demo 網站 </title>
</head>
<body>
  <nav>
    <a href="default.cshtml">Home </a>
        <a href="Page1.cshtml">Page1 </a>
        <a href="Page3.cshtml">Page3 </a>
        <a href="Page4.cshtml">Page4 </a>
  </nav>
  <img src="/images/logo.jpg" alt="logo" width="100px" height="100px" />
  <h1>我的網站</h1>
  <div>歡迎!!</div>
  <div id="content">
    <h1>我的內容頁面 </h1>
  </div>
  Copyright test@demo.com
</body>
</html>


 

 

選擇性區段

若此時回過頭去執行Page5.cshtml內容頁面程式碼,則會出現區段未定義的錯誤,這是因為它並沒有定義menu區段的緣故,請參考下圖所示:

clip_image041

圖 28:區段尚未定義錯誤。

此時只要修改_Layout.cshtml檔案RenderSection方法這一行程式碼,在第二個引數設定required為false,代表menu區段可以忽略:

@RenderSection("menu" , required: false)

Tags:

.NET Magazine國際中文電子雜誌 | 許薰尹Vivid Hsu | ASP.NET Web Pages

新增評論




  Country flag
biuquote
  • 評論
  • 線上預覽
Loading






NET Magazine國際中文電子雜誌

NET Magazine國際中文電子版雜誌,由恆逸資訊創立於2000,自發刊日起迄今已發行超過500篇.NET相關技術文章,擁有超過40000名註冊讀者群。NET Magazine國際中文電子版雜誌希望藉於電子雜誌與NET Developer達到共同學習與技術新知分享,歡迎每一位對.NET 技術有興趣的朋友們多多支持本雜誌,讓作者群們可以有持續性的動力繼續爬文。<請加入免費訂閱>

月分類Month List