Microsoft Word - AEL020000_CH04_Final.doc

Size: px

Start display at page:

Download "Microsoft Word - AEL020000_CH04_Final.doc"

灾尤
5 years ago
Views:

1 L e s s o n Razor Razor Razor UI Razor Helper Razor Partial View

2 ASP.NET MVC View Controller View View Razor Razor 4-1 Razor Razor Razor Razor Syntax Server Side C# HTML Markup Syntax Syntax Language Razor Server Side C# HTML var Name = "Kevin"; var Height = 180; var Weight = 75; 1. C# C# HTML <p> element <p> 我的名字 </p> 2. Razor Inline <p> 我的身高 </p> <p> 我的體重 </p> 1. Razor HTML C# Razor 2. C# Razor Code C# 4-2

3 Razor View 4 3. Razor Inline C# HTML Razor C# 4. Razor HTML C# Razor Razor Razor Razor HTML C# Razor element tag Razor C# Razor Language Razor Razor HTML C# HTML C# Razor Razor 1. Razor section model helper inherits functions Razor Razor 2. C# C# Razor Razor C# namespace class 4-3

4 ASP.NET MVC 4-1 Razor Razor View.cshtml.html View Razor View Razor Page 4-2 Razor Razor Razor HTML Razor C# LINQ Razor MvcRazor Views\Razor\RazorRules.cshtml 15 Razor 4-4

5 Razor View 4 C# Razor HTML C# HTML Markup HTML HTML C# C# Parser C# Code Block ; var City = var PostalCode = 以下用明確型別宣告變數也可以 string city = int postalcode = 334; C# HTML var C# var Name = "Kevin"; var Height = 180; var Weight = 75; 4-5

6 ASP.NET MVC 4 C# Inline C# Inline 2 3 <p> 我的名字 </p> <p> 我的身高 </p> <p> 我的體重 </p> <p> 居住城市 </p> <p> 郵遞區號 </p> HTML 我的名字 : Kevin 我的身高 : 180 我的體重 : 75 居住城市 : Taipei 郵遞區號 : ASP.NET <h1>mvc</h1> 5 C# C# HTML Razor var LeapYear = DateTime.IsLeapYear(DateTime.Now.Year); <p> 今年是否為閏年 :@LeapYear </p> 今年是否為閏年 :False 4-6

7 Razor View 4 6 C# VB C# var MyName = " 聖殿祭司 "; var myname = " 奚江華 "; <p> 筆名 <br /> 姓名 <br /> </p> 筆名 : 聖殿祭司姓名 : @* 這是單行註解 @* 多行註解也有支援 *@ 9 C# <p> 現在的時間是 :@DateTime.Now </p> 現在的時間是 :2017/11/5 下午 03:21:09 4-7

8 ASP.NET MVC 10 C# <p> 兩週前我出國去玩, 出發日期是 - TimeSpan.FromDays(14)). ToShortDateString()) </p> <p>3+7 的結果是 + 7) </p> 14 兩週前我出國去玩, 出發日期是 :2017/10/ 的結果是 : <br /> <p> <p> 但和超連結例外 <br /> 我的電子郵件 : dotnetcool@gmail.com <br /> <a href="mailto:service@domain.com">service@domain.com</a> 但和超連結例外我的電子郵件 : dotnetcool@gmail.com Service@domain.com "" 4-8

9 Razor View var word 子曰 :"" 三人行, 必有我師焉 ""..."; <p>@word</p> 子曰 :" 三人行, 必有我師焉 "... HTML HTML HTML JavaScript var msg type='button' onclick='alert(""hi JavaScript"")'> Raw 原始字串, 不做 HTML 編碼 </button>"; MVC!</span>") <br /> <button type='button' onclick='alert("hi JavaScript")'> Raw 原始字串, 不做 HTML 編碼 </button> <span>hello MVC!</span> HTML JavaScript HTML msg var msg type='button' onclick='alert(""hi JavaScript"")'> Raw 原始字串, 不做 HTML 編碼 </button>"; <p>@html.raw(msg)</p> 1. HTML <button> JavaScript Alert 2. HTML 4-9

$ASP.NET MVC 4-2 HTML 15 c:\filefolder\ @ @ var filepath = @"c:\filefolder\"; <p> 磁碟路徑 : @filepath</p> 磁碟路徑 : c:\mvcfolder\ Server.MapPath() @ var imagevirtualpath = @"/Assets/images/SteveJobs.$

10 ASP.NET MVC 4-2 HTML var filepath <p> 磁碟路徑磁碟路徑 : c:\mvcfolder\ var imagevirtualpath <p>virtual Path 虛擬路徑 <p>physical Path 實際路徑 Virtual Path 虛擬路徑 : /Assets/images/SteveJobs.jpg Physical Path 實際路徑 : C:\MvcExamples\MvcRazor\MvcRazor\Assets\images\SteveJobs.jpg 4-10

$4-4 step 01 Model Models Score.cs Shift+Ctrl+B Models\Score.$

11 Razor View Razor Razor Razor Razor Razor View Razor 範例 4-1 製作學生考試成績列表 Controller model model View 4-4 step 01 Model Models Score.cs Shift+Ctrl+B Models\Score.cs public class Score [Display(Name=" 學號 ")] 4-17

12 ASP.NET MVC public int Id get; set; [Display(Name = " 姓名 ")] public string Name get; set; [Display(Name = " 國文 ")] public int Chinese get; set; [Display(Name = " 英文 ")] public int English get; set; [Display(Name = " 數學 ")] public int Math get; set; [Display(Name = " 總分 ")] public int Total get; set; step 02 Controller Controllers RazorScore List Controllers\RazorScoreController.cs using MvcRazor.Models; public class RazorScoreController : Controller // 學生考試成績 Model 資料 protected List<Score> scores = new List<Score> new Score Id =1, Name="Joe", Chinese=88, English=95, Math=71, new Score Id =12, Name="Mary", Chinese=92, English=82, Math=60, new Score Id =23, Name="Cathy", Chinese=98, English=91, Math=94, new Score Id =34, Name="John", Chinese=63, English=85, Math=55, new Score Id =45, Name="David", Chinese=59, English=77, Math=82 ;... Class scores scores List step 03 Action RazorScore Scores() model View 4-18

$Razor View 4 Controllers\RazorScoreController.cs public ActionResult Scores() return View(scores); step 04 View Scores () List Score (MvcRazor.$

13 Razor View 4 Controllers\RazorScoreController.cs public ActionResult Scores() return View(scores); step 04 View Scores () List Score (MvcRazor.Models) 4-5 Scaffolding View step 05 View ViewBag.Title = " 學生期中考成績 "; <h2> 學生期中考成績 </h2>... F5 RazorScore/Scores

$ASP.NET MVC 範例 4-2 以 Razor 語法判斷學生成績高低及找出總分最高者 Razor 60 95 4-6 Razor step 01 RazorScore ScoresRazor() Controllers\RazorScoreController.$

14 ASP.NET MVC 範例 4-2 以 Razor 語法判斷學生成績高低及找出總分最高者 Razor Razor step 01 RazorScore ScoresRazor() Controllers\RazorScoreController.cs public ActionResult ScoresRazor() // 找出總分最高者之 Id int topid = 0; int topscore = 0; foreach (var score in scores) // 計算總分 score.total = score.chinese + score.english + score.math; // 判斷總分最高者 if (score.total > topscore) topscore = score.total; topid = score.id; 4-20

15 Razor View 4 // 將最高分學生 Id 儲存到 ViewBag, 傳遞給 View ViewBag.TopId = Convert.ToInt32(topId); return View(scores); step 02 ScoresRazor() List Score (MvcRazor.Models) step 03 ScoresRazor.cshtml <tbody> Razor Views\RazorScore\ScoresRazor.cshtml... <table class="table table-bordered table-striped"> <thead> <tr> <th>@html.displaynamefor(m => m.id)</th> <th>@html.displaynamefor(m => m.name)</th> <th>@html.displaynamefor(m => m.chinese)</th> <th>@html.displaynamefor(m => m.english)</th> <th>@html.displaynamefor(m => m.math)</th> <th>@html.displaynamefor(m => m.total)</th> </tr> </thead> (var m in Model) var total = m.chinese + m.english + m.math; <tr> <td>@html.displayfor(x => m.id)</td> <td>@html.displayfor(x => m.name)</td> if <!-- 中文 (m.chinese < 60) 60 CSS <td class="poor">@html.displayfor(x => m.chinese)</td> else if (m.chinese >= 95) 95 CSS <td class="excellent">@html.displayfor(x => m.chinese)</td> 4-21

16 ASP.NET MVC else => m.chinese)</td>  <td => m.total)</td> else => m.total)</td> </tr> </tbody> </table> 4-22

Razor View 4 4-6 Razor Helper Helper View View Helper Helper App_Code.cshtml 範例 4-5 自訂全網站可用的 Razor Helper Helper App_Code GlobalHtmlHelper.

17 Razor View Razor Helper Helper View View Helper Helper App_Code.cshtml 範例 4-5 自訂全網站可用的 Razor Helper Helper App_Code GlobalHtmlHelper.cshtml step 01 RazorScore GlobalHtmlHelper () Action step 02 GlobalHtmlHelper () List Score (MvcRazor.Models) step 03 App_Code 4-7 App_Code 4-29

18 ASP.NET MVC step 04 App_Code MyHelper.cshtml Helper DisplayScore(int score) if (score < 60) <td else if (score >= 95) <td DisplayTopScore(int id, int topid, int total) if (id == topid) <td else Helper Display TopScore() step 05 GlobalHtmlHelper.cshtml MyHelper Views\RazorScore\GlobalHtmlHelper.cshtml (var m in Model) 4-30

19 Razor View 4... </tbody> </tr> <!-- 中文 <!-- 英文 <!-- 數學 <!-- 總分 topid, m.total) MyHelpers Razor step 06 topcss... CSS customstyle.css <link> topcss <link href="~/assets/css/customstyle.css" rel="stylesheet" CSS JavaScript 4-7 Partial View Partial View View Partial View View 4-31

20 ASP.NET MVC Partial View Partial View Partial View.cshtml Views Partial View Views Partial View Render Parent View 4-8 Partial View 1. Partial View View Parent View 2. Partial 3. Partial View View.csthml 4. Partial View View Parent View Views\Shared Parent View 4-32

21 Razor View 4 5. Parent View Partial View Shared 6. _Layout.cshtml Partial View Partial View View Partial View View.cshtml 1. Partial View _ViewStart.cshtml 2. Partial View Section Section Parent View 3. Partial View <style /> <script /> JavaScript Parent View Parent View Partial View JavaScript 4. Partial View chained Partial View Partial View Parent View Partial View ViewData model ViewData Partial View Parent View Partial View 名稱 ", ViewData) 4-33

ASP.NET MVC 1. Partial View Parent View ViewDataDictionary 2. Partial View ViewData Parent View 3. Partial View ViewData model Partial View Parent View model Partial View @Html.

22 ASP.NET MVC 1. Partial View Parent View ViewDataDictionary 2. Partial View ViewData Parent View 3. Partial View ViewData model Partial View Parent View model Partial model 物件 ) model Partial PartialAsync RenderPartial RenderPartialAsync 範例 4-6 將人物牌卡製作成 Partial View, 供所有 View 呼叫使用 Partial View View 4-9 Partial View 4-34

$Razor View 4 step 01 Views\Shared SimpleCardPartial 4-10 Partial View step 02 Partial View HTML Bootstrap 4-9 Views\Shared\SimpleCardPartial.$

23 Razor View 4 step 01 Views\Shared SimpleCardPartial 4-10 Partial View step 02 Partial View HTML Bootstrap 4-9 Views\Shared\SimpleCardPartial.cshtml <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12"> </div> <div class="card"> </div> <div class="headshot"> </div> <img class="card-img-top" src="~/assets/images/markzuckerberg.jpg" alt=""> <div class="card-block"> </div> <h3 class="card-title">mark Zuckerberg</h3> <p class="card-text">facebook 創辦人馬克祖伯克 </p> <a href=" class="btn btn-primary">wiki</a> step 03 Controllers PartialView SimpleCard() Controllers\PartialViewController.cs public ActionResult SimpleCard() 4-35

24 ASP.NET MVC return View(); step 04 SimpleCard () Empty ( ("SimpleCardPartial") Views\Shared\SimpleCardPartial.cshtml ViewBag.Title = "SimpleCard"; <div class="jumbotron"> <h2> 人物牌卡 ( 簡單型 )</h2> </div> Bootstrap row <div class="row"> <!-- 以下連續呼叫 Partial View @Html.Partial("SimpleCardPartial") Parent View Partial View <!-- 等同以下用迴圈執行九次 (int i = 0; i < 9; </div> <!-- 以下是牌卡的樣式定義 topcss <style>.jumbotron text-align: center; background-color: lightcoral; 4-36

25 Razor View 4.card border: 1px solid black; margin-bottom: 30px;.card img width: 100%;.card:hover.card-block background-color: lightgreen;.card,.headshot overflow: hidden;.card-block border-top: 1px solid black; background-color: #ffbf67; padding: 10px;.card-title color: white; background-color: black; display: inline-block; border-radius: 5px; padding: 5px; </style> 1. Partial View Section css js Parent View 2. <style /> css Partial View Parent View css 4-37

26 ASP.NET MVC 3. css Parent View PartialView/SimpleCard Html.Partial() Partial View 4-11 Partial View Partial View Partial View 範例 4-7 傳遞 model 資料到 Partial View, 動態生成不同的牌卡 Partial View model 4-38

$Razor View 4 4-12 model Partial View step 01 Models Card Models\Card.$

27 Razor View model Partial View step 01 Models Card Models\Card.cs public class Card public string Name get; set; // 名字 public string Brief get; set; // 簡介 public string Photo get; set; // 照片 public string WikiUrl get; set; //Wiki 的 Url step 02 PartialView ManCard() Controllers\PartialViewController.cs public ActionResult ManCard() List<Card> cards = new List<Card> new Card Name = "Elon Musk", Brief=" 特斯拉創辦人伊隆馬斯克 ", Photo="ElonMusk.jpg", WikiUrl=" new Card Name = "Mark Zuckerberg", Brief="Facebook 創辦人馬克祖伯克 ", Photo="MarkZuckerberg.jpg", WikiUrl=" 4-39

28 ASP.NET MVC ; new Card Name = "Steve Jobs", Brief=" 蘋果創辦人史提夫賈伯斯 ", Photo="SteveJobs.jpg", WikiUrl=" new Card Name = "Vader", Brief=" 帝國元帥維達 ", Photo="Vader.jpg", WikiUrl=" new Card Name = "Darth Mual", Brief=" 星際大戰達斯摩 ", Photo="DarthMual.jpg", WikiUrl=" new Card Name = "White Twilek", Brief=" 星際大戰女絕地武士 Twilek", Photo="WhiteTwilek.jpg", WikiUrl=" return View(cards); List Name Brief Photo WikiUrl cards model View step 03 ManCard () Empty( ) ViewBag.Title = "CardPartialView"; <div class="jumbotron"> <h2> 人物牌卡 ( 動態資料產生 )</h2> </div> <div (var man in Model) Partial View model man); topcss css card.css <link href="~/assets/css/card.css" rel="stylesheet" /> 4-40

29 Razor View 4 Parent View model Html.Partial() Partial View man Partial View step 04 Views\Shared CardPartial MvcRazor.Models.Card <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12"> <div class="card"> model HTML <div class="headshot"> <img class="card-img-top" src="~/assets/images/@model.photo" alt=""> </div> <div class="card-block"> model HTML <h3 class="card-title">@model.name</h3> <p class="card-text">@model.brief</p> <a href="@model.wikiurl" class="btn btn-primary">wiki</a> </div> </div> </div> PartialView/ManCard Partial View Partial View 1. MvcBootstrap Views\Shared Partial View ArticlePartial.cshtml BreakpointPartial.cshtml ColumnHeaderPartial.cshtml MoviePartial.cshtml 4-41

30 ASP.NET MVC 2. MvcJqueryMobile Views\Pages\MultiPagesPartial.cshtml MultiPagesPartialDB.cshtml Views\Shared\HeroPartial.cshtml Partial View Visual Studio Ctrl Razor View model Razor Razor Helper Partial View View 4-42

<ADB6ADB1C25EA8FAA6DB2D4D56432E706466>

<ADB6ADB1C25EA8FAA6DB2D4D56432E706466> packages 3-31 PART 3-31 03-03 ASP.NET ASP.N MVC ASP.NET ASP.N MVC 4 ASP.NET ASP.NE MVC Entity Entity Framework Code First 2 TIPS Visual Studio 20NuGetEntity NuGetEntity Framework5.0 CHAPTER 03 59 3-3-1