在最初接触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引擎就不在话下了。
加油~~!