ASP.Net MVC中的@與<% %>


在最初接觸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引擎就不在話下了。

加油~~!


免責聲明!

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



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