本系列目錄: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方法里了