Change History
Message: Learn MVC Project in 7 days – Day 1 – Lab 2 – Demonstrating Views
Changed By: RandomVariable
Change Date: January 23, 2017 02:23AM
Learn MVC Project in 7 days – Day 1 – Lab 2 – Demonstrating Views
=======================================================
[url=https://www.codeproject.com/articles/866143/learn-mvc-step-by-step-in-days-day]Learn MVC Project in 7 days – Day 1[/url]
=======================================================
[url=https://www.codeproject.com/articles/866143/learn-mvc-project-in-days-day#Lab2%E2%80%93DemonstratingViews]Lab 2 – Demonstrating Views[/url]
Lab 2 – 示範「Viewsã€)
=======================================================
目的:
(一)了解 View
(二)了解 Action Method 回傳值的型別(Type)
=======================================================
æ¥é©Ÿï¼š(詳見原文)
(1) 在å‰ä¾‹çš„ TestController 裡é¢å»ºç«‹ä¸€å€‹æ–°çš„ Action Method 如下:
[code]
public ActionResult GetView()
{
return View("MyView");
}
[/code]
(2)建立一個 View ,åå—å«åšã€ŒMyViewã€
æ–¹æ³•ï¼šæŠŠæ»‘é¼ æ¸¸æ¨™æ”¾åœ¨ä¸Šä¾‹çš„ GetView() 程å¼ä¸Šé¢ æŒ‰æ»‘é¼ å³éµï¼Œé¸ Add View ,其他詳見原文,
建立完æˆå¾Œï¼Œåœ¨ View/Test 資料夾下é¢æœƒå‡ºç¾ä¸€å€‹ MyView.cshtml 的網é 檔,如下圖所示
[img]https://www.codeproject.com/KB/aspnet/866143/lab_1.30.png[/img]
(3) 在 MyView.cshtml 網é 檔裡,éµå…¥ä¸‹åˆ—程å¼
[code]
[blockquote]
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>MyView</title>
</head>
<body>
Welcome to MVC 5 Step by Step learning
</body>
</html>
[/blockquote]
[/code]
(4) 在網å€åˆ—éµå…¥ï¼š localhost/Test/GetView
則çµæžœå¦‚下:
[img]https://www.codeproject.com/KB/aspnet/866143/lab_1.31.png[/img]
=======================================================
討論:
(一) View çš„æ„義:
View 是一個網é 檔,æ¤ç¶²é 檔是供 Action Method 來呼å«ï¼Œåšç‚º Action Method 回應使用者的訊æ¯å…§å®¹
(二) View 所屬的 Controller :
原則上,大部分的 View 會屬於æŸå€‹ Controller,
如上例,MyView.cshtml 屬於 TestController
(二) View 所å˜æ”¾çš„ä½ç½®ï¼š
原則上,View å˜æ”¾åœ¨ä¸‹åˆ—å…©é¡žä½ç½®ä¸çš„一類裡é¢
(1)放在其所屬的 Controller 資料夾下é¢ï¼š
原則上,View 會放在 Views/Contorller Name/ 資料夾下é¢
Controller Name 為其所屬的 Controller
如上例ä¸ï¼ŒMyView.cshtml 是放在 Views/Test/ 下é¢
(2)還有一種 View 會放在 Views/Shared 資料夾下é¢
(三) 那些 Action Method å¯ä»¥ å‘¼å« View :
(1)原則上,在æŸä¸€å€‹ Controller 裡é¢æ‰€æœ‰çš„ Action Method 都å¯ä»¥å‘¼å« 屬於該 Controller 的所有 Views
例如: MyView.cshtml 放在 Views/Test/ 下é¢
則所有 TestController 裡é¢çš„ Action Method 都å¯ä»¥å‘¼å« MyView.cshtml
所以 GetView() å¯ä»¥å‘¼å« MyView.cshtml
(2)ä¸åŒçš„ Contorller 裡é¢çš„ Action Method ä¸èƒ½å‘¼å« ä¸å±¬æ–¼è©² Controller 的所有 Views
如果有一個 Action Method 在 Second Controller 裡é¢
則它ä¸èƒ½å‘¼å«ä¸Šä¾‹ä¸çš„ MyView.cshtml
但它å¯ä»¥å‘¼å«ä½æ–¼ Views/Second 資料夾裡é¢çš„所有的 Views
(3)放在 Views/Shared çš„ View å¯ä»¥è¢«æ‰€æœ‰ä»»æ„ Controller 裡é¢çš„ Action Method 呼å«
所以 é€™å€‹è³‡æ–™å¤¾å« Shared
(å››) Action Method å‘¼å« View 的方法:
(1)呼å«ä¸åŒåçš„ View:
[code]
return("View çš„å稱",åƒæ•¸)
[/code]
所以上例ä¸çš„ Action Method GetView() å‘¼å« MyView.cshtml 的方法為
[code]
return("MyView")
[/code]
(2)呼å«åŒåçš„ View:
如果 Action Method 與 View åŒå,則呼å«æ™‚,Viewçš„å稱å¯çœç•¥ï¼Œå¦‚
[code]
return View()
[/code]
(五) 一個 ActionResult å¯ä»¥å‘¼å«å¤šå€‹ View,
當然實際上åªæœƒå‘¼å«å…¶ä¸çš„一個
å› ç‚º 一 Return, Methodå°±çµæŸäº†
例:
[code]
public ActionResult GetView()
{
if(Some_Condition_Is_Matching)
{
return View("MyView");
}
else
{
return View("YourView");
}
}
[/code]
(五) Action Method 的傳回值的型別
一ã€å›žå‚³åž‹åˆ¥å¯èƒ½å¾ˆå¤šç¨®
在 Lab 1 ä¸ï¼Œæˆ‘們看到了 Action Method å¯ä»¥å›žå‚³çµ¦ä½¿ç”¨è€…的訊æ¯ç¨®é¡žå¾ˆå¤šï¼Œæ‰€ä»¥ Action Method 回傳值的型別å¯èƒ½æœ‰å¾ˆå¤šç¨®
(1)å—串型別:
在Lab 1 ä¸ï¼ŒAction Method 我們有回傳 å—串的例å,æ¤æ™‚,回傳型別為 String
[code]
public class TestController : Controller
{
public string GetString()
{
return "Hello World is old now. It’s time for wassup bro winking smiley";
}
}
[/code]
å…¶ä¸ï¼Œå®£å‘Šçš„地方為
[code]
public string GetString()
[/code]
所以,回傳型別為 string
(2)物件型別:
在 Lab 1 ,也有回傳物件的例å,æ¤æ™‚,回傳值的型別為該物件:
原程å¼å¦‚下:
[code]
namespace WebApplication1.Controllers
{
public class Customer
{
public string CustomerName { get; set; }
public string Address { get; set; }
}
public class TestController : Controller
{
public Customer GetCustomer()
{
Customer c = new Customer();
c.CustomerName = "Customer 1";
c.Address = "Address1";
return c;
}
}
}
[/code]
å…¶ä¸ï¼Œå®£å‘Šçš„地方為
[code]
public Customer GetCustomer()
etCustomer()
Method 的傳回值的型別
一ã€å›žå‚³åž‹åˆ¥å¯èƒ½å¾ˆå¤šç¨®
在 Lab 1 ä¸ï¼Œæˆ‘們看到了 Action Method å¯ä»¥å›žå‚³çµ¦ä½¿ç”¨è€…的訊æ¯ç¨®é¡žå¾ˆå¤šï¼Œæ‰€ä»¥ Action Method 回傳值的型別å¯èƒ½æœ‰å¾ˆå¤šç¨®
(1)å—串型別:
在Lab 1 ä¸ï¼ŒAction Method 我們有回傳 å—串的例å,æ¤æ™‚,回傳型別為 String
[code]
public class TestController : Controller
{
public string GetString()
{
return "Hello World is old now. It’s time for wassup bro winking smiley";
}
}
[/code]
å…¶ä¸ï¼Œå®£å‘Šçš„地方為
[code]
public string GetString()
[/code]
所以,回傳型別為 string
(2)物件型別:
在 Lab 1 ,也有回傳物件的例å,æ¤æ™‚,回傳值的型別為該物件:
原程å¼å¦‚下:
[code]
namespace WebApplication1.Controllers
{
public class Customer
{
public string CustomerName { get; set; }
public string Address { get; set; }
}
public class TestController : Controller
{
public Customer GetCustomer()
{
Customer c = new Customer();
c.CustomerName = "Customer 1";
c.Address = "Address1";
return c;
}
}
}
[/code]
å…¶ä¸ï¼Œå®£å‘Šçš„地方為
[code]
public Customer GetCustomer()
[/code]
所以,回傳型別為 Customer 物件
(3) ContentResult
(4) ViewResult
(5) ActionResult
ActionResult 是一個 Abstract Class,
它有一個å類別(subClass)å« ViewResultBase,
然後 ViewResultBase 有一個å類別(subClass)å« ViewResult
所以 ViewResult 是 ActionResult 下é¢å¥½å¹¾å±¤çš„ å類別 (multilevel child )
(6)多型(polymorphism)的回傳值
例:
[code]
public ActionResult GetView()
{
if(Some_Condition_Is_Matching)
{
return View("MyView");
}
else
{
return Content("Hi Welcome");
}
}
[/code]
(七) View() Function 的目的
Changed By: RandomVariable
Change Date: January 23, 2017 02:18AM
Learn MVC Project in 7 days – Day 1 – Lab 2 – Demonstrating Views
Changed By: RandomVariable
Change Date: January 23, 2017 02:14AM
Learn MVC Project in 7 days – Day 1 – Lab 2 – Demonstrating Views
Changed By: RandomVariable
Change Date: January 23, 2017 02:07AM
Learn MVC Project in 7 days – Day 1 – Lab 2 – Demonstrating Views
Changed By: RandomVariable
Change Date: January 23, 2017 02:04AM
Learn MVC Project in 7 days – Day 1 – Lab 2 – Demonstrating Views
Changed By: RandomVariable
Change Date: January 23, 2017 01:51AM
Learn MVC Project in 7 days – Day 1 – Lab 2 – Demonstrating Views
Changed By: RandomVariable
Change Date: January 23, 2017 01:50AM
Learn MVC Project in 7 days – Day 1 – Lab 2 – Demonstrating Views
Changed By: RandomVariable
Change Date: January 23, 2017 01:49AM
Learn MVC Project in 7 days – Day 1 – Lab 2 – Demonstrating Views
Changed By: RandomVariable
Change Date: January 23, 2017 01:41AM
Learn MVC Project in 7 days – Day 1 – Lab 2 – Demonstrating Views
Changed By: RandomVariable
Change Date: January 23, 2017 01:39AM
Learn MVC Project in 7 days – Day 1 – Lab 2 – Demonstrating Views
Changed By: RandomVariable
Change Date: January 23, 2017 01:34AM
Learn MVC Project in 7 days – Day 1 – Lab 2 – Demonstrating Views
Original Message
作者: RandomVariable
Date: January 23, 2017 12:57AM
Learn MVC Project in 7 days – Day 1 – Lab 2 – Demonstrating Views
=======================================================
[url=https://www.codeproject.com/articles/866143/learn-mvc-step-by-step-in-days-day]Learn MVC Project in 7 days – Day 1[/url]
=======================================================
[url=https://www.codeproject.com/articles/866143/learn-mvc-project-in-days-day#Lab2%E2%80%93DemonstratingViews]Lab 2 – Demonstrating Views[/url]
Lab 2 – 示範「Viewsã€)
=======================================================
目的:
ºŒ)了解 Action Method 回傳值的型別(Type)
=======================================================
æ¥é©Ÿï¼š(詳見原文)
(1) 在å‰ä¾‹çš„ TestController 裡é¢å»ºç«‹ä¸€å€‹æ–°çš„ Action Method 如下:
[code]
public ActionResult GetView()
{
return View("MyView");
}
[/code]
(2)建立一個 View ,åå—å«åšã€ŒMyViewã€
æ–¹æ³•ï¼šæŠŠæ»‘é¼ æ¸¸æ¨™æ”¾åœ¨ä¸Šä¾‹çš„ GetView() 建立完æˆå¾Œï¼Œåœ¨ View/Test 資料夾下é¢æœƒå‡ºç¾ä¸€å€‹ MyView.cshtml 的網é 檔
(3) 在 MyView.cshtml 網é 檔裡,éµå…¥ä¸‹åˆ—程å¼
View ,其他詳見原文,
建立完æˆå¾Œï¼Œåœ¨ View/Test 資料夾下é¢æœƒå‡ºç¾ä¸€å€‹ MyView.cshtml 的網é 檔,如下圖所示
[img]https://www.codeproject.com/KB/aspnet/866143/lab_1.30.png[/img]
(3) 在 MyView.cshtml 網é 檔裡,éµå…¥ä¸‹åˆ—程å¼
[code]
[blockquote]
@{
Layout = null;
}
MyView
Welcome to MVC 5 Step by Step learning
[/blockquote]
[/co² Controller 的所有 Views
原則上,大部 (1)放在其所屬的 Controller 資料夾下é¢ï¼š
原則上,View 會放在 Views/Contorller Name/ 資料夾下é¢
Controller Name 為其所屬的 Controller
如上例ä¸ï¼ŒMyView.cshtml 是放在 Views/Test/ 下é¢
(2)還有一種 View 會放在 Views/Shared 資料夾下é¢
(三) 那些 Action Method å¯ä»¥ å‘¼å« View :
(1)原則上,在æŸä¸€å€‹ Controller 裡é¢æ‰€æœ‰çš„ Action Method 都å¯ä»¥å‘¼å« 屬於該 Controller 的所有 Views
例如: MyView.cshtml 放在 Views/Test/ 下é¢
ew 會屬於æŸå€‹ Controller,
如上例,MyView.cshtml 屬於 TestController
(二) View 所å˜æ”¾çš„ä½ç½®ï¼š
原則上,View å˜æ”¾åœ¨ä¸‹åˆ—å…©é¡žä½ç½®ä¸çš„一類裡é¢
(1)放在其所屬的 Controller 資料夾下é¢ï¼š
原則上,View 會放在 Views/Contorller Name/ 資料夾下é¢
Controller Name 為其所屬的 Controller
如上例ä¸ï¼ŒMyView.cshtml 是放在 Views/Test/ 下é¢
(2)還有一種 Vi (3)放在 Views/Shared çš„ View å¯ä»¥è¢«æ‰€æœ‰ä»»æ„ Controller 裡é¢çš„ Action Method 呼å«
所以 é€™å€‹è³‡æ–™å¤¾å« Shared
(4)呼å«åŒåçš„ ViewtView() å¯ä»¥å‘¼å« MyView.cshtml
(2)ä¸åŒçš„ Contorller 裡é¢çš„ Action Method ä¸èƒ½å‘¼å« ä¸å±¬æ–¼è©² Controller 的所有 Views
如果有一個 Action Method 在 Second Controller 裡é¢
則它ä¸èƒ½å‘¼å«ä¸Šä¾‹ä¸çš„ MyView.cshtml
但它å¯ä»¥å‘¼å«ä½æ–¼ Views/Second 資料夾裡é¢çš„所有的 Views
(3)放在 Views/Shared çš„ View å¯ä»¥è¢«æ‰€æœ‰ä»»æ„ Controller 裡é¢çš„ Action Method 呼å«
所以 é€™å€‹è³‡æ–™å¤¾å« Shared
(å››) Action Method å‘¼å« View 的方法:
(1)呼å«ä¸åŒåçš„ View:
[code]
ret 如果上例ä¸çš„ Action Method GetView() å‘¼å« MyView.cshtml 的方法為
[code]
return("MyView")
[/code]
(2)呼å«åŒåçš„ View:
如果 Action Method 與 View åŒå,則呼å«æ™‚,Viewçš„å稱å¯çœç•¥ï¼Œå¦‚
[code]
return View()
[/code]urn("View çš„å稱",åƒæ•¸)
[/code]
所以上例ä¸çš„ Action Method GetView() å‘¼å« MyView.cshtml 的方法為
[code]
return("MyView")
[/code]
(2)呼å«åŒåçš„ View:
如果 Action Method 與 View åŒå,則呼å«æ™‚,Viewçš„å稱å¯çœç•¥ï¼Œå¦‚
[code]
return View()
[/code]
(五) Action Method 的傳回值的型別
一ã€å›žå‚³åž‹åˆ¥å¯èƒ½å¾ˆå¤šç¨®
在 Lab 1 ä¸ï¼Œæˆ‘們看到了 Action Method å¯ä»¥å›žå‚³çµ¦ä½¿ç”¨è€…的訊æ¯ç¨®é¡žå¾ˆå¤šï¼Œæ‰€ä»¥ Action Met 在Lab 1 ä¸ï¼ŒAction Method 回傳了 å—串,所以回傳型別為 String
[code]
public class TestController : Controller
{
public string GetString()
{
return "Hello World is old now. It’s time for wassup bro winking smiley";
}
}
[/code]
å…¶ä¸ï¼Œå®£å‘Šçš„地方為
[code]
public string GetString()
[/code]hod 回傳值的型別å¯èƒ½æœ‰å¾ˆå¤šç¨®
(1)å—串型別:
在Lab 1 ä¸ï¼ŒAction Method 我們有回傳 å—串的例å,æ¤æ™‚,回傳型別為 String
[code]
public class TestController : Controller
{
public string GetString()
{
return "Hello World is old now. It’s time for wassup bro winking smiley";
}
}
[/code]
å…¶ä¸ï¼Œå®£å‘Šçš„地方為
[code]
public string GetString()
[/code]
所以,回傳型別為 string
(2)物件型別:
在 Lab 1 ,也有回傳物件的例å,æ¤æ™‚,回傳值的型別為該物件:
原程å¼å¦‚下:
[code]
namespace WebApplication1.Controllers
{
public class Customer
{
public string CustomerName { get; set; }
public string Address { get; set; }
}
public class TestController : Controller
{
public Customer GetCustomer()
{
Customer c = new Customer();
c.CustomerName = "Customer 1";
c.Address = "Address1";
return c;
}
}
}
[/code]
å…¶ä¸ï¼Œå®£å‘Šçš„地方為
[code]
public Customer GetCustomer()
[/code]
所以,回傳型別為 Customer 物件³åž‹åˆ¥ç‚º String
[code]
public class TestController : Controller
{
public string GetString()
{
return "Hello World is old now. It’s time for wassup bro winking smiley";
}
}
[/code]
å…¶ä¸ï¼Œå®£å‘Šçš„地方為
[code]
public string GetString()
[/code]
所以,回傳型別為 string
(2)物件型別:
在 Lab 1 ,也有回傳物件的例å,æ¤æ™‚,回傳值的型別為該物件:
原程å¼å¦‚下:
[code]
namespace WebApplication1.Controllers
{
public class Customer
{
public string CustomerName { get; set; }
public string Address { get; set; }
€‹ View,
當然實際上åªæœƒå‘¼å«å…¶ä¸çš„一個
å› ç‚º 一 Return, Methodå°±çµæŸäº†
例:
[code]
public ActionResult GetView()
{
if(Some_Condition_Is_Matching)
{
return View("MyView");
}
else
{
return View("YourView");
}
}
[/code]
(五) Action Method 的傳回值的型別
一ã€å›žå‚³åž‹åˆ¥å¯èƒ½å¾ˆå¤šç¨®
在 Lab 1 ä¸ï¼Œæˆ‘們看到了 Action Method å¯ä»¥å›žå‚³çµ¦ä½¿ç”¨è€…的訊æ¯ç¨®é¡žå¾ˆå¤šï¼Œæ‰€ä»¥ Action Method 回傳值的型別å¯èƒ½æœ‰å¾ˆå¤šç¨®
(1)å—串型別:
在Lab 1 ä¸ï¼ŒAction Method 我們有回傳 å—串的例å,æ¤æ™‚,回傳型別為 String
[code]
public class TestController : Controller
{
public string GetString()
{
return "Hello World is old now. It’s time for wassup bro winking smiley";
}
}
[/code]
å…¶ä¸ï¼Œå®£å‘Šçš„地方為
[code]
public string GetString()
[/code]
所以,回傳型別為 string
(2)物件型別:
在 Lab 1 ,也有回傳物件的例å,æ¤æ™‚,回傳值的型別為該物件:
原程å¼å¦‚下:
[code]
namespace WebApplication1.Controllers
{
public class Customer
{
public string CustomerName { get; set; }
public string Address { get; set; }
}
public class TestController : Controller
{
public Customer GetCustomer()
{
Customer c = new Customer();
c.CustomerName = "Customer 1";
c.Address = "Address1";
return c;
}
}
}
[/code]
å…¶ä¸ï¼Œå®£å‘Šçš„地方為
[code]
public Customer GetCustomer()
Method 的傳回值的型別
一ã€å›žå‚³åž‹åˆ¥å¯èƒ½å¾ˆå¤šç¨®
在 Lab 1 ä¸ï¼Œæˆ‘們看到了 Action Method å¯ä»¥å›žå‚³çµ¦ä½¿ç”¨è€…的訊æ¯ç¨®é¡žå¾ˆå¤šï¼Œæ‰€ä»¥ Action Method 回傳值的型別å¯èƒ½æœ‰å¾ˆå¤šç¨®
(1)å—串型別:
在Lab 1 ä¸ï¼ŒAction Method 我們有回傳 å—串的例å,æ¤æ™‚,回傳型別為 String
[code]
public class TestController : Controller
{
public string GetString()
{
return "Hello World is old now. It’s time for wassup bro winking smiley";
}
}
[/code]
å…¶ä¸ï¼Œå®£å‘Šçš„地方為
[code]
public string GetString()
[/code]
所以,回傳型別為 string
(2)物件型別:
在 Lab 1 ,也有回傳物件的例å,æ¤æ™‚,回傳值的型別為該物件:
原程å¼å¦‚下:
[code]
namespace WebApplication1.Controllers
{
public class Customer
{
public string CustomerName { get; set; }
public string Address { get; set; }
}
public class TestController : Controller
{
public Customer GetCustomer()
{
Customer c = new Customer();
c.CustomerName = "Customer 1";
c.Address = "Address1";
return c;
}
}
}
[/code]
å…¶ä¸ï¼Œå®£å‘Šçš„地方為
[code]
public Customer GetCustomer()
[/code]
所以,回傳型別為 Customer 物件
(3) ContentResult
(4) ViewResult
(5) ActionResult
ActionResult 是一個 Abstract Class,
它有一個å類別(subClass)å« ViewResultBase,
然後 ViewResultBase 有一個å類別(subClass)å« ViewResult
所以 ViewResult 是 ActionResult 下é¢å¥½å¹¾å±¤çš„ å類別 (multilevel child )
(6)多型(polymorphism)的回傳值
例:
[code]
public ActionResult GetView()
{
if(Some_Condition_Is_Matching)
{
return View("MyView");
}
else
{
return Content("Hi Welcome");
}
}
[/code]
(七) View() Function 的目的