ASP.Net MVC檢視 - tw511教學網

在ASP.NET MVC應用程式中，當在URL中指定路徑時，可像頁面那樣但不包含對應的任何內容直接顯示給使用者。在ASP.NET MVC應用程式中最接近頁面的東西就是檢視。

在ASP.NET MVC應用程式中，所有傳入的瀏覽器請求都由控制器處理，並將這些請求對映到控制器操作。控制器操作可能會返回一個檢視，或者也可能執行一些其他型別的操作，例如重定向到另一個控制器動作。

下面通過建立一個新的ASP.NET MVC專案，來演示如何應用檢視的簡單例子。
開啟Visual Studio，然後單擊選單：檔案 -> 新建 -> 專案選項。建立一個名稱為：MVCViewDemo 的MVC專案。

詳細建立過程請參考：/14/125/3680.html

通過在解決方案資源管理器 中右鍵單擊 Controllers 檔案夾來新增一個控制元件器：HomeController。在彈出選單項中選擇：新增 -> 控制器 。

將在Controllers檔案夾中看到一個新的 C# 檔案 - HomeController.cs，x在Visual Studio中開啟並進行編輯。修改更新HomeController.cs檔案中的程式碼，其中包含兩個操作方法，如下面的程式碼所示。

using System;
using System.Collections.Generic;
using System.Linq;

using System.Web;
using System.Web.Mvc;

namespace MVCViewDemo.Controllers {
   public class HomeController : Controller{
      // GET: Home
      public ActionResult Index(){
         return View();
      }

      public string Mycontroller(){
         return "Hi, I am a controller";
      }
   }
}

執行這個應用程式，開啟瀏覽器存取：http://localhost:63461/Home/MyController，將收到以下輸出結果 -

由於MyController操作只是返回字串，要從操作返回一個View，需要首先新增一個View。參考以下步驟 -

第1步： 在新增檢視之前，新增另一個操作，它將返回一個預設檢視。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MVCViewDemo.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }

        public string Mycontroller()
        {
            return "Hi, I am a controller";
        }

        public ActionResult MyView()
        {
            return View();
        }
    }
}

執行這個應用程式，並在瀏覽器的URL中新增http://localhost:63461/Home/MyView，然後按回車，將收到以下輸出。

在這裡看到有一個錯誤，這個錯誤實際上是相當具有描述性的，告訴我們它找不到MyView檢視。

第2步 - 要新增一個檢視，右鍵單擊MyView動作(方法)並選擇新增檢視。如下圖所示 -

它將顯示「新增檢視」 對話方塊，並將新增預設名稱。

第3步 - 取消選中「使用佈局頁面」核取方塊，然後單擊「新增」按鈕。現在新建的這個檢視內有預設的程式碼。如下所示 -

第4步 - 使用以下程式碼在此檢視中新增一些文字。

@{
   Layout = null;
}

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width" />
      <title>MyView</title>
   </head>

   <body>
      <div>
         Hi, I am a view
      </div>
   </body>

</html>

第5步 - 執行該應用程式，並將開啟瀏覽器存取URL：http://localhost:63461/Home/MyView，將收到以下輸出。