Learn MVC Project in 7 days – Day 2 – Lab 5 - Understand strongly typed Views

週一, 一月 23. 2017

=======================================================


[url=https://www.codeproject.com/articles/897559/learn-mvc-in-days-day]Learn MVC Project in 7 days – Day 2[/url]


=======================================================

[url=https://www.codeproject.com/articles/897559/learn-mvc-in-days-day#Lab5-Understand strongly typed Views]Lab 5 - Understand strongly typed Views[/url]
Lab 3 – 了解 強型別 View

=======================================================

目的:
(一)了解 Action Method 與 View 之間 傳遞 資料 的其中一種方法:model


=======================================================


步驟:(詳見原文)

(一) 將 View 設定成 強型別( strongly typed )

在 View 的最上面 加上下列敘述

[code]
@model WebApplication1.Models.Employee
[/code]


這個使得 View 成為一個 型別 Employee 的 強型別 View ( strongly typed view )


(二)在 View 裡面 使用 變數資料

此時,如果在 View 裡面打上 @Model 再接著打上 點(.),智能系統就會自動列出 Model ( 也就是 Employee Class ) 的所有 property.

[img]https://www.codeproject.com/KB/aspnet/897559/G.png[/img]

鍵入下列程式碼 (不好意思,這裡好像沒辦法打 html 指令)

[code]
Employee Details

Employee Name : @Model.FirstName @Model.LastName

@if(Model.Salary>15000)
{

Employee Salary: @Model.Salary.ToString("C")

}
else
{


Employee Salary: @Model.Salary.ToString("C")

}
[/code]

(三) 將 Model 的資料從 Action Method 傳到 View

鍵入下列程式碼:

[code]
Employee emp = new Employee();
emp.FirstName = "Sukesh";
emp.LastName="Marla";
emp.Salary = 20000;
return View("MyView",emp);
[/code]

(四)測試結果:

[img]https://www.codeproject.com/KB/aspnet/897559/H.png[/img]

=======================================================

討論:

(一)

Learn MVC Project in 7 days – Day 2 – Lab 4 – Using ViewBag

週一, 一月 23. 2017

=======================================================


[url=https://www.codeproject.com/articles/897559/learn-mvc-in-days-day]Learn MVC Project in 7 days – Day 2[/url]


=======================================================

[url=https://www.codeproject.com/articles/897559/learn-mvc-in-days-day#Lab4%E2%80%93UsingViewBag]Lab 4 – Using ViewBag[/url]
Lab 4 – 使用「ViewBag」)

=======================================================

目的:
(一)了解 Action Method 與 View 之間 傳遞 資料 的其中一種方法


=======================================================


步驟:(詳見原文)


(一)建立一個 ViewBag

接續 Lab3 的步驟,並把 Lab3 的 Step 3 的 View 內容 改成下面的程式

[code]
ViewBag.Employee = emp;
return View("MyView");
[/code]


(二)在 View 裡面 印出 Employee 的資料

接續 Lab3 的步驟,並把 Lab3 的 Step 4 的 View 內容 改成下面的程式


[code]
@{
WebApplication1.Models.Employee emp = (WebApplication1.Models.Employee)
ViewBag.Employee;
}
Employee Details

Employee Name: @emp.FirstName @emp.LastName

Employee Salary: @emp.Salary.ToString("C")
[/code]


(三)測試結果

在網址列鍵入:localhost/Test/GetView

結果如下:


[img]https://www.codeproject.com/KB/aspnet/897559/F.png[/img]


=======================================================

討論:

(一)

Learn MVC Project in 7 days – Day 2 – Lab 3 – Using ViewData

週一, 一月 23. 2017

=======================================================


[url=https://www.codeproject.com/articles/897559/learn-mvc-in-days-day]Learn MVC Project in 7 days – Day 2[/url]


=======================================================

[url=https://www.codeproject.com/articles/897559/learn-mvc-in-days-day#Lab3%E2%80%93UsingViewData]Lab 3 – Using ViewData[/url]
Lab 3 – 使用「ViewData」)

=======================================================

目的:
(一)了解 Action Method 與 View 之間 傳遞 資料 的其中一種方法 - ViewData
(二)簡介 Razor 的用法

=======================================================


步驟:(詳見原文)

(一)建立一個 Model Class (模型類別?)

在 Model 資料夾底下 建立一個 Class 叫做 Employee 如下:

[code]
public class Employee
{
public string FirstName { get; set; }
public string LastName { get; set; }
public int Salary { get; set; }
}
[/code]


(二)在 Controller 裡,使用 該 Class

在 Action Method GetView() 裡面,建立一個 Employee object (物件) 如下

[code]
Employee emp = new Employee();
emp.FirstName = "Sukesh";
emp.LastName="Marla";
emp.Salary = 20000;
[/code]


當然,如果可以在程式最上面 使用下列 using 敘述,使用該 class 的時候,就不用打一大串名字

[code]
using WebApplication1.Models;
[/code]


(三)建立 ViewData 物件,並傳給 View

將 Employee 物件存到 ViewData裡面,如下:

[code]
ViewData["Employee"] = emp;
return View("MyView");
[/code]




(四)在 View 裡面,將 Employee 的資料印出來

加入程式碼如下:

[code]

@{
WebApplication1.Models.Employee emp=(WebApplication1.Models.Employee)
ViewData["Employee"];
}

Employee Details

Employee Name : @emp.FirstName@emp.LastName

Employee Salary: @emp.Salary.ToString("C")

[/code]

(五)測式結果:

在網址列鍵入:localhost/Test/GetView

結果如下:


[img]https://www.codeproject.com/KB/aspnet/897559/E.png[/img]


=======================================================

討論:

(一)

Learn MVC Project in 7 days – Day 1 – Lab 2 – Demonstrating Views

週一, 一月 23. 2017

=======================================================


[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;
}




MyView


Welcome to MVC 5 Step by Step learning


[/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()
[/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 的目的

Learn MVC Project in 7 days – Day 1 – Lab 1 – Demonstrating Controller with a simple hello world

週日, 一月 22. 2017

前陣子 在網路上 看到一個網站 介紹 ASP.Net MVC

網站叫做

[url=https://www.codeproject.com/articles/866143/learn-mvc-step-by-step-in-days-day]Learn MVC Project in 7 days[/url]

內容真的很棒
我個人獲益非常多
他總共有七篇文章,讓讀者分七天來學習

內容深入淺出
很適合 初學者 學習
範圍也涵蓋的不錯
學完後,應該可以做不少事情
所以 我想在這裡 把他提到的一些重點 摘要在這裡

他裡面 總共有 36個實驗(Lab),也就是36個例子
我想在這裡 主要以這36個實驗為主軸 來介紹他的內容

我摘要的重點原則上是參考原文
但描述的順序和方式可能會和原文不太一樣

我的文章裡,一直都會附上原文的連結
以方便使用者參考原文

=======================================================


[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#Lab1%E2%80%93DemonstratingControllerwithasimpleMVChelloworld]Lab 1 – Demonstrating Controller with a simple hello world[/url]
Lab1 – 以一個簡單的「hello world」程式來示範「Controller」)

=======================================================

目的:
(1) 了解 Controller
(2)了解 Action Method

=======================================================

步驟:(詳見原文)

(1)建立一個 MVC 專案
(2)在這個MVC專案裡面,建立一個 控制器叫 TestController
(3)將TestController 裡面的 Index() 方法 刪掉,並加入一個 GetSring方法如下:
[code]
public class TestController : Controller
{
public string GetString()
{
return "Hello World is old now. It’s time for wassup bro ;)";
}
}
[/code]

(4)在瀏覽器裡打入下列網址:
localhost/Test/GetString

觀察結果如下:

[img]https://www.codeproject.com/KB/aspnet/866143/lab_1.24.png[/img]

=======================================================

討論:

一、 Controller 名稱的意義:

TestController:Class Name (類別名稱)
Test:Controller Name (控制器名稱)


二、Action Method

(一)意義:Action Method 是一個寫在Controller裡面的 Public Method,它可以接受使用者的要求,並給予使用者一些回應的訊息。

(二)使用者要求 Action Method 的方法:

在網址列打入:網址/Controller Name/Action Method
如上例的: localhost/Test/GetString

請注意,前面寫的是 Controller Name :Test
不是 Class Name :TestController

(三)Action Method 回應使用者一些訊息的方法:

在Action Method的程式 中 寫入 return 指令如下:

[code]
return XXXX
[/code]


(四) 可以回應的訊息種類很多

(1)比如說上例中回應的是字串

寫法如下:

return "Hello World is old now. It’s time for wassup bro ;)";

回應的結果如下:

[img]https://www.codeproject.com/KB/aspnet/866143/lab_1.24.png[/img]

(2)也可以回應物件,如下例的 return c :


[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]

回應的結果如下,它回應的其實是 物件的 ToString() 屬性:

[img]https://www.codeproject.com/KB/aspnet/866143/lab_1.25.png[/img]


(3) 回應物件的屬性:(本例為覆寫(override)物件的 ToString() Method )

例:
[code]
public override string ToString()
{
return this.CustomerName+"|"+this.Address;
}
[/code]

回應結果:

[img]https://www.codeproject.com/KB/aspnet/866143/lab_1.26.png[/img]

(4) 當然,最常見的是回應 View(),也就是

[code]
return View()
[/code]

View 將在下一個 Lab 介紹




三、Controller 裡面的 Method 種類:

(一)Actino Method:一個 Method 如果是 Public ,原則上為 Action Method ,也就是可直接以網址列接受使用者要求的 Method
(二)一般 Method:一個 Method 如果不是 Public,則為 Controller 內部的 一般 Method ,不可接受使用者要求
(三)Public 的一般 Method:如果 Controller 內的一般 Method 想要設成 Public ,可在 Method 上面加上 [NonAction] ,他就不可以接受使用者要求了, 如下例所示:

[code]
[NonAction]
public string SimpleMethod()
{
return "Hi, I am not action method";
}
[/code]

在這個例子裡,如果我們在網址列打上 localhost/Test/SimpleMethod
則瀏覽器畫面會出現下列錯誤訊息:

[img]https://www.codeproject.com/KB/aspnet/866143/lab_1.27.png[/img]

TQC+ 行動裝置進階應用程式設計(Android) - 201. 簡易 Note Widget

週四, 十月 29. 2015

[color=#FF0000][size=large]原始檔:[/size][/color]



[color=#FF0000][size=large]結果檔:[/size][/color]



[color=#FF0000][size=large]執行結果:[/size][/color]

TQC+ 行動裝置進階應用程式設計(Android) - 110. 遠端計算服務程式

週四, 十月 29. 2015

[color=#FF0000][size=large]原始檔:[/size][/color]



[color=#FF0000][size=large]結果檔:[/size][/color]



[color=#FF0000][size=large]執行結果:[/size][/color]

TQC+ 行動裝置進階應用程式設計(Android) - 109. 自製 Android Content Provider

週四, 十月 29. 2015

[color=#FF0000][size=large]原始檔:[/size][/color]



[color=#FF0000][size=large]結果檔:[/size][/color]



[color=#FF0000][size=large]執行結果:[/size][/color]

TQC+ 行動裝置進階應用程式設計(Android) - 108. 自訂 drop-down MENU

週四, 十月 29. 2015

[color=#FF0000][size=large]原始檔:[/size][/color]



[color=#FF0000][size=large]結果檔:[/size][/color]



[color=#FF0000][size=large]執行結果:[/size][/color]

TQC+ 行動裝置進階應用程式設計(Android) - 107. 開機歡迎程式

週四, 十月 29. 2015

[color=#FF0000][size=large]原始檔:[/size][/color]



[color=#FF0000][size=large]結果檔:[/size][/color]



[color=#FF0000][size=large]執行結果:[/size][/color]

TQC+ 行動裝置進階應用程式設計(Android) - 106. 自訂重疊的 Layout

週四, 十月 29. 2015

[color=#FF0000][size=large]原始檔:[/size][/color]



[color=#FF0000][size=large]結果檔:[/size][/color]



[color=#FF0000][size=large]執行結果:[/size][/color]

TQC+ 行動裝置進階應用程式設計(Android) - 105. 自訂三欄式 ListView

週四, 十月 29. 2015

[color=#FF0000][size=large]原始檔:[/size][/color]

Java 檔:GAD01.java


Java 檔:WeatherAdapter.java


Java 檔:Weather.java


[color=#FF0000][size=large]結果檔:[/size][/color]



[color=#FF0000][size=large]執行結果:[/size][/color]

TQC+ 行動裝置進階應用程式設計(Android) - 104. 使用 SlidingDrawer

週四, 十月 29. 2015

[color=#FF0000][size=large]原始檔:[/size][/color]


layout檔: layout\main.xml



畫面:(eclipse)



Java 檔:GDD03.java



[color=#FF0000][size=large]結果檔:[/size][/color]

layout檔: layout\main.xml



畫面:(eclipse)



Java 檔:GDD03.java



[color=#FF0000][size=large]執行結果:[/size][/color]

畫面:(eclipse)


TQC+ 行動裝置進階應用程式設計(Android) - 103. 股價查詢程式

週二, 十月 27. 2015

[color=#FF0000][size=large]原始檔:[/size][/color]


AndroiManifest檔: AndroidManifest.xml



layout檔: layout\main.xml



畫面:(eclipse)



Java 檔:GDD03.java



[color=#FF0000][size=large]結果檔:[/size][/color]


AndroiManifest檔: AndroidManifest.xml


Java 檔:GDD01.java


[color=#FF0000][size=large]執行結果:[/size][/color]

Java 檔:GDD03.java


TQC+ 行動裝置進階應用程式設計(Android) - 102. 自訂兩欄式 ListView

週二, 十月 27. 2015

[color=#FF0000][size=large]原始檔:[/size][/color]


layout檔: layout\main.xml



畫面:(eclipse)



ListView Layout檔: layout\mylistview.xml



Java 檔:GDD03.java



[color=#FF0000][size=large]結果檔:[/size][/color]


layout檔: layout\main.xml



畫面:(eclipse)



ListView Layout檔: layout\mylistview.xml







Java 檔:GDD03.java



[color=#FF0000][size=large]執行結果:[/size][/color]

畫面:(eclipse)