諾羅不是病: ASP.NET MVC 5

᳓前言
本篇文章將"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>© @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"。

諾羅不是病

標籤

2017年5月25日星期四

ASP.NET MVC 5 － Adding a View

沒有留言:

張貼留言

標籤

2017年5月25日 星期四

ASP.NET MVC 5 － Adding a View

沒有留言:

張貼留言

2017年5月25日星期四