在最初接觸MVC時,相信很多人都是最先學會了<% %>,然后突然有一天遇到了@,然后就一臉懵逼了~
今天就有一哥們問我為什么他在網上下載了一個MVC Demo,在視圖頁中<% %>不起作用了,而且是一頁的@?
我曾經也有過這樣的疑問的。
VS MVC的視圖引擎有兩種:ASPX(C#)和Razor(cshtml)
建議以后都使用Razor視圖引擎。(VS2017中已經默認Razor引擎了)
<% %>就是ASPX引擎視圖頁中,插入C#代碼的標識。而在Razor中用更簡潔的@代替了。
這是一個強大的進步:
1.@i => <%: i %>
2.強類型頁面Model:@Model RazorDemo.Models.Customer
3.代碼引入:
1 <div> 2 //ASPX: 3 <% for(int i=0;i<10;i++){%> 4 5 <span><%= i%></span> 6 <%}%> 7 8 //Razor: 9 @for (var i = 0; i < 10; i++) 10 { 11 <span>@i</span> 12 i++; 13 <p>@i</p> 14 int b = i + 10; 15 <div> 16 int c=i++; 17 </div> 18 } 19 20 @{ 21 int demo = @Model.Age; 22 <p>sssss</p> demo++; //用Razor引擎,Html與C#代碼混編顯得特別輕松,有木有? 23 demo = 10 + 10; 24 int demo2 = 3; 25 } 26 </div>
有沒有發現優點與進步?
學編程,離不開實例說話。
再看一段代碼:
Razor引擎:
1 @model _20170913.Models.Person //強類型Model定義 2 3 @{ 4 Layout = null; 5 } 6 7 <!DOCTYPE html> 8 9 <html> 10 <head> 11 <meta name="viewport" content="width=device-width" /> 12 <title>Index</title> 13 </head> 14 <body> 15 @Scripts.Render("~/bundles/jquery") //腳本引入 16 @Scripts.Render("~/bundles/jqueryval") 17 18 @using (Html.BeginForm()) 19 { //這里不需要使用@了,能自動識別了,贊一個 20 @Html.AntiForgeryToken() 21 22 <div class="form-horizontal"> 23 <h4>Person</h4> 24 <hr /> 25 @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 26 <div class="form-group"> 27 @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" }) 28 <div class="col-md-10"> 29 @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } }) 30 @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" }) 31 </div> 32 </div> 33 34 <div class="form-group"> 35 @Html.LabelFor(model => model.Age, htmlAttributes: new { @class = "control-label col-md-2" }) 36 <div class="col-md-10"> 37 @Html.EditorFor(model => model.Age, new { htmlAttributes = new { @class = "form-control" } }) 38 @Html.ValidationMessageFor(model => model.Age, "", new { @class = "text-danger" }) 39 </div> 40 </div> 41 42 <div class="form-group"> 43 @Html.LabelFor(model => model.Phone, htmlAttributes: new { @class = "control-label col-md-2" }) 44 <div class="col-md-10"> 45 @Html.EditorFor(model => model.Phone, new { htmlAttributes = new { @class = "form-control" } }) 46 @Html.ValidationMessageFor(model => model.Phone, "", new { @class = "text-danger" }) 47 </div> 48 </div> 49 50 <div class="form-group"> 51 @Html.LabelFor(model => model.EMail, htmlAttributes: new { @class = "control-label col-md-2" }) 52 <div class="col-md-10"> 53 @Html.EditorFor(model => model.EMail, new { htmlAttributes = new { @class = "form-control" } }) 54 @Html.ValidationMessageFor(model => model.EMail, "", new { @class = "text-danger" }) 55 </div> 56 </div> 57 58 <div class="form-group"> 59 @Html.LabelFor(model => model.Address, htmlAttributes: new { @class = "control-label col-md-2" }) 60 <div class="col-md-10"> 61 @Html.EditorFor(model => model.Address, new { htmlAttributes = new { @class = "form-control" } }) 62 @Html.ValidationMessageFor(model => model.Address, "", new { @class = "text-danger" }) 63 </div> 64 </div> 65 66 <div class="form-group"> 67 <div class="col-md-offset-2 col-md-10"> 68 <input type="submit" value="Create" class="btn btn-default" /> 69 </div> 70 </div> 71 </div> 72 } 73 74 <div> 75 @Html.ActionLink("Back to List", "Index") 76 </div> 77 </body> 78 </html>
ASPX引擎:
1 <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<MvcStudyDemo.singerlist>" %>//強類型Model定義 2 3 <!DOCTYPE html> 4 5 <html> 6 <head runat="server"> 7 <meta name="viewport" content="width=device-width" /> 8 <title>Edit</title> 9 </head> 10 <body> 11 <script src="<%: Url.Content("~/Scripts/jquery-1.8.2.min.js") %>"></script> //腳本引入 12 <script src="<%: Url.Content("~/Scripts/jquery.validate.min.js") %>"></script> 13 <script src="<%: Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js") %>"></script> 14 15 <% using (Html.BeginForm()) { %> 16 <%: Html.AntiForgeryToken() %> 17 <%: Html.ValidationSummary(true) %> 18 19 <fieldset> 20 <legend>singerlist</legend> 21 22 <%: Html.HiddenFor(model => model.id) %> 23 24 <div class="editor-label"> 25 <%: Html.LabelFor(model => model.SingerID) %> 26 </div> 27 <div class="editor-field"> 28 <%: Html.EditorFor(model => model.SingerID) %> 29 <%: Html.ValidationMessageFor(model => model.SingerID) %> 30 </div> 31 32 <div class="editor-label"> 33 <%: Html.LabelFor(model => model.SingerName) %> 34 </div> 35 <div class="editor-field"> 36 <%: Html.EditorFor(model => model.SingerName) %> 37 <%: Html.ValidationMessageFor(model => model.SingerName) %> 38 </div> 39 40 <div class="editor-label"> 41 <%: Html.LabelFor(model => model.Sex) %> 42 </div> 43 <div class="editor-field"> 44 <%: Html.EditorFor(model => model.Sex) %> 45 <%: Html.ValidationMessageFor(model => model.Sex) %> 46 </div> 47 48 <div class="editor-label"> 49 <%: Html.LabelFor(model => model.region) %> 50 </div> 51 <div class="editor-field"> 52 <%: Html.EditorFor(model => model.region) %> 53 <%: Html.ValidationMessageFor(model => model.region) %> 54 </div> 55 56 <div class="editor-label"> 57 <%: Html.LabelFor(model => model.IsDisplay) %> 58 </div> 59 <div class="editor-field"> 60 <%: Html.EditorFor(model => model.IsDisplay) %> 61 <%: Html.ValidationMessageFor(model => model.IsDisplay) %> 62 </div> 63 64 <div class="editor-label"> 65 <%: Html.LabelFor(model => model.PinYinPalace) %> 66 </div> 67 <div class="editor-field"> 68 <%: Html.EditorFor(model => model.PinYinPalace) %> 69 <%: Html.ValidationMessageFor(model => model.PinYinPalace) %> 70 </div> 71 72 <div class="editor-label"> 73 <%: Html.LabelFor(model => model.pinyinidx) %> 74 </div> 75 <div class="editor-field"> 76 <%: Html.EditorFor(model => model.pinyinidx) %> 77 <%: Html.ValidationMessageFor(model => model.pinyinidx) %> 78 </div> 79 <div class="editor-label"> 80 <%: Html.LabelFor(model => model.singername_Big) %> 81 </div> 82 <div class="editor-field"> 83 <%: Html.EditorFor(model => model.singername_Big) %> 84 <%: Html.ValidationMessageFor(model => model.singername_Big) %> 85 </div> 86 87 <div class="editor-label"> 88 <%: Html.LabelFor(model => model.AddDateTime) %> 89 </div> 90 <div class="editor-field"> 91 <%: Html.EditorFor(model => model.AddDateTime) %> 92 <%: Html.ValidationMessageFor(model => model.AddDateTime) %> 93 </div> 94 95 <p> 96 <input type="submit" value="Save" /> 97 </p> 98 </fieldset> 99 <% } %> 100 101 <div> 102 <%: Html.ActionLink("Back to List", "Index") %> 103 </div> 104 </body> 105 </html>
到此,我相信看官對Razor中的@與ASPX中的<% %>應該有一個基本了解了。
會ASPX引擎開發MVC項目了,Razor引擎就不在話下了。
加油~~!