8、ASP.NET MVC入門到精通——View(視圖)


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

View視圖職責是向用戶提供界面。負責根據提供的模型數據,生成准備提供給用戶的格式界面。

支持多種視圖引擎(Razor和ASPX視圖引擎是官方默認給出的,其實還支持其它N種視圖引擎,甚至你自己都可以寫一套視圖引擎)

View和Action之間數據傳遞(前后台數據傳遞)

  弱類型 ViewData[""]

  動態型 ViewBag //dynamic

  動態類型Model
             后台:return View(data); //存入 ViewData.Model
             前台:Model //其實就是 WebViewPage.Model

@using 命名空間

強類型View

        //Control  Action
        public ActionResult Index()
        {
            return View(new User { UserName = "郭靖" });//ViewData.Model屬性
        }

//Index.cshtml

@model MvcApplication.Models.User

<div>@Model.UserName</div>

Razor視圖引擎 語法

Razor為視圖提供精簡的語法,最大限度減少了語法和額外字符串

  • Razor通過理解標記的結構來實現代碼和標記之間的順暢切換。
  • @核心轉換字符,用來 標記-代碼 的轉換字符串。

語境A:申明C#變量,必須放置在{}代碼塊中

@{
    string schoolName="湖南第一師范";
}

語境B:郵件中存在@符號時

Razor引擎識別 @ 和 <>html</>

Razor 語法

Razor表達式自動使用了HTML編碼

如果想向瀏覽器輸出html源代碼, 則使用System.Web.IHtmlString: @Html.Raw("<p>zouyujie</p>")

輸出結果zouyujuie

html源碼

JS字符串編碼

<script>
     alert('@Ajax.JavaScriptStringEncode(ViewBag.UserName)');
</script>

結果:

@代碼塊

     @{  string s ="zouyujie";
         int age =26;
      }
     @{Html.RenderPartial("TestPartial");}//調用無返回值方法

注釋:@* ............*@

調用泛型方法:@(Html.SomeMethod<User>());

混合代碼與文本:

@if(1==1){
     <text>我要輸出文本在這里!</text>
     @:我要輸出文本在這里!
    }

@轉義:@@

操作web內置對象:@Request.RawUrl @Response.Write

@作用域與html標記混合使用:

     @{
          string userName="劉邦";
          <p>@userName</p> 
}

在@作用域中輸出未轉義的 HTML 代碼

1.使用字符串描述輸出

      @{
           string strHtm="<p>你好~</p>";
           @strHtml
       }

2.使用HTMLHelper輸出

 @{
    @Html.Raw("<p>哇哈哈哈~</p>");
  }

3.使用HtmlString類輸出

     @{
          HtmlString htm =new HtmlString("<p>哈哈</p>");
          @htm
      }

4.使用MvcHtmlString輸出

     @{
         var strHtml=MvcHtmlString.Create("<p>哈哈~</p>");
         @strHtml
      }

數據類型轉換

     用As....()方法轉換 ,如:@("120".AsInt())

數值類型判斷

     用IsInt()方法,如 @(strAge.IsInt()?"是":"否")

路徑轉換

用Href()方法,如: @Href("~/Home/Index");

using System.Web.WebPages;//內部 為 string 擴展了很多 As..方法

HtmlHelper重用:相當於是在 視圖中定義方法

@helper List(List<string> dogs){
    <ul>
        @foreach (string s in dogs)
        {
            <li>@s</li>
        }
    </ul>
    }
@List(new List<string>(){"ruiky","lisa","lucy"})

Razor 布局 – 整體視圖模板

應用整體模板視圖

1.@RenderBody()  //模板頁里的占位符

2.@{

   Layout = "~/Views/Shared/SiteLayout.cshtml";

   View.Title="User List";

}

<p>子頁所有html代碼都將替換到 模板頁的@RenderBody()處</p>

應用整體視圖模板 - 多個"占位符"

3.模板頁多個節:

   <footer>@RenderSection("Footer")</footer>

   子頁面定義節點:

    @section Footer{
           <b>我們也要加入了!</b>
     }

   模板頁判斷是否為布局節方法,IsSectionDeined

  @if(IsSectionDefined("Footer")){
         @RenderSection("Footer");
   }else
   {
         <b>“子頁面”沒有Footer~</b>
   }

Razor 布局 – ViewStart

每個子頁面都使用一個Layout指定布局。如果多個視圖都用同一個布局就會產生冗余,修改維護麻煩。

_ViewStart.cshtml 可解決此問題

此文件代碼優先於同目錄及子目錄下任何視圖代碼執行

View目錄下自動添加的_ViewStart.cshtml

   @{
          Layout = "~/Views/Shared/_Layout.cshtml";
    } 

有了它,就可以為某個文件夾下所有的視圖添加相同的視圖布局了

因為這個文件代碼優先於任何視圖,所以任何一個視圖都可以重寫LayOut屬性來指定自己想要的模板布局頁面。

Razor 布局 – 分布視圖

Action方法可以通過 PartialView方法以 PartialViewResult形式返回分部視圖
一般用在Ajax請求部分代碼
Controller

        public ActionResult PartialViewTest()
        {
            ViewData["Msg"] = "Hello world!";
            return PartialView();
        }

PartialViewTest.cshtml

<div>@ViewData["Msg"] </div>

Index.cshtml

<div id="divTest">
     @{Html.RenderAction("PartialViewTest");}
</div>

視圖引擎

“僅僅是一個尖括號生成器而已”

此圖僅僅為了強調:
1.視圖引擎發揮作用的地方,它緊跟在Action方法執行后.
       它的目的是獲取從控制器傳遞的數據,並生成經過格式化的輸出。
2.控制器並不渲染視圖,它僅僅准備數據(Model)並通過ViewResult   實例來決定調用哪個視圖。
視圖引擎接口 IViewEngine

public interface IViewEngine {
        ViewEngineResult FindPartialView(ControllerContext controllerContext, string partialViewName, bool useCache);

        ViewEngineResult FindView(ControllerContext controllerContext, string viewName, string masterName, bool useCache);

        void ReleaseView(ControllerContext controllerContext, IView view);
}

ViewEngineResult屬性

 其他視圖引擎:Spart,NHaml,Brail,StringTemplate,NVelocity

視圖 IView

public interface IView {
        void Render(ViewContext viewContext, TextWriter writer);
}

MVC視圖的“秘密”

其實我們的cshtml視圖頁面,在被訪問的時候,也編譯成了頁面類,繼承於:WebViewPage<T>

在View頁面,添加代碼

<div>@{Response.Write(this.GetType().Assembly.Location);}</div>

運行結果:C:\Windows\Microsoft.NET\Framework\v4.0.30319\Temporary ASP.NET Files\root\c8628c1b\abb1511c\App_Web_ceor5kns.dll

用reflector反編譯工具查看這個dll

cshtml頁面里的所有的代碼,都編譯到 這個類的Excute方法里了


免責聲明!

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



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