愛悠閑 > MVC4-一些寫法 可以借鑒

MVC4-一些寫法 可以借鑒

分類: other  |  作者: sat472291519 相關  |  發布日期 : 2012-10-10  |  熱度 : 38°

因為是轉載文章 在此標明出處,以前有文章是轉的沒標明的請諒解,因為有些已經無法找到出處,或者與其它原因。

如有冒犯請聯系本人,或刪除,或標明出處。

因為好的文章,以前只想收藏,但連接有時候會失效,所以現在碰到好的直接轉到自己這里。

原文 出處鏈接地址



View(視圖),大家并不是很陌生!視圖是負責向用戶提供用戶界面(UI),他是一個承載有模型(顯示控制器需要的信息),該模型需要轉換格式呈現給用戶。在ASP.NET MVC中,視圖通過狀態寄存器的模型對象傳遞給它的控制器和改造的內容到HTML。

OK,我們下來看一個例子,建立一個視圖叫(Sample.cshtml),具體代碼如下:

@{
    this.Layout = null;
}

<!DOCTYPE html>
<html>
<head><title>Sample View</title></head>
<body>
<h1>@ViewBag.Message</h1>
<p>
This is a sample view. It's not much to look at,
but it gets the job done.
</p>
</body>
</html>

這是一個非常簡單的示例顯示一條消息,由控制器到視圖一種通過@ ViewBag.Message動態表達。基于Web框架ASP.NET Web Forms和PHP等不同的地方在于:他不能直接訪問(你不可能直接在瀏覽器中看到該頁面)。因為視圖始終呈現由控制器提供的數據視圖將呈現出來。所以我們需要在控制器(Controller)里添加一下代碼:

        // GET: /Sample
        public ActionResult Sample() 
        {
            this.ViewBag.Message = "Hellw World.Welcome to ASP.NET MVC4!";
            return this.View("Sample");
        }

控制器里設置ViewBag.Message屬性為一個字符串,然后返回一個視圖名為Sample的頁面。這里就不在運行了!

指定視圖

在每一個控制器文件夾中,有一個視圖文件,命名為每個操作方法一樣的的操作方法。這提供了基礎視圖相關的操作方法。操作方法可以返回一個ViewResult通過查看方法,例如下面的代碼:

 

    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            this.ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application";
            return this.View();
        }
    }

 

這個方法(Action)是HomeController默認方法。他會自動索引到Views/Home/Index.cshtml文件。但是在ASP.NET MVC中你可以覆蓋這一默認的機制,你可以指定該方法(Action)呈現到不同的視圖上。比如這樣:

    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            this.ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application";
            return this.View("NotIndex");
        }
     }

這種情況,他會自動索引到Views/Home文件夾下找NotIndex.cshtml文件.當然你還可以這樣,讓他去索引不同目錄下面的頁面,這是你可以這樣:

    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            this.ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application";
            return this.View("~/Views/Example/Index.cshtml");
        }
    }

ViewData 和 ViewBag

從技術上講,數據通過控制器通過一個稱為ViewData的ViewDataDictionary(一個字典類型)。在ViewPage中查詢數據時需要轉換合適的類型,例如下面代碼:

ViewData["CurrentTime"] = DateTime.Now;

雖然這仍然是可用的,ASP.NET MVC 3利用C#4動態關鍵字允許更簡單的語法。屆時,你可以這樣:

ViewBag.CurrentTime = DateTime.Now;

由此可以看出,ViewBag.CurrentTime是相當于ViewData的[“currentTime”].可以看到ViewBag在ViewPage中查詢數據時候不需要轉換合適的類型,具有更好的可讀性!

強類型的視圖(STRONGLY TYPED VIEWS)

假如你需要寫一個視圖顯示的列表專輯實例,一個可行的方式是對其列表進行迭代顯示到視圖,可以想下面所示:

public ActionResult List() {
   var albums = new List<Album>();
   for(int i = 0; i < 10; i++) {
   albums.Add(new Album {Title = "Product " + i});
   }
   ViewBag.Albums = albums;
   return View();
}

在視圖頁面,你就可以這樣搞:

<ul>
@foreach (Album a in (ViewBag.Albums as IEnumerable<Album>)) {
<li>@a.Title</li>
}
</ul>

OK!我們在方法里返回的ViewBage.Albums是個動態的(運行時編譯)IEnumerable<Album>枚舉類型。其實為了代碼更好的可讀性,我們可以將上面視圖頁面代碼這么搞:

<ul>
 @foreach (dynamic p in ViewBag.Albums) {
  <li>@p.Title</li>
  }
</ul>

在我們的Controller(控制器)里通過方法(Action)來加載模型,傳遞模型實例.例如可以這樣:

public ActionResult List() {
  var albums = new List<Album>();
  for (int i = 0; i < 10; i++) {
  albums.Add(new Album {Title = "Album " + i});
  }
  return View(albums);
}

接下來在View(視圖),(幕后是這ViewData.Model屬性的值設置的值傳遞到該視圖的方法),可以這么搞(需要引用一哈模型):

@model IEnumerable<MvcApplication1.Models.Album>
<ul>
@foreach (Album p in Model) {
<li>@p.Title</li>
}
</ul>

還有一個更好的方法,將我經常用的命名空間寫在web.config中,如下:

@using MvcApplication1.Models
<system.web.webPages.razor><pages pageBaseType="System.Web.Mvc.WebViewPage">
<namespaces>
<add namespace="System.Web.Mvc" />
<add namespace="System.Web.Mvc.Ajax" />
<add namespace="System.Web.Mvc.Html" />
<add namespace="System.Web.Routing" />

<add namespace="MvcApplication1.Models" />
</namespaces>
</pages>
</system.web.webPages.razor>

視圖模型

 通常一個視圖需要顯示各種數據但是不直接映射到域模型。比如在一個商品的詳情頁面,可能會附加這個商品相關的商品及其他的一些東西。有個很簡單的辦法的顯示這些額外數據而不牽扯到你的視圖模型,用ViewBag來完成這些顯示數據。當然這個不適用與任何人,大家在搞項目會碰到的很多種情況,所以要看情況選擇對應的辦法處理!當然你也可以寫一個視圖模型類,你能想到的一個視圖模型,它的存在就只是為了提供信息視圖。可以去參考下("MVVM")理解。例如,我現在想要展示一個購物車,它包含商品信息,商品價格和一些用戶的信息,那么我可以寫下面一個模型類:

    public class ShoppingCartViewModel
    {
        public IEnumerable<Product> Products { get; set; }

        public decimal CartTotal { get; set; }

        public string Message { get; set; }
    }

現在在視圖上就可以直接用我們編寫的視圖模型,只需要我們引用下,如下:

@model ShoppingCartViewModel

關于創建視圖這里就不做過多的羅嗦了!

了解下Razor

Razor視圖引擎引是ASP.NET MVC 3默認的視圖引擎。Razor是一個ASP.NET MVC 提供一個干凈的,輕量級的,簡單的視圖引擎。Razor的好處是:提供了簡化的語法表達的意見,最大限度地減少語法和多余的字符。Razor會使視圖想要表達的邏輯更加明確(更容易看懂),列入下面的例子:

@{
// this is a block of code. For demonstration purposes,
// we'll create a "model" inline.
var items = new string[] {"one", "two", "three"};
}
<html>
<head><title>Sample View</title></head>
<body>
<h1>Listing @items.Length items.</h1>
<ul>
@foreach (var item in items)
{
<li>The item name is @item.</li>
}
</ul>
</body>
</html>

Razor的一些語法:

  • 隱式的代碼表達

        代碼表達式的值如何響應到到視圖,如何顯示出值:

Razor <span>@model.Message</span>
Web Forms <span><%: model.Message %></span>

上面是在Razor表達式的HTML編碼和Web Forms語法編碼的一個對比,是不是感覺Razor要好用很多!

  • 顯式代碼表達
RAZOR <span>[email protected](isbn)</span>
Web Forms <span>ISBN<%: isbn %></span>

 

 

  • 未編碼的代碼表達式

        在某些情況下,你需要明確地呈現一些值不應該HTML編碼。您可以使用Html.Raw方法,以確保該值的編碼不,如下:

Razor <span>@Html.Raw(model.Message)</span>
Web Forms <span><%: Html.Raw(model.Message) %></span>
or
<span><%= model.Message %></span>
  • 代碼快
Razor @{
int x = 123;
string y = ?because.?;
}
Web Forms <%
int x = 123;
string y = "because.";
%>
  • 結合文字和標記
Razor @foreach (var item in items) {
<span>Item @item.Name.</span>
}
Web Forms <% foreach (var item in items) { %>
<span>Item <%: item.Name %>.</span>
<% } %>
  • 混合代碼和純文本
Razor @if (showMessage) {
<text>This is plain text</text>
}
or
@if (showMessage) {
@:This is plain text.
}
Web Forms <% if (showMessage) { %>
This is plain text.
<% } %>
  • 分離代碼分隔符號
Razor My Twitter Handle is &#64;haacked
or
My Twitter Handle is @@haacked
Web Forms &lt;% expression %&gt; marks a code
nugget.
  • 服務器端注釋
Razor @*
This is a multiline server side comment.
@if (showMessage) {
<h1>@ViewBag.Message</h1>
}
All of this is commented out.
*@
Web Forms <%--This is a multiline server side comment.
<% if (showMessage) { %>
<h1><%: ViewBag.Message %></h1>
<% } %>
All of this is commented out.
--%>

 

  • 調用泛型方法
Razor @(Html.SomeMethod<AType>())
Web Forms <%: Html.SomeMethod<AType>() %>

指定局部視圖

OK,最后聊下局部視圖,mvc通常出了action(方法)返回一個視圖外,當然他也可以返回一個局部試圖PartialView()可以搞定某些情況下你的困惑。下面看一個簡單的例子:

        public ActionResult HuiTai() 
        {
            this.ViewBag.Message = "This is a View(My -> ActionResult)";
            return this.View();
        }

        public PartialViewResult Huitai() 
        {
            this.ViewBag.Message = "This is a PartialView(My -> PartialViewResult)";
            return this.PartialView();
        }

上面兩種寫法都是OK的,只不過一個是具體的表達方式!這個這里就不做過多的詮釋,前面都啰嗦過了!先分享這些吧,有點雜,但是有點幫助就行了!主要說了:視圖引擎有一個非常具體的,有明確目的。它們的存在數據傳遞給他們控制器和相應的方法執行后輸出,通常為HTML。還有就是了簡單的解了Razor語法。本片文章就先分享這些,有那些不對的地方還請各位前輩,朋友多多指導,大家共同進步學習!



快乐彩中奖说明