7、ASP.NET MVC入門到精通——第一個ASP.NET MVC程式

阿新 • • 發佈：2019-01-17

開發流程

新建Controller
建立Action
根據Action建立View
在Action獲取資料並生產ActionResult傳遞給View。
View是顯示資料的模板
Url請求→Controller.Action處理→View響應

url請求→Controller.Action處理→View響應

開發環境：VS2012 、SQL Sserver2008

1、開啟VS，檔案——新建專案Guestbook

點選確定後，會出現如下對話方塊，進行模版的選擇，在這裡你還可以選擇是否建立單元測試，為了養成一個良好的習慣，這裡我勾選了“建立單元測試專案”

這時會建立兩個專案：Guestbook和Guestbook.Tests，將Guestbook設定為啟動專案，然後，按Ctrl-F5或者除錯——開始執行，執行程式，這時VS會自動啟動ASP.NET開發者伺服器，並隨機分配一個埠，以便於我們瀏覽ASP.NET程式。如果要指定這個專案埠，我們可以進行如下設定：右擊專案Guestbook——屬性

Ctrl-F5執行

在解決方案資源管理器中，我們可以看到這個預設應用程式為我們自動新建了許多資料夾和檔案，這是自動建立的專案模版，我們可以參考這個模版進行開發，也可以把模版中一些沒用的東西清理掉。

接下來，我會一一解釋下這個預設的專案模版的內容。

App_Data：用來儲存資料庫檔案，xml檔案或者應用程式需要的一些其它資料

Content：用來存放應用程式中需要用到的一些靜態資原始檔，如圖片和CSS樣式檔案。Content目錄預設情況下包含了本專案中用到的css檔案Site.css，以及一個資料夾themes ，themes 中主要存放jQuery UI元件中要用到的圖片和css樣式。

Controllers：用於存放所有控制器類，預設情況下該目錄下面有兩個控制器——HomeController（負責主頁的請求處理），AccountController（身份證驗證）。控制器負責處理請求，並決定哪一個Action執行，充當一個協調者的角色。

Models：用於存放應用程式的核心類，資料持久化類，或者檢視模型。如果專案比較大，可以把這些類單獨放到一個專案中。目錄中預設包含了一個AccountModels.cs.類，類中包含了一系列和身份驗證相關的類，它是專案預設為我們提供的一個模版。

Scripts：用於存放專案中用到的JavaScript檔案，預設情況下，系統自動添加了一系列的js檔案，包含jquery和jquery驗證等js。

Views：包含了許多用於使用者介面展示的模版，這些模版都是使用Rasor檢視來展示的，子目錄對應著控制器相關的檢視。

Global.asax：存放在專案根目錄下，程式碼中包含應用程式第一次啟動時的初始化操作，諸如路由註冊。

Web.config：同樣存在於專案根目錄，包含ASP.NET MVC正常執行所需的配置資訊。

favicon.ico：存在於應用程式根目錄，應用程式的圖示檔案，顯示在瀏覽器，名稱不能更改，可以使用其它圖片替換。

Controllers類和Action方法

我們來看下預設的HomeController控制器

using System.Web.Mvc;

namespace Guestbook.Controllers
{
    public class HomeController : Controller //繼承自Controller
    {
        /// <summary>
        /// Action方法，返回ActionResult
        /// </summary>
        /// <returns></returns>
        public ActionResult Index() 
        {
            ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";//展現到檢視中資料
            //~/Views/Home/Index.cshtml
            return View(); //展現指定的檢視，當沒有指定檢視名稱時，預設是指向根目錄下Views資料夾中，子資料夾名稱為當前控制器名稱Home，檢視名稱和當前Action名稱一樣
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your app description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }
    }
}

HomeController通過繼承Controller來表示它是一個控制器類，類名的字尾和Controller一樣。控制器通過URL來識別執行的是哪一個Action。

ViewBag本質上是一個字典，它提供了一種View可以訪問的動態資料儲存，這用到了.NET4.0的動態語言特性，你可以給ViewBag新增任意的屬性，這個屬性是動態建立的，你不需要修改類的定義，就可以從View中訪問。

路由——對映URLS到Actions

在asp.net mvc中是如何將URLs對映到控制器中指定的Action的呢？

在Global.asax中 RouteConfig.RegisterRoutes(RouteTable.Routes);這裡進行了路由規則的註冊。

開啟App_Start目錄下面的RouteConfig.cs

using System.Web.Mvc;
using System.Web.Routing;

namespace Guestbook
{
    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                name: "Default", //路由名稱
                url: "{controller}/{action}/{id}", //URL模版
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional } //預設路由
            );
        }
    }
}

從這裡可以看出應用程式啟動的時候，預設是呼叫了HomeController控制器中的Index方法

返回string的MVC方法

在Home控制器中，新增如下程式碼：

        public string Say()
        {
            return "Hello,World!";
        }

執行，在位址列輸入地址：http://localhost:8002/Home/Say，執行結果如下：

返回載入檢視的方法

在Home控制器中，新增如下程式碼：

        /// <summary>
        /// 會 載入檢視 的 Action方法，預設 載入 View資料夾中
        /// 與 控制器同名的 資料夾裡的
        /// 與 Action方法同名的 檢視
        /// </summary>
        /// <returns></returns>
        public ViewResult List()
        {
            return View();
        }

List檢視

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>List</title>
</head>
<body>
    <div>
       <p>你好啊</p>
    </div>
</body>
</html>

簡單瞭解Razor檢視

我們看到cshtml字尾的就是Razor檢視了，在ASP.NET MVC中官方給出了兩種預設檢視，一種是ASPX（就是傳統的WebForm），一種就是Razor了。

在檢視中，我們可以直接呼叫C#程式碼和程式碼塊，只要在呼叫之前加一個@符號就可以了。程式碼塊要用大括號括起來。

修改list檢視程式碼

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>List</title>
</head>
<body>
    <div>
     @for (int i = 0; i < 100; i++)
     {
         <p>@i</p>
     }
    </div>
</body>
</html>

Razor引擎，會自動識別"<"符號，如果有“<"符號，就會當成html程式碼處理，如果是@符號就會當成C#程式碼處理。

7、ASP.NET MVC入門到精通——第一個ASP.NET MVC程式

開發流程

Controllers類和Action方法

路由——對映URLS到Actions

返回string的MVC方法

返回載入檢視的方法

簡單瞭解Razor檢視

7、ASP.NET MVC入門到精通——第一個ASP.NET MVC程式

《Go語言入門》第一個Go語言Web程式——簡單的Web伺服器

Servlet入門（第一個Servlet的Web程式）

Pro ASP.NET Core MVC(二)【第一個MVC 應用程式】

SQLite.Net使用入門(二)【結合Asp.Net MVC】

Asp.net core實戰4: 建立你的第一個Asp.net core專案

1、springboot入門------搭建第一個helloword

2019年第一天——使用Visual Studio 2019 Preview建立第一個ASP.Net Core3.0的App

Kubernetes初探[1]：部署你的第一個ASP.NET Core應用到k8s叢集

第一個ASP.net網頁（1）

用Visual Studio建立第一個ASP.NET頁面

《Python入門》第一個Python Web程式——簡單的Web伺服器

《Go語言入門》第一個Go語言程式——HelloWorld

html css 零基礎入門之第一個html程式碼（注重於vscode的安裝使用）

U-net：執行你的第一個U-net進行影象分割

子雨大資料之Spark入門教程---Spark2.1.0入門：第一個Spark應用程式：WordCount 2.2

7、Linux核心如何裝載和啟動一個可執行程式

Aseprite入門：第一個gif動圖

Unity引擎入門——製作第一個2D遊戲（1）

Unity引擎入門——製作第一個2D遊戲（2）角色移動與動畫

7、ASP.NET MVC入門到精通——第一個ASP.NET MVC程式

開發流程

Controllers類和Action方法

路由——對映URLS到Actions

返回string的MVC方法

返回載入檢視的方法

簡單瞭解Razor檢視

相關推薦