ASPNET-WebPages-學習筆記

發表於

ASP.NET Web Pages

ASP.NET 支持三種不同的開發模式：
Web Pages（Web 頁面）、MVC（Model View Controller 模型-視圖-控制器）、Web Forms（Web 窗體）

ASP.NET-Razor 標記

  • Razor 是一種將基於服務器的代碼添加到網頁中的標記語法
  • Razor 具有傳統ASP.NET 標記的功能，但更容易使用並且更容易學習
  • Razor 是一種服務器端標記語法，與ASP 和PHP 很像
  • Razor 支持C# 和Visual Basic 編程語言

主要的Razor C# 語法規則

  • Razor 代碼塊包含在@{ … } 中
  • 內聯表達式（變量和函數）以@ 開頭
  • 代碼語句用分號結束
  • 變量使用var 關鍵字聲明
  • 字符串用引號括起來
  • C# 代碼區分大小寫
  • C# 文件的擴展名是.cshtml
1
2
3
4
5
6
7
8
9
10
11
12
13
<!\-\- Single statement block -->
@{ var myMessage = "Hello World"; }

<!\-\- Inline expression or variable -->
<p>The value of myMessage is: @myMessage </p>

<!\-\- Multi-statement block -->
@{
var greeting = "Welcome to our site!";
var weekDay = DateTime.Now.DayOfWeek;
var greetingMessage = greeting + " Today is: " + weekDay;
}
<p>The greeting is: @greetingMessage </p>

主要的Razor VB 語法規則

  • Razor 代碼塊包含在@Code … End Code 中
  • 內聯表達式（變量和函數）以@ 開頭
  • 變量使用Dim 關鍵字聲明
  • 字符串用引號括起來
  • VB 代碼不區分大小寫
  • VB 文件的擴展名是.vbhtml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!\-\- Single statement block -->
@Code dim myMessage = "Hello World" End Code

<!\-\- Inline expression or variable -->
<p>The value of myMessage is: @myMessage </p>

<!\-\- Multi-statement block -->
@Code
dim greeting = "Welcome to our site!"
dim weekDay = DateTime.Now.DayOfWeek
dim greetingMessage = greeting & " Today is: " & weekDay
End Code

<p>The greeting is: @greetingMessage </p>

Content Blocks（內容塊）

  • 通過Web Pages，您可以使用@RenderPage()方法從不同的文件導入內容。
1
2
3
4
5
6
7
8
<html>
<body>
@RenderPage("header.cshtml")
<h1>Hello Web Pages</h1>
<p>This is a paragraph</p>
@RenderPage("footer.cshtml")
</body>
</html>

Layout Page（佈局頁）

  • 佈局頁中使用@RenderBody()方法嵌入內容頁
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<body>
<p>This is header text</p>
@RenderBody()
<p>&copy; 2012 W3CSchool. All rights reserved.</p>
</body>
</html>


@{Layout="Layout.cshtml";}

<h1>Welcome to W3CSchool.cc</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laborisnisi ut aliquip ex ea commodo consequat.
</p>

文件夾結構

下面是典型ASP.NET網站文件夾結構：

  • “Account” 文件夾包含登錄和安全文件
  • “App_Data” 文件夾包含數據庫和數據文件
  • “Images” 文件夾包含圖片
  • “Scripts” 文件夾包含瀏覽器腳本
  • “Shared” 文件夾包含公共的文件（比如佈局和样式文件）

Href 方法

  • Href 方法將代碼中的使用的路徑轉換成瀏覽器可以理解的路徑（瀏覽器無法理解~ 運算符）。
  • 您可以使用Href 方法創建資源（比如圖像文件和CSS 文件）的路徑。
  • 一般會在HTML 中的<a>、<img> 和<link> 元素中使用此方法:
1
2
3
4
5
6
7
@{var myStyleSheet = "~/Shared/Site.css";}

<!\-\- This creates a link to the CSS file. -->
<link rel="stylesheet" type="text/css" href="@Href(myStyleSheet)" />

<!\-\- Same as : -->
<link rel="stylesheet" type="text/css" href="/Shared/Site.css" />

在Web 啟動之前：_AppStart

  • _AppStart 的典型用途是啟動代碼和初始化全局數值（比如計數器和全局名稱）。

在每一個頁面之前：_PageStart

  • _PageStart 的典型用途是為一個文件夾中的所有頁面設置佈局頁面，或者在運行某個頁面之前檢查用戶是否已經登錄。

Page 對象的Page 屬性

  • Page 對象的Page 屬性，提供了對頁面和佈局頁之間共享的數據的類似屬性訪問。
  • 您可以對Page 屬性使用（添加）您自己的屬性：
    • Page.Title
    • Page.Version
    • Page.anythingyoulike
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@{
Layout="~/Shared/Layout.cshtml";
Page.Title="Home Page"
}

<h1>Welcome to W3CSchool.cc</h1>

<h2>Web Site Main Ingredients</h2>

<p>A Home Page (Default.cshtml)</p>
<p>A Layout File (Layout.cshtml)</p>
<p>A Style Sheet (Site.css)</p>


<!DOCTYPE html>
<html>
<head>
<title> @Page.Title </title>
</head>
<body>
@RenderBody()
</body>
</html