ASP.NET MVC 5 － Adding a Model

᳓前言
本篇文章將"Adding a Model"、"Creating a Connection String and Working with SQL Server LocalDB"與"Accessing Your Model's Data from a Controller"的前半部分合併整理而成，後半部分有一些其他說明，包含Strongly Typed Models以及在Visual Studio中開啟資料表等，有需要的再麻煩去看原文。

᳓重點整理

• 使用被稱為Entity Framework(簡稱為EF)的.NET Framework資料存取技術，進行Model類別的定義及運作。EF支援Code First的開發模式，能夠經由程式碼建立Model物件。
• 修改Web.config的connection string以連接LocalDB。(不建議產品化的應用程式仍然使用local database，可以輕鬆整合至SQL Server或SQL Azure)
• 新增MoviesController.cs，以Controller取得Model資料並透過View顯示在瀏覽器中，且Controller可透過Model進行資料庫的新增、修改、刪除。

᳓實作1. 新增Models/Movie.cs

1. 右鍵Models資料夾 -> Add -> Class

2. 輸入Movie -> Add

᳓實作2. 修改Movie.cs的內容
新增必要的屬性於物件中，每個屬性可視為table中的column(ID、Title、ReleaseDate、Genre、Price)，此物件的每筆instance可視為table的每筆資料。接著新增MovieDBContext，其衍生自EF所提供的DbContext基礎類別(需using System.Data.Entity)，負責處理取得、儲存及更新Movie的instance於資料庫中。

	using System;
	using System.Collections.Generic;
	using System.Data.Entity; // DbContext
	using System.Linq;
	using System.Web;
	namespace WebApplication1.Models
	{
	public class Movie
	{
	public int ID { get; set; }
	public string Title { get; set; }
	public DateTime ReleaseDate { get; set; }
	public string Genre { get; set; }
	public decimal Price { get; set; }
	}
	public class MovieDBContext : DbContext
	{
	public DbSet<Movie> Movies { get; set; }
	}
	}

view raw Movie.cs hosted with ❤ by GitHub

᳓實作3. 修改Web.config
新增<connectionStrings>。(connection string的name一定要與DbContext的類別名稱相同，而資料庫的名稱可以自由命名為*.mdf)

	<?xml version="1.0" encoding="utf-8"?>
	<!--
	For more information on how to configure your ASP.NET application, please visit
	http://go.microsoft.com/fwlink/?LinkId=301880
	-->
	<configuration>
	<configSections>
	<!-- For more information on Entity Framework configuration, visit http://go.microsoft.com/fwlink/?LinkID=237468 -->
	<section name="entityFramework" type="System.Data.Entity.Internal.ConfigFile.EntityFrameworkSection, EntityFramework, Version=6.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" requirePermission="false" />
	</configSections>
	<connectionStrings>
	<add name="DefaultConnection" connectionString="Data Source=(LocalDb)\v11.0;AttachDbFilename=|DataDirectory|\aspnet-WebApplication1-20170525034836.mdf;Initial Catalog=aspnet-WebApplication1-20170525034836;Integrated Security=True"
	providerName="System.Data.SqlClient" />
	<add name="MovieDBContext" connectionString="Data Source=(LocalDB)\v11.0;AttachDbFilename=|DataDirectory|Movies.mdf;Integrated Security=True" providerName="System.Data.SqlClient" />
	</connectionStrings>
	<appSettings>
	<add key="webpages:Version" value="3.0.0.0" />
	<add key="webpages:Enabled" value="false" />
	<add key="ClientValidationEnabled" value="true" />
	<add key="UnobtrusiveJavaScriptEnabled" value="true" />
	</appSettings>
	<system.web>
	<authentication mode="None" />
	<compilation debug="true" targetFramework="4.5" />
	<httpRuntime targetFramework="4.5" />
	</system.web>
	<system.webServer>
	<modules>
	<remove name="FormsAuthentication" />
	</modules>
	</system.webServer>
	<runtime>
	<assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
	<dependentAssembly>
	<assemblyIdentity name="Microsoft.Owin.Security" publicKeyToken="31bf3856ad364e35" />
	<bindingRedirect oldVersion="1.0.0.0-3.0.1.0" newVersion="3.0.1.0" />
	</dependentAssembly>
	<dependentAssembly>
	<assemblyIdentity name="Microsoft.Owin.Security.OAuth" publicKeyToken="31bf3856ad364e35" />
	<bindingRedirect oldVersion="1.0.0.0-3.0.1.0" newVersion="3.0.1.0" />
	</dependentAssembly>
	<dependentAssembly>
	<assemblyIdentity name="Microsoft.Owin.Security.Cookies" publicKeyToken="31bf3856ad364e35" />
	<bindingRedirect oldVersion="1.0.0.0-3.0.1.0" newVersion="3.0.1.0" />
	</dependentAssembly>
	<dependentAssembly>
	<assemblyIdentity name="Microsoft.Owin" publicKeyToken="31bf3856ad364e35" />
	<bindingRedirect oldVersion="1.0.0.0-3.0.1.0" newVersion="3.0.1.0" />
	</dependentAssembly>
	<dependentAssembly>
	<assemblyIdentity name="Newtonsoft.Json" culture="neutral" publicKeyToken="30ad4fe6b2a6aeed" />
	<bindingRedirect oldVersion="0.0.0.0-6.0.0.0" newVersion="6.0.0.0" />
	</dependentAssembly>
	<dependentAssembly>
	<assemblyIdentity name="System.Web.Optimization" publicKeyToken="31bf3856ad364e35" />
	<bindingRedirect oldVersion="1.0.0.0-1.1.0.0" newVersion="1.1.0.0" />
	</dependentAssembly>
	<dependentAssembly>
	<assemblyIdentity name="WebGrease" publicKeyToken="31bf3856ad364e35" />
	<bindingRedirect oldVersion="1.0.0.0-1.5.2.14234" newVersion="1.5.2.14234" />
	</dependentAssembly>
	<dependentAssembly>
	<assemblyIdentity name="System.Web.Helpers" publicKeyToken="31bf3856ad364e35" />
	<bindingRedirect oldVersion="1.0.0.0-3.0.0.0" newVersion="3.0.0.0" />
	</dependentAssembly>
	<dependentAssembly>
	<assemblyIdentity name="System.Web.Mvc" publicKeyToken="31bf3856ad364e35" />
	<bindingRedirect oldVersion="1.0.0.0-5.2.3.0" newVersion="5.2.3.0" />
	</dependentAssembly>
	<dependentAssembly>
	<assemblyIdentity name="System.Web.WebPages" publicKeyToken="31bf3856ad364e35" />
	<bindingRedirect oldVersion="1.0.0.0-3.0.0.0" newVersion="3.0.0.0" />
	</dependentAssembly>
	</assemblyBinding>
	</runtime>
	<entityFramework>
	<defaultConnectionFactory type="System.Data.Entity.Infrastructure.LocalDbConnectionFactory, EntityFramework">
	<parameters>
	<parameter value="mssqllocaldb" />
	</parameters>
	</defaultConnectionFactory>
	<providers>
	<provider invariantName="System.Data.SqlClient" type="System.Data.Entity.SqlServer.SqlProviderServices, EntityFramework.SqlServer" />
	</providers>
	</entityFramework>
	</configuration>

view raw Web.config hosted with ❤ by GitHub

᳓實作4. 新增Controllers/MoviesController.cs
由於這次選擇的是"MVC 5 Controller with views, using Entity Framework"，因此新增完畢後會自行於MoviesController.cs中新增CRUD (Create, Read, Update, and Delete) Action程式碼，並於自動建立Views/Movies的資料夾時 一併建立其頁面Create.cshtml、Delete.cshtml、Details.cshtml、Edit.cshtml、Index.cshtml。若是新增Controller時遇到錯誤，請先重新建置專案。

1. 右鍵Controller資料夾 -> Add -> Controller -> MVC 5 Controller with views, using Entity Framework -> Add

2. 選擇Model class(Movie ({WebApplication}.Models))、Data context class(MovieDBContext ({WebApplication}.Models))並輸入Controller name(MoviesController) -> Add

᳓實作5. 透過瀏覽器新增一筆Movie資料
本篇文章並沒有建立LocalDB的說明，因為當第一次進行資料庫存取的同時便會自動建立LocalDB。

1. 在網址列輸入"http://{localhost:port}/Movies"，執行Movies的預設動作(Index) -> Create New

2. 輸入欄位資料(日期格式為月/日/年) -> Create

3. 新增完畢會自動跳回Index頁面，可以看到新增了剛剛所輸入的資料，而其他功能也都可以運作

ASP.NET MVC 5 － Adding a View

᳓前言
本篇文章將"Adding a View"整理而成。

᳓重點整理

• 利用"Razor view engine"能夠優雅的產生HTML，可以最少化所需要輸入的字母與擊鍵數。
• Controller接收到參數後，能夠根據參數去修改View的顯示。

᳓實作1. 新增Views/HelloWorld/Index.cshtml
新增HelloWorldController.cs的同時，會在Views的資料夾底下自動加入同名的HelloWorld資料夾，基於讓程式碼容易管理的習慣性原則，將Index.chtml新增至Views/HelloWorld資料夾中。

1. 右鍵Views/HelloWorld資料夾 -> Add -> MVC 5 View Page with Layout (Razor)

2. 輸入Index -> OK

3. OK(Views/Shared/_Layout.cshtml為可共用的檔案，能與其他cshtml在瀏覽器自動組合呈現)

᳓實作2. 修改Views/HelloWorld/Index.cshtml的內容-標題、文字

	@{
	Layout = "~/Views/Shared/_Layout.cshtml";
	}
	@{
	ViewBag.Title = "Index";
	}
	<h2>Index</h2>
	<p>Hello from our View Template!</p>

view raw Index.cshtml hosted with ❤ by GitHub

右鍵Index.cshtml -> View in Browser或View in Inspector即可檢視頁面
(若按下F5執行則輸入http://{localhost:port}/HelloWorld)

᳓實作3. 修改Views/Shared/_Layout.cshtml的內容
若是在頁面中有部分區域是不變的，例如頁面最上方的header及最下方的footer，藉由共用Shared資料夾中的.cshtml以節省修改的成本。@RenderBody()便是其他cshtml所插入並顯示的區域。

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>@ViewBag.Title - Movie App</title>
	@Styles.Render("~/Content/css")
	@Scripts.Render("~/bundles/modernizr")
	</head>
	<body>
	<div class="navbar navbar-inverse navbar-fixed-top">
	<div class="container">
	<div class="navbar-header">
	<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	</button>
	@Html.ActionLink("MVC Movie", "Index", "Movies", new { area = "" }, new { @class = "navbar-brand" })
	</div>
	<div class="navbar-collapse collapse">
	<ul class="nav navbar-nav">
	<li>@Html.ActionLink("Home", "Index", "Home")</li>
	<li>@Html.ActionLink("About", "About", "Home")</li>
	<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
	</ul>
	@Html.Partial("_LoginPartial")
	</div>
	</div>
	</div>
	<div class="container body-content">
	@RenderBody()
	<hr />
	<footer>
	<p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
	</footer>
	</div>
	@Scripts.Render("~/bundles/jquery")
	@Scripts.Render("~/bundles/bootstrap")
	@RenderSection("scripts", required: false)
	</body>
	</html>

view raw _Layout.cshtml hosted with ❤ by GitHub

修改視窗的標題、頁面左上角的標題

᳓實作4. 修改Controllers/HellowWorldController.cs的內容、新增Views/HelloWorld/Welcome.cshtml並修改內容
HelloWorldController.cs修改Welcome Action的程式碼，傳遞query strings作為Welcome Action的參數，並將其值以ViewBag代入至View的Message、NumTimes參數，而Welcome.chtml則撰寫根據該參數運行迴圈的程式碼。

	using System;
	using System.Collections.Generic;
	using System.Linq;
	using System.Web;
	using System.Web.Mvc;
	namespace WebApplication1.Controllers
	{
	public class HelloWorldController : Controller
	{
	// GET: HelloWorld
	public ActionResult Index()
	{
	return View();
	}
	public ActionResult Welcome(string name, int numTimes = 1)
	{
	ViewBag.Message = "Hello " + name;
	ViewBag.NumTimes = numTimes;
	return View();
	}
	}
	}

view raw HelloWorldController.cs hosted with ❤ by GitHub

	@{
	Layout = "~/Views/Shared/_Layout.cshtml";
	}
	@{
	ViewBag.Title = "Welcome";
	}
	<h2>Welcome</h2>
	<ul>
	@for (int i = 0; i < ViewBag.NumTimes; i++)
	{
	<li>@ViewBag.Message</li>
	}
	</ul>

view raw Welcome.cshtml hosted with ❤ by GitHub

網址列輸入"http://{localhost:port}/HelloWorld/Welcome?name=Scott&numTimes=4"。

ASP.NET MVC 5 － Adding a Controller

᳓前言
本篇文章將"Getting Started"，與"Adding a Controller"合併整理而成。

᳓重點整理
MVC為Model-View-Controller的縮寫，是一種開發應用程式的架構，具有可測試、容易維護等優點。

• Model負責處理資料
• View負責產生HTML的介面
• Controller負責進行資料交換、控制程式運作流程

使用者透過瀏覽器向伺服器送出request後，經由View將request傳送給Controller，Controller會跟Model取得所需的資料並傳送給View，經由View回傳response至瀏覽器並呈現。

᳓實作1. Create a project

1. File -> New -> Project

2. C# -> Web -> ASP.NET Web Application -> OK

3. MVC -> 取消勾選"Host in the cloud" -> OK

᳓實作2. 新增Controllers/HelloWorldController.cs

1. 右鍵Controller folder -> Add -> Controller

2. MVC 5 Controller - Empty -> Add

3. 輸入HelloWorld -> Add

᳓實作3. 修改Controllers/HelloWorldController.cs
在App_Start/RouteConfig.cs中預設的routing格式為/[Controller]/[ActionName]/[Parameters]

	using System;
	using System.Collections.Generic;
	using System.Linq;
	using System.Web;
	using System.Web.Mvc;
	namespace WebApplication1.Controllers
	{
	public class HelloWorldController : Controller
	{
	// GET: HelloWorld
	public string Index()
	{
	return "This is my <b>Default</b> action";
	}
	// GET: HelloWorld/Welcome/
	public string Welcome()
	{
	return "This is the <b>Welcome</b> action";
	}
	}
	}

view raw HelloWorldController_basic.cs hosted with ❤ by GitHub

1. 按下"F5"或"Ctrl+F5"執行即會自動開啟預設瀏覽器，並開啟初始頁面

2. 在網址列輸入"http://{localhost:port}/HelloWorld"，大小寫不拘，執行HellowWorld的預設action(Index)。

3. 在網址列輸入"http://{localhost:port}/HelloWorld/Welcome"，大小寫不拘，執行HellowWorld的Welcome action。(之所以要使用HtmlEncode()是為了防止惡意的輸入)

᳓實作4. 修改Controllers/HelloWorldController.cs的內容-query string
修改Welcome action，它將可傳遞兩個query strings作為Welcome action參數。

	using System;
	using System.Collections.Generic;
	using System.Linq;
	using System.Web;
	using System.Web.Mvc;
	namespace WebApplication1.Controllers
	{
	public class HelloWorldController : Controller
	{
	// GET: HelloWorld
	public string Index()
	{
	return "This is my <b>Default</b> action";
	}
	// GET: HelloWorld/Welcome/
	public string Welcome(string name, int numTimes = 1) // can set the default value
	{
	return HttpUtility.HtmlEncode("Hello " + name + ", NumTimes is: " + numTimes);
	}
	}
	}

view raw HelloWorldController_query_string.cs hosted with ❤ by GitHub

網址列輸入"http://{localhost:port}/HelloWorld/Welcome?name=Scott&numTimes=4"。(name、numTimes大小寫不拘；若numTimes不輸入已預設為1)

᳓實作5. 修改Controllers/HelloWorldController.cs的內容-parameter
修改numTimes為ID，則會去比對RoutConfig.cs中的設定，根據RegisterRoutes方法中的url:"{controller/{action}/{id}}"便能夠判斷ID為傳遞的參數。

	using System;
	using System.Collections.Generic;
	using System.Linq;
	using System.Web;
	using System.Web.Mvc;
	namespace WebApplication1.Controllers
	{
	public class HelloWorldController : Controller
	{
	// GET: HelloWorld
	public string Index()
	{
	return "This is my <b>Default</b> action";
	}
	// GET: HelloWorld/Welcome/
	public string Welcome(string name, int ID = 1)
	{
	return HttpUtility.HtmlEncode("Hello " + name + ", ID: " + ID);
	}
	}
	}

view raw HelloWorldController_parameter.cs hosted with ❤ by GitHub

網址列輸入"http://{localhost:port}/HelloWorld/Welcome/3?name=Rick"，傳遞parameter及query string作為Welcome action的參數。(由於parameter設為int，若輸入字母則會無法辨識)

᳓實作6. 修改App_Start/RoutConfig.cs的內容-parameters
新增一個name:"Hello"的route，便可新增一個新的url判斷，兩者可同時並存。

	using System;
	using System.Collections.Generic;
	using System.Linq;
	using System.Web;
	using System.Web.Mvc;
	using System.Web.Routing;
	namespace WebApplication1
	{
	public class RouteConfig
	{
	public static void RegisterRoutes(RouteCollection routes)
	{
	routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
	routes.MapRoute(
	name: "Default",
	url: "{controller}/{action}/{id}",
	defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
	);
	routes.MapRoute(
	name: "Hello",
	url: "{controller}/{action}/{name}/{id}"
	);
	}
	}
	}

view raw RouteConfig.cs hosted with ❤ by GitHub

網址列輸入"http://{localhost:port}/HelloWorld/Welcome/Scott/3"，傳遞parameters作為Welcome的參數。(若輸入"http://{localhost:port}/HelloWorld/Welcome/3?name=Scott"會有同樣的顯示結果)