七、ASP.NET MVC入門到精通——第一個ASP.NET MVC程序

時間 2019-11-16

標籤 asp.net asp mvc 入門精通第一個程序欄目 ASP 简体版

原文原文鏈接

本系列目錄：ASP.NET MVC4入門到精通系列目錄彙總css

開發流程

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

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

開發環境：VS2012 、SQL Sserver2008jquery

一、打開VS，文件——新建項目Guestbook數據庫

點擊肯定後，會出現以下對話框，進行模版的選擇，在這裏你還能夠選擇是否建立單元測試，爲了養成一個良好的習慣，這裏我勾選了「建立單元測試項目」瀏覽器

這時會建立兩個項目：Guestbook和Guestbook.Tests，將Guestbook設置爲啓動項目，而後，按Ctrl-F5或者調試——開始執行，運行程序，這時VS會自動啓動ASP.NET開發者服務器，並隨機分配一個端口，以便於咱們瀏覽ASP.NET程序。若是要指定這個項目端口，咱們能夠進行以下設置：右擊項目Guestbook——屬性服務器

Ctrl-F5運行mvc

在解決方案資源管理器中，咱們能夠看到這個默認應用程序爲咱們自動新建了許多文件夾和文件，這是自動建立的項目模版，咱們能夠參考這個模版進行開發，也能夠把模版中一些沒用的東西清理掉。app

接下來，我會一一解釋下這個默認的項目模版的內容。asp.net

App_Data：用來存儲數據庫文件，xml文件或者應用程序須要的一些其它數據post

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方法

因此咱們在地址欄輸入http://localhost:8001/Home/Index 和 http://localhost:8001/訪問的結果是同樣的。

返回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#代碼處理。

相關標籤/搜索

Asp.net MVC

mvc+httpclient+asp.net

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。