ASP.NET MVC 4 入門


MVC 4開發環境與基本知識

檢視引擎(view engines):

  • ASPX

    傳統的頁面架構,保持先前ASP.NET的web form概念使用.aspx/.ascx/.master 等檔案組成 templates 架構,使用<%%>的方式呈現ASP.NET程式碼區段,如下:

      <h1>Hello MVC</h1>
      <p>I am <%=name %></p>
      <% foreach(var skill in skills){ %>
          <li><%=skill.name %></li>
      <% } %>
    
  • Razor

    因關注點分離(Aspect-Oriented Programming)概念所產生的一個新的頁面架構(CSHTML),HTML Helper完全支援該架構(HTML Helper的客製可參考),而該架構設計的重點如下:

    • 避免弄亂你的程式碼(avoid spaghetti code),透過Razor的注入方式即可將整段code插入,讓你的view能更加簡潔,且可將程式碼的關注點逐項分離避免一個頁面有太雜亂的資訊
    • 加速學習-對底層的HTML,js,CSS的概念與技術需更加熟悉但也更容易上手
    • Razor是一個頁面架構而非一個新的程式語言,所以你還是使用C#/VB(or Other)語言做學習,只是在頁面的安排上你透過Razor來簡化你原本的頁面程式注入的架構
    • Razor可以透過一般的文字編輯器即可編輯程式碼(Notepad++,sublimeText都OK),修改.cshtml的檔案時不用重新compile程式,直接修改即可
    • 在VS2010之後的版本都有支援Intellisense,sublimeText也可以安裝package來支援(參考Razor Syntax Definition - Sublime Text 2)
    • 支援單元測試(Unit Test),由於將關注點分離的概念可以使得View上每個Razor的subfunction都可以被拿來當作單元測試,單純檢測View而不用所接受到Controller所傳入的資料才能檢測

    使用@的方式呈現ASP.NET程式碼區段,如下:

      <h1>Hello MVC</h1>
      <p>I am @name </p>
      @ forearch(var skill in skills){
          <li>@skill.name</li>
      }
    

根據ScottGu的推薦好像還有兩個SparkHNaml在先前MVC3時也常被使用,但MVC4之後就是Razor的天下了

NuGet

VS2012已經自動加入了,而透過NuGet做專案內的套件管理,這邊要稍微注意一下NuGet的版本有更新,如果你是用VS 2012安裝好的NuGet記得要更新一下,以下幾個不錯的Tips可參考

MVC架構

mvc

mvc2

目錄架構(以Internet Application Template為例):

  • App_Data

    這邊存放db, XML, 或是任一會使用到資料實體檔案

  • App_Start

    因為加強關注點分離的概念所以這邊寫的東西會在外層的Global.asax.cs實際被註冊與使用的程式碼(a set of static classes)

  • AreaRegistration

    與MVC3之前的使用相同,可將程式分區塊,藉此可以不用將一份程式碼分成兩個專案去管理(如前後台功能的網站,可透過Area的方式直接在同一個專案內分割成不同網站)

    • WebApiConfig

      針對WebAPI所設定的一些Routing與機制

    • FilterConfig

    • RouteConfig

    • BundleConfig

    • AuthConfig

  • Content

    靜態檔案(可能參考到的images、css、js),也包含預設的theme相關檔案(包含minified後的檔案)

  • Controllers

    放所有可以使用的Controller檔案,注意Controllers這邊的檔案命名一定要以Controller結尾,且回傳結果必須為一個View的Class

  • Filters

    Action 過濾器

  • Images

    放使用到的圖檔

  • Models

    放使用到的Model檔案

  • Scripts

    放所有被會被使用到的JS檔案

  • Views

    所有網頁裡面實際的檢視頁面檔案,會按照各頁面的Class名稱分別建立對應的sub-folder

  • Global.asax

    註冊所使用到的程式與服務處

  • packages.config

    所有在專案中透過NuGet管理的套件(package)都會寫在這邊做載名

  • Web.config

    該網頁應用程式的相關設定與參數

整合BootStrap3

-

  • 參考上面設定確認App_start->BootstrapBundle.Config.cs的設定正確,筆者設定如下:
    using System.Web.Optimization;
    [assembly: WebActivatorEx.PostApplicationStartMethod(typeof(BlackieStudio.App_Start.BootstrapBundleConfig), "RegisterBundles")]
    namespace BlackieStudio.App_Start
    {
        public class BootstrapBundleConfig
        {
            public static void RegisterBundles()
            {
                // Add @Styles.Render("~/Content/bootstrap/base") in the <head/> of your _Layout.cshtml view
                // For Bootstrap theme add @Styles.Render("~/Content/bootstrap/theme") in the <head/> of your _Layout.cshtml view
                // Add @Scripts.Render("~/bundles/bootstrap") after jQuery in your _Layout.cshtml view
                // When <compilation debug="true" />, MVC4 will render the full readable version. When set to <compilation debug="false" />, the minified version will be rendered automatically
                BundleTable.Bundles.Add(new ScriptBundle("~/bundles/bootstrap/js").Include("~/Scripts/bootstrap.min.js"));
                BundleTable.Bundles.Add(new StyleBundle("~/bundles/bootstrap/css").Include(
                    "~/Content/bootstrap/bootstrap.min.css",
                    "~/Content/bootstrap/bootstrap-theme.min.css"
                ));
            }
        }
    }
  • 新增一個Views->Shared->_BootStrapLayout.cshtml的頁面內有加入上一個項目所設定的Bootstrap css與js,筆者設定如下:

      <!DOCTYPE html>
      <html>
      <head>
          <meta name="author" content="Blackie Tsai" />
          <meta name="description" content="BlackieStudio Site" />
          <meta name="keywords" content="blackie,blackiestudio" />
          <meta charset="utf-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <title>[BootStrap]BlackieStudio-@ViewBag.Title</title>
    
          @Styles.Render("~/Content/css")
          @Styles.Render("~/Content/themes/base/css")
          @Styles.Render("~/bundles/bootstrap/css")
          @Scripts.Render("~/bundles/modernizr")
      </head>
      <body>
          @RenderBody()
    
          @Scripts.Render("~/bundles/jquery")
          @Scripts.Render("~/bundles/bootstrap/js")
    
          @RenderSection("scripts", required: false)
      </body>
      </html>
    
  • 各頁面加入Bootstrap的配置即可,參考設定如下:

      @{
          ViewBag.Title = "Index";
          Layout = "~/Views/Shared/_BootstrapLayout.cshtml";
      }
      <!--View container -->
      <div id="brief" class="container">
          <div class="starter-template">
          <h1>Hi, I am Blackie</h1>
          <p class="lead">......</p>
          </div>
      </div>
    

References

  1. Introducing “Razor” – a new view engine for ASP.NET
  2. Basic-Understanding-On-ASP-NET-MVC-4
  3. Understanding ASP.NET MVC Project Folders

作者: Blackie
版權聲明: 本站所有文章除特別聲明外,均採用 CC BY 4.0 許可協議。轉載請註明來源 Blackie !
  目錄