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


本系列目錄:ASP.NET MVC4入門到精通系列目錄匯總

開發流程

  • 新建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方法

所以我們在地址欄輸入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#代碼處理。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM