MVC 框架 - 快速指南

MVC 框架 - 簡介

模型-檢視-控制器 (MVC) 是一種架構模式，它將應用程式劃分為三個主要的邏輯元件：模型、檢視和控制器。每個元件都構建為處理應用程式的特定開發方面。MVC 是最常用的行業標準 Web 開發框架之一，用於建立可擴充套件的專案。

MVC 元件

以下是 MVC 的元件 -

模型

模型元件對應於使用者使用的所有與資料相關的邏輯。這可以表示檢視和控制器元件之間傳輸的資料，或任何其他與業務邏輯相關的資料。例如，Customer 物件將從資料庫中檢索客戶資訊，對其進行操作並將資料更新回資料庫，或使用它來呈現資料。

檢視

檢視元件用於應用程式的所有 UI 邏輯。例如，Customer 檢視將包含終端使用者互動的所有 UI 元件，例如文字框、下拉列表等。

控制器

控制器充當模型和檢視元件之間的介面，以處理所有業務邏輯和傳入請求，使用模型元件操作資料並與檢視互動以呈現最終輸出。例如，Customer 控制器將處理來自 Customer 檢視的所有互動和輸入，並使用 Customer 模型更新資料庫。同一個控制器將用於檢視 Customer 資料。

ASP.NET MVC

ASP.NET 支援三種主要的開發模型：Web 頁面、Web 窗體和 MVC（模型檢視控制器）。ASP.NET MVC 框架是一個輕量級、高度可測試的表示框架，它與現有的 ASP.NET 功能（如母版頁、身份驗證等）整合在一起。在 .NET 中，此框架在 System.Web.Mvc 程式集中定義。MVC 框架的最新版本是 5.0。我們使用 Visual Studio 建立 ASP.NET MVC 應用程式，這些應用程式可以作為模板新增到 Visual Studio 中。

ASP.NET MVC 功能

ASP.NET MVC 提供以下功能 -

非常適合開發複雜但輕量級的應用程式。
提供可擴充套件且可插入的框架，可以輕鬆替換和自定義。例如，如果您不想使用內建的 Razor 或 ASPX 檢視引擎，則可以使用任何其他第三方檢視引擎，甚至可以自定義現有的檢視引擎。
透過將應用程式邏輯地劃分為模型、檢視和控制器元件，利用應用程式的基於元件的設計。這使開發人員能夠管理大型專案的複雜性並處理各個元件。
MVC 結構增強了應用程式的測試驅動開發和可測試性，因為所有元件都可以基於介面設計並使用模擬物件進行測試。因此，ASP.NET MVC 框架非常適合擁有大量 Web 開發人員團隊的專案。
支援所有現有的廣泛 ASP.NET 功能，例如授權和身份驗證、母版頁、資料繫結、使用者控制元件、成員資格、ASP.NET 路由等。
不使用檢視狀態的概念（存在於 ASP.NET 中）。這有助於構建輕量級的應用程式，併為開發人員提供完全的控制權。

因此，您可以將 MVC 框架視為構建在 ASP.NET 之上的一個主要框架，它提供了一組大量附加功能，重點關注基於元件的開發和測試。

MVC 框架 - 架構

在上一章中，我們研究了 MVC 框架的高階架構流程。現在讓我們看看當客戶端發出特定請求時 MVC 應用程式的執行方式。下圖說明了流程。

MVC 流程圖

流程步驟

步驟 1 - 客戶端瀏覽器向 MVC 應用程式傳送請求。

步驟 2 - Global.ascx 接收此請求，並使用 RouteTable、RouteData、UrlRoutingModule 和 MvcRouteHandler 物件根據傳入請求的 URL 執行路由。

步驟 3 - 此路由操作呼叫相應的控制器並使用 IControllerFactory 物件和 MvcHandler 物件的 Execute 方法執行它。

步驟 4 - 控制器使用模型處理資料，並使用 ControllerActionInvoker 物件呼叫適當的方法。

步驟 5 - 然後將處理後的模型傳遞給檢視，檢視依次呈現最終輸出。

MVC 框架 - ASP.NET 表單

MVC 和 ASP.NET Web 窗體是相互關聯但不同的開發模型，具體取決於應用程式的要求和其他因素。在高級別上，您可以認為 MVC 是一個高階且複雜的 Web 應用程式框架，其設計考慮了關注點分離和可測試性。這兩個框架都有其優點和缺點，具體取決於特定要求。可以使用下圖來視覺化此概念 -

MVC 和 ASP.NET 圖表

比較表

MVC 框架 - 第一個應用程式

讓我們開始使用檢視和控制器建立我們的第一個 MVC 應用程式。在我們對基本 MVC 應用程式的工作原理有了初步的實踐經驗後，我們將在接下來的章節中學習所有單獨的元件和概念。

建立第一個 MVC 應用程式

步驟 1 - 啟動 Visual Studio 並選擇檔案 → 新建 → 專案。選擇 Web → ASP.NET MVC Web 應用程式並將此專案命名為FirstMVCApplicatio。選擇位置為C:\MVC。單擊確定。

步驟 2 - 這將開啟專案模板選項。選擇空模板並將檢視引擎設定為 Razor。單擊確定。

現在，Visual Studio 將建立我們的第一個 MVC 專案，如下面的螢幕截圖所示。

步驟 3 - 現在，我們將在應用程式中建立第一個控制器。控制器只是簡單的 C# 類，其中包含多個公共方法，稱為操作方法。要新增新的控制器，請右鍵單擊專案中的 Controllers 資料夾，然後選擇新增 → 控制器。將控制器命名為 HomeController 並單擊新增。

這將在 Controllers 資料夾下建立一個類檔案HomeController.cs，其中包含以下預設程式碼。

using System; 
using System.Web.Mvc;  

namespace FirstMVCApplication.Controllers { 
   
   public class HomeController : Controller { 
      
      public ViewResult Index() { 
         return View(); 
      }  
   } 
}

以上程式碼基本上在我們的 HomeController 中定義了一個公共方法 Index 並返回一個 ViewResult 物件。在接下來的步驟中，我們將學習如何使用 ViewResult 物件返回檢視。

步驟 4 - 現在，我們將向 Home 控制器新增一個新的檢視。要新增新的檢視，請右鍵單擊檢視資料夾並單擊新增 → 檢視。

步驟 5 - 將新檢視命名為 Index 並將檢視引擎設定為 Razor (SCHTML)。單擊新增。

這將在 Views/Home 資料夾中新增一個新的cshtml檔案，其中包含以下程式碼 -

@{ 
   Layout = null; 
}  

<html> 
   <head> 
      <meta name = "viewport" content = "width = device-width" /> 
      <title>Index</title> 
   </head> 

   <body> 
      <div> 
      
      </div> 
   </body> 
</html>

步驟 6 - 使用以下程式碼修改上述檢視的主體內容 -

<body> 
   <div> 
      Welcome to My First MVC Application (<b>From Index View</b>) 
   </div> 
</body>

步驟 7 - 現在執行應用程式。這將在瀏覽器中為您提供以下輸出。此輸出根據我們檢視檔案中的內容呈現。應用程式首先呼叫控制器，控制器依次呼叫此檢視並生成輸出。

在步驟 7 中，我們收到的輸出基於檢視檔案的內容，並且沒有與控制器互動。接下來，我們將建立一個小的示例，以使用檢視和控制器的互動顯示帶有當前時間的歡迎訊息。

步驟 8 - MVC 使用 ViewBag 物件在控制器和檢視之間傳遞資料。開啟 HomeController.cs 並將 Index 函式編輯為以下程式碼。

public ViewResult Index() { 
   int hour = DateTime.Now.Hour; 
             
   ViewBag.Greeting =
   hour < 12  
   ? "Good Morning. Time is" +  DateTime.Now.ToShortTimeString() 
   : "Good Afternoon. Time is " + DateTime.Now.ToShortTimeString(); 
             
   return View(); 
}

在上面的程式碼中，我們設定了 ViewBag 物件的 Greeting 屬性的值。該程式碼檢查當前小時並使用 return View() 語句相應地返回 Good Morning/Afternoon 訊息。請注意，這裡的 Greeting 只是我們與 ViewBag 物件一起使用的示例屬性。您可以使用任何其他屬性名稱來代替 Greeting。

步驟 9 - 開啟 Index.cshtml 並將以下程式碼複製到主體部分。

<body> 
   <div> 
      @ViewBag.Greeting (<b>From Index View</b>) 
   </div> 
</body>

在上面的程式碼中，我們正在使用 @ 訪問 ViewBag 物件的 Greeting 屬性的值（它將從控制器設定）。

步驟 10 - 現在再次執行應用程式。這次我們的程式碼將首先執行控制器，設定 ViewBag，然後使用 View 程式碼呈現它。以下是輸出。

MVC 框架 - 資料夾

既然我們已經建立了一個示例 MVC 應用程式，讓我們瞭解一下 MVC 專案的資料夾結構。我們將建立一個新的 MVC 專案來學習這一點。

在您的 Visual Studio 中，開啟檔案 → 新建 → 專案並選擇 ASP.NET MVC 應用程式。將其命名為MVCFolderDemo。

單擊確定。在下一個視窗中，選擇 Internet 應用程式作為專案模板並單擊確定。

這將建立一個示例 MVC 應用程式，如下面的螢幕截圖所示。

注意 - 此專案中存在的檔案來自我們選擇的預設模板。根據不同版本，這些檔案可能會略有變化。

Controllers 資料夾

此資料夾將包含所有控制器類。MVC 要求所有控制器檔案的名稱以 Controller 結尾。

在我們的示例中，Controllers 資料夾包含兩個類檔案：AccountController 和 HomeController。

Models 資料夾

此資料夾將包含所有模型類，這些類用於處理應用程式資料。

在我們的示例中，Models 資料夾包含 AccountModels。您可以開啟並檢視此檔案中的程式碼，以瞭解如何建立用於管理我們示例中帳戶的資料模型。

Views 資料夾

此資料夾儲存與應用程式顯示和使用者介面相關的 HTML 檔案。它為每個控制器包含一個資料夾。

在我們的示例中，您將在 Views 下看到三個子資料夾，即 Account、Home 和 Shared，其中包含特定於該檢視區域的 html 檔案。

App_Start 資料夾

此資料夾包含應用程式載入期間需要的所有檔案。

例如，RouteConfig 檔案用於將傳入的 URL 路由到正確的控制器和操作。

Content 資料夾

此資料夾包含所有靜態檔案，例如 css、影像、圖示等。

此資料夾中的 Site.css 檔案是應用程式應用的預設樣式。

Scripts 資料夾

此資料夾儲存專案中的所有 JS 檔案。預設情況下，Visual Studio 新增 MVC、jQuery 和其他標準 JS 庫。

MVC 框架 - 模型

元件“模型”負責管理應用程式的資料。它響應來自檢視的請求，也響應來自控制器的更新自身指令。

模型類可以手動建立或從資料庫實體生成。我們將在接下來的章節中看到很多手動建立模型的示例。因此，在本章中，我們將嘗試另一種方法，即從資料庫生成，以便您對這兩種方法都有實踐經驗。

建立資料庫實體

連線到 SQL Server 並建立一個新的資料庫。

現在執行以下查詢以建立新表。

CREATE TABLE [dbo].[Student]( 
   [StudentID]      INT           IDENTITY (1,1) NOT NULL, 
   [LastName]       NVARCHAR (50) NULL, 
   [FirstName]      NVARCHAR (50) NULL, 
   [EnrollmentDate] DATETIME      NULL, 
   PRIMARY KEY CLUSTERED ([StudentID] ASC) 
)  

CREATE TABLE [dbo].[Course]( 
   [CourseID] INT           IDENTITY (1,1) NOT NULL, 
   [Title]    NVARCHAR (50) NULL, 
   [Credits]  INT           NULL, 
   PRIMARY KEY CLUSTERED ([CourseID] ASC) 
)  

CREATE TABLE [dbo].[Enrollment]( 
   [EnrollmentID] INT IDENTITY (1,1) NOT NULL, 
   [Grade]        DECIMAL(3,2) NULL, 
   [CourseID]     INT NOT NULL, 
   [StudentID]    INT NOT NULL, 
   PRIMARY KEY CLUSTERED ([EnrollmentID] ASC), 
      CONSTRAINT [FK_dbo.Enrollment_dbo.Course_CourseID] FOREIGN KEY ([CourseID]) 
   REFERENCES [dbo].[Course]([CourseID]) ON DELETE CASCADE, 
      CONSTRAINT [FK_dbo.Enrollment_dbo.Student_StudentID] FOREIGN KEY ([StudentID]) 
   REFERENCES [dbo].[Student]([StudentID]) ON DELETE CASCADE 
)

使用資料庫實體生成模型

建立資料庫並設定表後，您可以繼續建立新的 MVC 空應用程式。右鍵單擊專案中的 Models 資料夾，然後選擇新增 → 新建項。然後，選擇 ADO.NET 實體資料模型。

在下一個嚮導中，選擇從資料庫生成並單擊下一步。將連線設定為您的 SQL 資料庫。

選擇您的資料庫並單擊測試連線。將出現類似於以下內容的螢幕。單擊下一步。

選擇表、檢視以及儲存過程和函式。單擊“完成”。您將看到建立的模型檢視，如下面的螢幕截圖所示。

上述操作會自動為所有資料庫實體建立模型檔案。例如，我們建立的 Student 表將生成一個名為 Student.cs 的模型檔案，其中包含以下程式碼：

namespace MvcModelExample.Models { 
   using System; 
   using System.Collections.Generic; 
     
   public partial class Student { 
      
      public Student() { 
         this.Enrollments = new HashSet(); 
      } 
     
      public int StudentID { get; set; } 
      public string LastName { get; set; } 
      public string FirstName { get; set; } 
      public Nullable EnrollmentDate { get; set; } 
      public virtual ICollection Enrollments { get; set; } 
   } 
}

MVC 框架 - 控制器

Asp.net MVC 控制器負責控制應用程式執行的流程。當您向 MVC 應用程式發出請求（意味著請求一個頁面）時，控制器負責返回對該請求的響應。控制器可以執行一個或多個操作。控制器操作可以返回不同型別的操作結果以響應特定請求。

控制器負責控制應用程式邏輯，並充當檢視和模型之間的協調器。控制器透過檢視接收使用者的輸入，然後在模型的幫助下處理使用者資料，並將結果傳遞迴檢視。

建立控制器

要建立控制器，請執行以下操作：

步驟 1 - 建立一個 MVC 空應用程式，然後右鍵單擊 MVC 應用程式中的 Controller 資料夾。

步驟 2 - 選擇選單選項“新增”→“控制器”。選擇後，將顯示“新增控制器”對話方塊。將控制器命名為DemoController。

將建立控制器類檔案，如下面的螢幕截圖所示。

使用 IController 建立控制器

在 MVC 框架中，控制器類必須實現來自 System.Web.Mvc 名稱空間的 IController 介面。

public interface IController {
   void Execute(RequestContext requestContext);
}

這是一個非常簡單的介面。當請求的目標是控制器類時，將呼叫唯一的 Execute 方法。MVC 框架透過讀取路由資料生成的 controller 屬性的值來了解哪個控制器類已成為請求的目標。

步驟 1 - 新增一個新的類檔案，並將其命名為 DemoCustomController。現在修改此類以繼承 IController 介面。

步驟 2 - 將以下程式碼複製到此類中。

public class DemoCustomController:IController { 
   
   public void Execute(System.Web.Routing.RequestContext requestContext) { 
      var controller = (string)requestContext.RouteData.Values["controller"]; 
      var action = (string)requestContext.RouteData.Values["action"]; 
      requestContext.HttpContext.Response.Write( 
      string.Format("Controller: {0}, Action: {1}", controller, action)); 
   } 
}

步驟 3 - 執行應用程式，您將收到以下輸出。

MVC 框架 - 檢視

如初始介紹章節中所見，檢視是與應用程式使用者介面相關的元件。這些檢視通常繫結自模型資料，並具有 html、aspx、cshtml、vbhtml 等副檔名。在我們的第一個 MVC 應用程式中，我們使用了帶有控制器的檢視來向終端使用者顯示資料。為了將這些靜態和動態內容呈現到瀏覽器，MVC 框架利用了檢視引擎。檢視引擎基本上是標記語法實現，負責將最終的 HTML 呈現到瀏覽器。

MVC 框架附帶兩個內建檢視引擎：

Razor 引擎 - Razor 是一種標記語法，它允許將伺服器端 C# 或 VB 程式碼嵌入到網頁中。此伺服器端程式碼可用於在載入網頁時建立動態內容。與 ASPX 引擎相比，Razor 是一個高階引擎，並在 MVC 的後續版本中推出。

ASPX 引擎 - ASPX 或 Web 窗體引擎是 MVC 框架自一開始就包含的預設檢視引擎。使用此引擎編寫程式碼類似於在 ASP.NET Web 窗體中編寫程式碼。

以下是比較 Razor 和 ASPX 引擎的小程式碼片段。

Razor

@Html.ActionLink("Create New", "UserAdd")

ASPX

<% Html.ActionLink("SignUp", "SignUp") %>

在這兩者中，Razor 是一個高階檢視引擎，因為它具有緊湊的語法、測試驅動開發方法和更好的安全特性。我們將在所有示例中使用 Razor 引擎，因為它是最常用的檢視引擎。

這些檢視引擎可以以以下兩種型別進行編碼和實現：

強型別
動態型別

這些方法分別類似於早期繫結和後期繫結，其中模型將被強繫結或動態繫結到檢視。

強型別檢視

為了理解這個概念，讓我們建立一個示例 MVC 應用程式（按照前面章節中的步驟），並新增一個名為ViewDemoController的控制器類檔案。

現在，將以下程式碼複製到控制器檔案中：

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

namespace ViewsInMVC.Controllers { 
   
   public class ViewDemoController : Controller { 
      
      public class Blog { 
         public string Name; 
         public string URL; 
      }  
      
      private readonly List topBlogs = new List { 
         new Blog { Name = "Joe Delage", URL = "http://tutorialspoint/joe/"}, 
         new Blog {Name = "Mark Dsouza", URL = "http://tutorialspoint/mark"}, 
         new Blog {Name = "Michael Shawn", URL = "http://tutorialspoint/michael"} 
      };  
      
      public ActionResult StonglyTypedIndex() { 
         return View(topBlogs); 
      }  
      
      public ActionResult IndexNotStonglyTyped() { 
         return View(topBlogs); 
      }   
   } 
}

在上面的程式碼中，我們定義了兩個操作方法：StronglyTypedIndex 和 IndexNotStonglyTyped。現在我們將為這些操作方法新增檢視。

右鍵單擊 StonglyTypedIndex 操作方法，然後單擊“新增檢視”。在下一個視窗中，選中“建立強型別檢視”複選框。這還將啟用“模型類”和“腳手架模板”選項。從“腳手架模板”選項中選擇“列表”。單擊“新增”。

將建立一個類似於以下螢幕截圖的檢視檔案。正如您所注意到的，它在頂部包含了 ViewDemoController 的 Blog 模型類。使用這種方法，您還可以使用程式碼中的 IntelliSense。

動態型別檢視

要建立動態型別檢視，請右鍵單擊 IndexNotStonglyTyped 操作，然後單擊“新增檢視”。

這次，不要選中“建立強型別檢視”複選框。

生成的檢視將包含以下程式碼：

@model dynamic 
            
@{ 
   ViewBag.Title = "IndexNotStonglyTyped"; 
}

<h2>Index Not Stongly Typed</h2>  
<p> 
   <ul> 
      
      @foreach (var blog in Model) { 
         <li> 
            <a href = "@blog.URL">@blog.Name</a> 
         </li>    
      } 
   
   </ul> 
</p>

如您在上面的程式碼中所看到的，這次它沒有像上例那樣將 Blog 模型新增到檢視中。此外，您也無法使用 IntelliSense，因為這次繫結將在執行時完成。

強型別檢視被認為是一種更好的方法，因為我們已經知道作為模型傳遞的資料是什麼，這與動態型別檢視不同，在動態型別檢視中，資料在執行時繫結，如果連結模型中發生任何更改，可能會導致執行時錯誤。

MVC 框架 - 佈局

佈局用於在 MVC 中為應用程式的所有頁面提供一致的外觀和感覺。這與定義母版頁相同，但 MVC 提供了一些額外的功能。

建立 MVC 佈局

步驟 1 - 使用“Internet 應用程式”作為模板建立一個示例 MVC 應用程式，並在 Web 應用程式的根目錄下建立一個 Content 資料夾。

步驟 2 - 在 CONTENT 資料夾下建立一個名為 MyStyleSheet.css 的樣式表文件。此 CSS 檔案將包含 Web 應用程式頁面一致設計所需的所有 CSS 類。

步驟 3 - 在 View 資料夾下建立一個 Shared 資料夾。

步驟 4 - 在 Shared 資料夾下建立一個 MasterLayout.cshtml 檔案。MasterLayout.cshtml 檔案表示應用程式中每個頁面的佈局。右鍵單擊解決方案資源管理器中的 Shared 資料夾，然後轉到“新增項”並單擊“檢視”。複製以下佈局程式碼。

佈局程式碼

<!DOCTYPE html> 

<html lang = "en"> 
   <head> 
      <meta charset = "utf-8" /> 
      <title>@ViewBag.Title - Tutorial Point</title> 
      <link href = "~/favicon.ico" rel = "shortcut icon" type = "image/x-icon" />
      <link rel = "stylesheet" href = "@Url.Content("~/Content/MyStyleSheet.css")" />
   </head> 
   
   <body> 
      <header> 
         
         <div class = "content-wrapper"> 
            <div class = "float-left"> 
               <p class = "site-title"> 
                  @Html.ActionLink("Tutorial Point", "Index", "Home")
               </p> 
            </div> 
            
            <div class = "float-right">
               <nav> 
                  <ul id = "menu"> 
                     <li>@Html.ActionLink("Home", "Index", "Home")</li> 
                      <li>@Html.ActionLink("About", "About", "Home")</li>
                  </ul> 
               </nav> 
            </div> 
         </div> 
      
      </header>
      <div id = "body"> 
         @RenderSection("featured", required: false) 
         <section class = "content-wrapper main-content clear-fix"> 
            @RenderBody() 
         </section> 
      </div>
      
      <footer>
         <div class = "content-wrapper">
            <div class = "float-left"> 
               <p>© @DateTime.Now.Year - Tutorial Point</p> 
            </div> 
         </div> 
      </footer>
   
   </body>
</html>

在此佈局中，我們使用了 HTML 幫助器方法和其他一些系統定義的方法，因此讓我們逐一瞭解這些方法。

Url.Content() - 此方法指定我們在 View 程式碼中使用的任何檔案的路徑。它以虛擬路徑作為輸入，並返回絕對路徑。
Html.ActionLink() - 此方法呈現 HTML 連結，這些連結連結到某個控制器的操作。第一個引數指定顯示名稱，第二個引數指定操作名稱，第三個引數指定控制器名稱。
RenderSection() - 指定要在模板中該位置顯示的節的名稱。
RenderBody() - 呈現關聯檢視的實際主體。

步驟 5 - 最後，開啟 Views 資料夾內的 _ViewStart.cshtml 檔案，並新增以下程式碼：

@{ 
   Layout = "~/Views/Shared/_Layout.cshtml"; 
}

如果該檔案不存在，您可以使用此名稱建立該檔案。

步驟 6 - 現在執行應用程式以檢視修改後的主頁。

MVC 框架 - 路由引擎

ASP.NET MVC 路由允許使用描述使用者操作且更容易被使用者理解的 URL。同時，路由可用於隱藏不打算向終端使用者顯示的資料。

例如，在一個不使用路由的應用程式中，使用者將看到 URL 為 http://myapplication/Users.aspx?id=1，這對應於 myapplication 路徑內的 Users.aspx 檔案，並將 ID 傳送為 1。通常，我們不希望向終端使用者顯示此類檔名。

為了處理 MVC URL，ASP.NET 平臺使用路由系統，該系統允許您建立任何所需的 URL 模式，並以清晰簡潔的方式表達它們。MVC 中的每個路由都包含一個特定的 URL 模式。此 URL 模式與傳入的請求 URL 進行比較，如果 URL 與此模式匹配，則路由引擎將使用它來進一步處理請求。

MVC 路由 URL 格式

為了理解 MVC 路由，請考慮以下 URL：

http://servername/Products/Phones

在上面的 URL 中，Products 是第一個段，Phone 是第二個段，可以用以下格式表示：

{controller}/{action}

MVC 框架會自動將第一個段視為控制器名稱，並將第二個段視為該控制器內的一個操作。

注意 - 如果您的控制器名稱為 ProductsController，則只需在路由 URL 中提及 Products。MVC 框架會自動理解控制器字尾。

建立簡單路由

路由定義在 RouteConfig.cs 檔案中，該檔案位於 App_Start 專案資料夾下。

您將在該檔案中看到以下程式碼：

public class RouteConfig { 
   
   public static void RegisterRoutes(RouteCollection routes) { 
      routes.IgnoreRoute("{resource}.axd/{*pathInfo}");  
      
      routes.MapRoute( 
         name: "Default", 
         url: "{controller}/{action}/{id}", 
         defaults: new { controller = "Home", action = "Index", 
            id = UrlParameter.Optional } 
      ); 
   } 
}

此 RegisterRoutes 方法在應用程式啟動時由 Global.ascx 呼叫。Global.ascx 下的 Application_Start 方法呼叫此 MapRoute 函式，該函式設定預設控制器及其操作（控制器類中的方法）。

要根據我們的示例修改上述預設對映，請更改以下程式碼行：

defaults: new { controller = "Products", action = "Phones", id = UrlParameter.Optional }

此設定將選擇 ProductsController 並呼叫其中的 Phone 方法。類似地，如果您在 ProductsController 中還有另一個方法，例如 Electronics，則其 URL 將為：

http://servername/Products/Electronics

MVC 框架 - 操作過濾器

在 ASP.NET MVC 中，控制器定義操作方法，這些操作方法通常與 UI 控制元件（例如單擊按鈕或連結等）之間存在一對一的關係。例如，在我們之前的一個示例中，UserController 類包含 UserAdd、UserDelete 等方法。

但是，很多時候我們希望在特定操作之前或之後執行某些操作。為了實現此功能，ASP.NET MVC 提供了一個功能，可以在控制器的操作方法上新增預操作和後操作行為。

過濾器型別

ASP.NET MVC 框架支援以下操作過濾器：

操作過濾器 - 操作過濾器用於實現邏輯，該邏輯在控制器操作執行之前和之後執行。我們將在本章中詳細介紹操作過濾器。
授權過濾器 - 授權過濾器用於為控制器操作實現身份驗證和授權。
結果過濾器 - 結果過濾器包含在執行檢視結果之前和之後執行的邏輯。例如，您可能希望在將檢視呈現到瀏覽器之前修改檢視結果。
異常過濾器 - 異常過濾器是最後一種執行的過濾器型別。您可以使用異常過濾器處理控制器操作或控制器操作結果引發的錯誤。您還可以使用異常過濾器記錄錯誤。

操作過濾器是最常用的過濾器之一，用於執行其他資料處理，或操作返回值或取消操作執行或在執行時修改檢視結構。

操作過濾器

操作過濾器是可以應用於控制器部分或整個控制器的附加屬性，用於修改操作執行的方式。這些屬性是從 System.Attribute 派生的特殊 .NET 類，可以附加到類、方法、屬性和欄位。

ASP.NET MVC 提供以下操作過濾器：

輸出快取 - 此操作過濾器將控制器操作的輸出快取指定時間段。
處理錯誤 - 此操作過濾器處理控制器操作執行時引發的錯誤。
授權 - 此操作過濾器允許您限制對特定使用者或角色的訪問。

現在，我們將看到程式碼示例，將這些過濾器應用於示例控制器 ActionFilterDemoController。（ActionFilterDemoController 僅用作示例。您可以在任何控制器上使用這些過濾器。）

輸出快取

示例 - 指定將返回值快取 10 秒。

public class ActionFilterDemoController : Controller { 
   [HttpGet] 
   OutputCache(Duration = 10)] 
   
   public string Index() { 
      return DateTime.Now.ToString("T");  
   } 
}

處理錯誤

示例 - 當控制器觸發錯誤時，將應用程式重定向到自定義錯誤頁面。

[HandleError] 
public class ActionFilterDemoController : Controller { 
   
   public ActionResult Index() { 
      throw new NullReferenceException(); 
   }  
   
   public ActionResult About() { 
      return View(); 
   } 
}

使用以上程式碼，如果在操作執行期間發生任何錯誤，它將在 Views 資料夾中找到名為 Error 的檢視並將其渲染給使用者。

授權

示例 - 僅允許授權使用者登入應用程式。

public class ActionFilterDemoController: Controller { 
   [Authorize] 
   
   public ActionResult Index() { 
      ViewBag.Message = "This can be viewed only by authenticated users only"; 
      return View(); 
   }  
   
   [Authorize(Roles="admin")] 
   public ActionResult AdminIndex() { 
      ViewBag.Message = "This can be viewed only by users in Admin role only"; 
      return View(); 
   } 
}

使用以上程式碼，如果您嘗試在未登入的情況下訪問應用程式，它將丟擲一個類似於以下螢幕截圖中顯示的錯誤。

MVC 框架 - 高階示例

在第一章中，我們學習了控制器和檢視如何在 MVC 中互動。在本教程中，我們將更進一步，學習如何使用模型並建立一個高階應用程式來建立、編輯、刪除和檢視應用程式中使用者的列表。

建立高階 MVC 應用程式

步驟 1 - 選擇檔案 → 新建 → 專案 → ASP.NET MVC Web 應用程式。將其命名為 AdvancedMVCApplication。單擊確定。在下一個視窗中，選擇模板為 Internet 應用程式，檢視引擎為 Razor。請注意，這次我們使用的是模板而不是空應用程式。

這將建立一個新的解決方案專案，如以下螢幕截圖所示。由於我們使用的是預設的 ASP.NET 主題，因此它帶有示例檢視、控制器、模型和其他檔案。

步驟 2 - 構建解決方案並執行應用程式以檢視其預設輸出，如以下螢幕截圖所示。

步驟 3 - 新增一個新的模型，它將定義使用者資料的結構。右鍵單擊 Models 資料夾，然後單擊新增 → 類。將其命名為 UserModel 並單擊新增。

步驟 4 - 將以下程式碼複製到新建立的 UserModel.cs 中。

using System; 
using System.ComponentModel; 
using System.ComponentModel.DataAnnotations; 
using System.Web.Mvc.Html;  

namespace AdvancedMVCApplication.Models { 
   public class UserModels { 
   
      [Required] 
      public int Id { get; set; } 
      [DisplayName("First Name")] 
      [Required(ErrorMessage = "First name is required")] 
      public string FirstName { get; set; }  
      [Required] 
      public string LastName { get; set; } 
         
      public string Address { get; set; } 
         
      [Required] 
      [StringLength(50)] 
      public string Email { get; set; } 
         
      [DataType(DataType.Date)] 
      public DateTime DOB { get; set; } 
          
      [Range(100,1000000)] 
      public decimal Salary { get; set; } 
   } 
}

在以上程式碼中，我們指定了 User 模型具有的所有引數、它們的資料型別以及驗證，例如必填欄位和長度。

現在我們已經準備好 User 模型來儲存資料，我們將建立一個類檔案 Users.cs，其中將包含檢視使用者、新增、編輯和刪除使用者的方法。

步驟 5 - 右鍵單擊 Models 並單擊新增 → 類。將其命名為 Users。這將在 Models 中建立 users.cs 類。將以下程式碼複製到 users.cs 類中。

using System; 
using System.Collections.Generic; 
using System.EnterpriseServices;  

namespace AdvancedMVCApplication.Models { 
   
   public class Users { 
      public List UserList = new List();  
      
      //action to get user details 
      public UserModels GetUser(int id) { 
         UserModels usrMdl = null;  
         
         foreach (UserModels um in UserList) 
            
            if (um.Id == id) 
               usrMdl = um; 
               return usrMdl; 
      }  
      
      //action to create new user 
      public void CreateUser(UserModels userModel) { 
         UserList.Add(userModel); 
      }  
      
      //action to udpate existing user 
      public void UpdateUser(UserModels userModel) { 
         
         foreach (UserModels usrlst in UserList) { 
            
            if (usrlst.Id == userModel.Id) { 
               usrlst.Address = userModel.Address; 
               usrlst.DOB = userModel.DOB; 
               usrlst.Email = userModel.Email; 
               usrlst.FirstName = userModel.FirstName; 
               usrlst.LastName = userModel.LastName; 
               usrlst.Salary = userModel.Salary; 
               break; 
            } 
         } 
      }  
      
      //action to delete exising user 
      public void DeleteUser(UserModels userModel) { 
         
         foreach (UserModels usrlst in UserList) { 
            
            if (usrlst.Id == userModel.Id) { 
               UserList.Remove(usrlst); 
               break; 
            } 
         } 
      } 
   } 
}

一旦我們有了 UserModel.cs 和 Users.cs，我們將為我們的模型新增檢視，用於檢視使用者、新增、編輯和刪除使用者。首先讓我們建立一個檢視來建立使用者。

步驟 6 - 右鍵單擊 Views 資料夾，然後單擊新增 → 檢視。

步驟 7 - 在下一個視窗中，選擇檢視名稱為 UserAdd，檢視引擎為 Razor，並選中建立強型別檢視複選框。

步驟 8 - 單擊新增。這將預設建立以下 CSHML 程式碼，如下所示 -

@model AdvancedMVCApplication.Models.UserModels  

@{ 
   ViewBag.Title = "UserAdd"; 
}

<h2>UserAdd</h2>  

@using (Html.BeginForm()) { 
   @Html.ValidationSummary(true)  
   
   <fieldset> 
      <legend>UserModels</legend>  
      <div class = "editor-label"> 
         @Html.LabelFor(model => model.FirstName) 
      </div> 
   
      <div class = "editor-field"> 
         @Html.EditorFor(model => model.FirstName) 
         @Html.ValidationMessageFor(model => model.FirstName) 
      </div>  
      
      <div class = "editor-label"> 
         @Html.LabelFor(model => model.LastName) 
      </div> 
   
      <div class = "editor-field"> 
         @Html.EditorFor(model => model.LastName) 
         @Html.ValidationMessageFor(model => model.LastName) 
      </div>  
      
      <div class = "editor-label"> 
         @Html.LabelFor(model => model.Address) 
      </div> 
   
      <div class = "editor-field"> 
         @Html.EditorFor(model => model.Address) 
         @Html.ValidationMessageFor(model => model.Address) 
      </div>  
      
      <div class = "editor-label"> 
         @Html.LabelFor(model => model.Email)
      </div> 
   
      <div class = "editor-field"> 
         @Html.EditorFor(model => model.Email) 
         @Html.ValidationMessageFor(model => model.Email) 
      </div>  
      
      <div class = "editor-label"> 
         @Html.LabelFor(model => model.DOB) 
      </div> 
   
      <div class = "editor-field"> 
         @Html.EditorFor(model => model.DOB) 
         @Html.ValidationMessageFor(model => model.DOB) 
      </div>  
      
      <div class = "editor-label"> 
         @Html.LabelFor(model => model.Salary) 
      </div> 
   
      <div class = "editor-field"> 
         @Html.EditorFor(model => model.Salary) 
         @Html.ValidationMessageFor(model => model.Salary) 
      </div>  
      
      <p> 
         <input type = "submit" value = "Create" /> 
      </p> 
   </fieldset> 
}  
<div> 
   @Html.ActionLink("Back to List", "Index") 
</div>  

@section Scripts { 
   
   @Scripts.Render("~/bundles/jqueryval") 
}

如您所見，此檢視包含所有欄位屬性的檢視詳細資訊，包括它們的驗證訊息、標籤等。此檢視在我們的最終應用程式中將如下所示。

類似於 UserAdd，現在我們將新增以下四個檢視，並使用給定的程式碼 -

Index.cshtml

此檢視將在索引頁面上顯示系統中存在的所有使用者。

@model IEnumerable<AdvancedMVCApplication.Models.UserModels>  

@{ 
   ViewBag.Title = "Index"; 
}  

<h2>Index</h2>  

<p> 
   @Html.ActionLink("Create New", "UserAdd") 
</p>  

<table> 
   <tr> 
      <th> 
         @Html.DisplayNameFor(model => model.FirstName) 
      </th> 
   
      <th> 
         @Html.DisplayNameFor(model => model.LastName) 
      </th> 
   
      <th> 
         @Html.DisplayNameFor(model => model.Address) 
      </th> 
   
      <th> 
         @Html.DisplayNameFor(model => model.Email) 
      </th> 
   
      <th> 
         @Html.DisplayNameFor(model => model.DOB) 
      </th> 
   
      <th> 
         @Html.DisplayNameFor(model => model.Salary) 
      </th> 
   
      <th></th>  
   </tr>  
   
   @foreach (var item in Model) { 
      <tr> 
         <td>
            @Html.DisplayFor(modelItem => item.FirstName) 
         </td> 
    
         <td> 
            @Html.DisplayFor(modelItem => item.LastName) 
         </td> 
    
         <td> 
            @Html.DisplayFor(modelItem => item.Address) 
         </td> 
    
         <td> 
            @Html.DisplayFor(modelItem => item.Email) 
         </td> 
    
         <td> 
            @Html.DisplayFor(modelItem => item.DOB) 
         </td> 
    
         <td> 
            @Html.DisplayFor(modelItem => item.Salary) 
         </td> 
    
         <td> 
            @Html.ActionLink("Edit", "Edit", new { id = item.Id }) | 
            @Html.ActionLink("Details", "Details", new { id = item.Id }) | 
            @Html.ActionLink("Delete", "Delete", new { id = item.Id }) 
         </td> 
      </tr> 
   } 
</table>

此檢視在我們的最終應用程式中將如下所示。

Details.cshtml

當我們單擊使用者記錄時，此檢視將顯示特定使用者的詳細資訊。

@model AdvancedMVCApplication.Models.UserModels  

@{ 
   ViewBag.Title = "Details"; 
}  

<h2>Details</h2>  
<fieldset> 
   <legend>UserModels</legend>  
   <div class = "display-label"> 
      @Html.DisplayNameFor(model => model.FirstName) 
   </div> 
  
   <div class = "display-field"> 
      @Html.DisplayFor(model => model.FirstName) 
   </div>  
   
   <div class = "display-label"> 
      @Html.DisplayNameFor(model => model.LastName) 
   </div> 
  
   <div class = "display-field"> 
      @Html.DisplayFor(model => model.LastName)
   </div>  
   
   <div class = "display-label"> 
      @Html.DisplayNameFor(model => model.Address) 
   </div> 
  
   <div class = "display-field"> 
      @Html.DisplayFor(model => model.Address) 
   </div>  
   
   <div class = "display-label"> 
      @Html.DisplayNameFor(model => model.Email) 
   </div> 
  
   <div class = "display-field"> 
      @Html.DisplayFor(model => model.Email) 
   </div>  
    
   <div class = "display-label"> 
      @Html.DisplayNameFor(model => model.DOB) 
   </div> 
  
   <div class = "display-field"> 
      @Html.DisplayFor(model => model.DOB) 
   </div>  
   
   <div class = "display-label"> 
      @Html.DisplayNameFor(model => model.Salary) 
   </div> 
  
   <div class = "display-field"> 
      @Html.DisplayFor(model => model.Salary) 
   </div> 
  
</fieldset>  
<p>
   @Html.ActionLink("Edit", "Edit", new { id = Model.Id }) | 
   @Html.ActionLink("Back to List", "Index") 
</p>

此檢視在我們的最終應用程式中將如下所示。

Edit.cshtml

此檢視將顯示用於編輯現有使用者詳細資訊的編輯表單。

@model AdvancedMVCApplication.Models.UserModels  

@{ 
   ViewBag.Title = "Edit"; 
}  

<h2>Edit</h2>  
@using (Html.BeginForm()) { 
   @Html.AntiForgeryToken() 
   @Html.ValidationSummary(true)  
   
   <fieldset> 
      <legend>UserModels</legend>  
      @Html.HiddenFor(model => model.Id)  
      <div class = "editor-label"> 
         @Html.LabelFor(model => model.FirstName) 
      </div> 
   
      <div class = "editor-field"> 
         @Html.EditorFor(model => model.FirstName) 
         @Html.ValidationMessageFor(model => model.FirstName) 
      </div>  
      
      <div class = "editor-label"> 
         @Html.LabelFor(model => model.LastName) 
      </div> 
   
      <div class = "editor-field"> 
         @Html.EditorFor(model => model.LastName) 
         @Html.ValidationMessageFor(model => model.LastName) 
      </div>  
      
      <div class = "editor-label"> 
         @Html.LabelFor(model => model.Address) 
      </div> 
   
      <div class = "editor-field"> 
         @Html.EditorFor(model => model.Address) 
         @Html.ValidationMessageFor(model => model.Address) 
      </div>  
      
      <div class = "editor-label"> 
         @Html.LabelFor(model => model.Email) 
      </div> 
   
      <div class = "editor-field"> 
         @Html.EditorFor(model => model.Email) 
         @Html.ValidationMessageFor(model => model.Email) 
      </div>  
      
      <div class = "editor-label"> 
         @Html.LabelFor(model => model.DOB)
      </div> 
   
      <div class = "editor-field"> 
         @Html.EditorFor(model => model.DOB) 
         @Html.ValidationMessageFor(model => model.DOB) 
      </div>  
      
      <div class = "editor-label"> 
         @Html.LabelFor(model => model.Salary) 
      </div> 
   
      <div class = "editor-field"> 
         @Html.EditorFor(model => model.Salary) 
         @Html.ValidationMessageFor(model => model.Salary) 
      </div>  
      
      <p> 
         <input type = "submit" value = "Save" /> 
      </p> 
   </fieldset> 
}  
<div> 
   @Html.ActionLink("Back to List", "Index") 
</div>  

@section Scripts { 
   @Scripts.Render("~/bundles/jqueryval") 
}

此檢視在我們的應用程式中將如下所示。

Delete.cshtml

此檢視將顯示用於刪除現有使用者的表單。

@model AdvancedMVCApplication.Models.UserModels  

@{ 
   ViewBag.Title = "Delete"; 
} 

<h2>Delete</h2>  
<h3>Are you sure you want to delete this?</h3>  
<fieldset> 
   <legend>UserModels</legend>  
   <div class = "display-label"> 
      @Html.DisplayNameFor(model => model.FirstName) 
   </div> 
  
   <div class = "display-field"> 
      @Html.DisplayFor(model => model.FirstName) 
   </div>  
   
   <div class = "display-label"> 
      @Html.DisplayNameFor(model => model.LastName) 
   </div> 
  
   <div class = "display-field"> 
      @Html.DisplayFor(model => model.LastName) 
   </div>  
   
   <div class = "display-label"> 
      @Html.DisplayNameFor(model => model.Address) 
   </div> 
  
   <div class = "display-field"> 
      @Html.DisplayFor(model => model.Address) 
   </div>  
   
   <div class = "display-label"> 
      @Html.DisplayNameFor(model => model.Email) 
   </div> 
  
   <div class = "display-field"> 
      @Html.DisplayFor(model => model.Email) 
   </div>  
   
   <div class = "display-label"> 
      @Html.DisplayNameFor(model => model.DOB) 
   </div> 
  
   <div class = "display-field"> 
      @Html.DisplayFor(model => model.DOB) 
   </div>  
   
   <div class = "display-label"> 
      @Html.DisplayNameFor(model => model.Salary)
   </div> 
  
   <div class = "display-field"> 
      @Html.DisplayFor(model => model.Salary) 
   </div> 
</fieldset>  

@using (Html.BeginForm()) { 
   @Html.AntiForgeryToken() 
   
   <p> 
      <input type = "submit" value = "Delete" /> | 
      @Html.ActionLink("Back to List", "Index") 
   </p> 
}

此檢視在我們的最終應用程式中將如下所示。

步驟 9 - 我們已經在應用程式中添加了模型和檢視。現在，我們最終將為我們的檢視新增一個控制器。右鍵單擊 Controllers 資料夾，然後單擊新增 → 控制器。將其命名為 UserController。

預設情況下，您的控制器類將使用以下程式碼建立 -

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

namespace AdvancedMVCApplication.Controllers {  
   
   public class UserController : Controller { 
      private static Users _users = new Users(); 
      
      public ActionResult Index() { 
         return View(_users.UserList); 
      } 
   } 
}

在以上程式碼中，Index 方法將在索引頁面上渲染使用者列表時使用。

步驟 10 - 右鍵單擊 Index 方法，然後選擇建立檢視以建立索引頁面的檢視（它將列出所有使用者並提供建立新使用者的選項）。

步驟 11 - 現在在 UserController.cs 中新增以下程式碼。在此程式碼中，我們正在為不同的使用者操作建立操作方法，並返回我們之前建立的相應檢視。

我們將為每個操作新增兩種方法：GET 和 POST。HttpGet 將在獲取資料並呈現資料時使用。HttpPost 將用於建立/更新資料。例如，當我們新增新使用者時，我們需要一個表單來新增使用者，這是一個 GET 操作。一旦我們填寫表單並提交這些值，我們將需要 POST 方法。

//Action for Index View  
public ActionResult Index() { 
   return View(_users.UserList); 
}  

//Action for UserAdd View 
[HttpGet] 
public ActionResult UserAdd() { 
   return View(); 
}  

[HttpPost] 
public ActionResult UserAdd(UserModels userModel) { 
   _users.CreateUser(userModel); 
   return View("Index", _users.UserList); 
}  

//Action for Details View 
[HttpGet] 
public ActionResult Details(int id) { 
   return View(_users.UserList.FirstOrDefault(x => x.Id == id)); 
}  

[HttpPost] 
public ActionResult Details() { 
   return View("Index", _users.UserList); 
}  

//Action for Edit View 
[HttpGet] 
public ActionResult Edit(int id) { 
   return View(_users.UserList.FirstOrDefault(x=>x.Id==id)); 
} 

[HttpPost] 
public ActionResult Edit(UserModels userModel) { 
   _users.UpdateUser(userModel); 
   return View("Index", _users.UserList); 
} 
        
//Action for Delete View 
[HttpGet] 
public ActionResult Delete(int id) { 
   return View(_users.UserList.FirstOrDefault(x => x.Id == id)); 
}  

[HttpPost] 
public ActionResult Delete(UserModels userModel) { 
   _users.DeleteUser(userModel); 
   return View("Index", _users.UserList); 
} sers.UserList);

步驟 12 - 最後要做的是轉到 App_Start 資料夾中的 RouteConfig.cs 檔案並將預設控制器更改為 User。

defaults: new { controller = "User", action = "Index", id = UrlParameter.Optional }

這就是我們使高階應用程式執行所需做的全部。

步驟 13 - 現在執行應用程式。您將能夠看到一個應用程式，如以下螢幕截圖所示。您可以執行新增、檢視、編輯和刪除使用者的所有功能，就像我們在之前的螢幕截圖中看到的那樣。

MVC 框架 - Ajax 支援

您可能知道，Ajax 是非同步 JavaScript 和 XML 的縮寫。MVC 框架包含對非侵入式 Ajax 的內建支援。您可以使用輔助方法來定義您的 Ajax 功能，而無需在所有檢視中新增程式碼。MVC 中此功能基於 jQuery 功能。

要在 MVC 應用程式中啟用非侵入式 AJAX 支援，請開啟 Web.Config 檔案，並在 appSettings 部分中使用以下程式碼設定 UnobtrusiveJavaScriptEnabled 屬性。如果金鑰已存在於您的應用程式中，您可以忽略此步驟。

<add key = "UnobtrusiveJavaScriptEnabled" value = "true" />

之後，開啟位於 Views/Shared 資料夾下的公共佈局檔案_Layout.cshtml檔案。我們將在這裡使用以下程式碼新增對 jQuery 庫的引用 -

<script src = "~/Scripts/jquery-ui-1.8.24.min.js" type = "text/javascript">
</script> 

<script src = "~/Scripts/jquery.unobtrusive-ajax.min.js" type = "text/javascript">
</script>

建立非侵入式 Ajax 應用程式

在以下示例中，我們將建立一個表單，該表單將在系統中顯示使用者列表。我們將放置一個包含三個選項的下拉列表：管理員、普通使用者和訪客。當您選擇其中一個值時，它將使用非侵入式 AJAX 設定顯示屬於此類別的使用者列表。

步驟 1 - 建立一個模型檔案 Model.cs 並複製以下程式碼。

using System;  

namespace MVCAjaxSupportExample.Models { 
   
   public class User { 
      public int UserId { get; set; } 
      public string FirstName { get; set; } 
      public string LastName { get; set; } 
      public DateTime BirthDate { get; set; } 
      public Role Role { get; set; } 
   }  
   
   public enum Role { 
      Admin, 
      Normal, 
      Guest 
   } 
}

步驟 2 - 建立一個名為 UserController.cs 的控制器檔案，並在其中使用以下程式碼建立兩個操作方法。

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

namespace MVCAjaxSupportExample.Controllers {
   
   public class UserController : Controller { 
      
      private readonly User[] userData = 
      { 
         new User {FirstName = "Edy", LastName = "Clooney", Role = Role.Admin}, 
         new User {FirstName = "David", LastName = "Sanderson", Role = Role.Admin}, 
         new User {FirstName = "Pandy", LastName = "Griffyth", Role = Role.Normal}, 
         new User {FirstName = "Joe", LastName = "Gubbins", Role = Role.Normal}, 
         new User {FirstName = "Mike", LastName = "Smith", Role = Role.Guest} 
      }; 
      
      public ActionResult Index() { 
         return View(userData); 
      } 
      
      public PartialViewResult GetUserData(string selectedRole = "All") { 
         IEnumerable data = userData; 
         
         if (selectedRole != "All") { 
            var selected = (Role) Enum.Parse(typeof (Role), selectedRole); 
            data = userData.Where(p => p.Role == selected); 
         } 
         
         return PartialView(data); 
      }  
      
      public ActionResult GetUser(string selectedRole = "All") { 
         return View((object) selectedRole); 
      } 
   } 
}

步驟 3 - 現在建立一個名為 GetUserData 的部分檢視，並使用以下程式碼。此檢視將用於根據從下拉列表中選擇的角色呈現使用者列表。

@model IEnumerable<MVCAjaxSupportExample.Models.User> 

<table> 
   <tr> 
      <th> 
         @Html.DisplayNameFor(model => model.FirstName) 
      </th> 
      
      <th> 
         @Html.DisplayNameFor(model => model.LastName) 
      </th> 
      
      <th> 
         @Html.DisplayNameFor(model => model.BirthDate) 
      </th> 
      <th></th> 
   </tr>  

   @foreach (var item in Model) { 
   <tr> 
      <td> 
         @Html.DisplayFor(modelItem => item.FirstName) 
      </td> 
      
      <td> 
         @Html.DisplayFor(modelItem => item.LastName) 
      </td> 
      
      <td> 
         @Html.DisplayFor(modelItem => item.BirthDate) 
      </td> 
      
      <td> 
         
      </td> 
   </tr> 
}  
</table>

步驟 4 - 現在建立一個名為 GetUser 的檢視，並使用以下程式碼。此檢視將非同步從之前建立的控制器的 GetUserData 操作獲取資料。

@using MVCAjaxSupportExample.Models 
@model string 

@{ 
ViewBag.Title = "GetUser"; 

AjaxOptions ajaxOpts = new AjaxOptions { 
UpdateTargetId = "tableBody" 
}; 
} 

<h2>Get User</h2> 
<table> 
   <thead>
      <tr>
         <th>First</th>
         <th>Last</th>
         <th>Role</th>
      </tr>
   </thead> 
   
   <tbody id="tableBody"> 
      @Html.Action("GetUserData", new {selectedRole = Model }) 
   </tbody> 
</table>  

@using (Ajax.BeginForm("GetUser", ajaxOpts)) { 
   <div> 
      @Html.DropDownList("selectedRole", new SelectList( 
      new [] {"All"}.Concat(Enum.GetNames(typeof(Role))))) 
      <button type="submit">Submit</button> 
   </div> 
}

步驟 5 - 最後，更改 Route.config 條目以啟動 User 控制器。

defaults: new { controller = "User", action = "GetUser", id = UrlParameter.Optional }

步驟 6 - 執行應用程式，它將如下面的螢幕截圖所示。

如果您從下拉列表中選擇管理員，它將獲取所有型別為管理員的使用者。這是透過 AJAX 完成的，並且不會重新載入整個頁面。

MVC 框架 - 捆綁

捆綁和壓縮是兩種效能改進技術，可提高應用程式的請求載入時間。大多數當前的主流瀏覽器將每個主機名的同時連線數限制為六個。這意味著，一次，瀏覽器將對所有其他請求進行排隊。

啟用捆綁和壓縮

要在您的 MVC 應用程式中啟用捆綁和壓縮，請開啟解決方案中的 Web.config 檔案。在此檔案中，搜尋 system.web 下的編譯設定 -

<system.web>
   <compilation debug = "true" />
</system.web>

預設情況下，您將看到除錯引數設定為 true，這意味著捆綁和壓縮已停用。將此引數設定為 false。

捆綁

為了提高應用程式的效能，ASP.NET MVC 提供了內建功能，可以將多個檔案捆綁到一個檔案中，這反過來又可以提高頁面載入效能，因為 HTTP 請求更少。

捆綁是檔案的簡單邏輯組，可以透過唯一名稱引用並使用單個 HTTP 請求載入。

預設情況下，MVC 應用程式的 BundleConfig（位於 App_Start 資料夾中）帶有以下程式碼 -

public static void RegisterBundles(BundleCollection bundles) { 
   
   // Following is the sample code to bundle all the css files in the project         
   
   // The code to bundle other javascript files will also be similar to this 
  
   bundles.Add(new StyleBundle("~/Content/themes/base/css").Include( 
      "~/Content/themes/base/jquery.ui.core.css", 
      "~/Content/themes/base/jquery.ui.tabs.css", 
      "~/Content/themes/base/jquery.ui.datepicker.css",  
      "~/Content/themes/base/jquery.ui.progressbar.css", 
      "~/Content/themes/base/jquery.ui.theme.css")); 
}

以上程式碼基本上將 Content/themes/base 資料夾中存在的所有 CSS 檔案捆綁到一個檔案中。

壓縮

壓縮是另一種此類效能改進技術，其中它透過縮短變數名稱、刪除不必要的空格、換行符、註釋等來最佳化 javascript、css 程式碼。這反過來會減小檔案大小並幫助應用程式載入得更快。

使用 Visual Studio 和 Web Essentials 擴充套件進行壓縮

要使用此選項，您必須首先在 Visual Studio 中安裝 Web Essentials 擴充套件。之後，當您右鍵單擊任何 css 或 javascript 檔案時，它將顯示建立該檔案的壓縮版本的選項。

因此，如果您有一個名為 Site.css 的 css 檔案，它將建立其壓縮版本為 Site.min.css。

現在，當您的應用程式下次在瀏覽器中執行時，它將捆綁並壓縮所有 css 和 js 檔案，從而提高應用程式效能。

MVC 框架 - 異常處理

在 ASP.NET 中，錯誤處理是使用標準的 try catch 方法或使用應用程式事件完成的。ASP.NET MVC 帶有使用稱為異常篩選器的功能進行異常處理的內建支援。我們將在這裡學習兩種方法：一種是覆蓋 onException 方法，另一種是定義 HandleError 篩選器。

覆蓋 OnException 方法

當我們希望在控制器級別處理所有操作方法中的所有異常時，使用此方法。

要了解此方法，請建立一個 MVC 應用程式（按照前面章節中介紹的步驟）。現在新增一個新的控制器類並新增以下程式碼，該程式碼覆蓋 onException 方法並在我們的操作方法中顯式丟擲錯誤 -

現在讓我們建立一個名為Error的通用檢視，當應用程式中發生任何異常時，該檢視將顯示給使用者。在 Views 資料夾中，建立一個名為 Shared 的新資料夾，並新增一個名為 Error 的新檢視。

將以下程式碼複製到新建立的 Error.cshtml 中 -

如果您現在嘗試執行應用程式，它將給出以下結果。以上程式碼在該控制器中的任何操作方法中發生任何異常時，都會呈現 Error 檢視。

此方法的優點是同一個控制器中的多個操作可以共享此錯誤處理邏輯。但是，缺點是我們無法在多個控制器中使用相同的錯誤處理邏輯。

HandleError 屬性

HandleError 屬性是我們過濾器和操作過濾器章節中學習的操作過濾器之一。HandleErrorAttribute 是 IExceptionFilter 的預設實現。此過濾器處理控制器操作、過濾器和檢視引發的所有異常。

要使用此功能，首先在 web.config 中開啟 customErrors 部分。開啟 web.config 並將以下程式碼放在 system.web 內部，並將其值設定為 On。

<customErrors mode = "On"/>

我們已經在 Views 下的 Shared 資料夾中建立了 Error View。這次將此 View 檔案的程式碼更改為以下內容，以使用 HandleErrorInfo 模型（位於 System.Web.MVC 下）對其進行強型別化。

@model System.Web.Mvc.HandleErrorInfo 

@{ 
Layout = null; 
} 
  
<!DOCTYPE html> 
<html> 
   <head> 
      <meta name = "viewport" content = "width = device-width" /> 
      <title>Error</title> 
   </head> 
   
   <body> 
      <h2> 
         Sorry, an error occurred while processing your request.  
      </h2> 
      <h2>Exception details</h2> 
      
      <p> 
         Controller: @Model.ControllerName <br> 
         Action: @Model.ActionName 
         Exception: @Model.Exception 
      </p> 
   
   </body> 
</html>

現在將以下程式碼放在您的控制器檔案中，該程式碼在控制器檔案中指定了 [HandleError] 屬性。

using System; 
using System.Data.Common; 
using System.Web.Mvc;  

namespace ExceptionHandlingMVC.Controllers { 
   [HandleError] 
   public class ExceptionHandlingController : Controller { 
      
      public ActionResult TestMethod() { 
         throw new Exception("Test Exception"); 
         return View(); 
      } 
   } 
}

如果您現在嘗試執行應用程式，您將收到類似於以下螢幕截圖中顯示的錯誤。

如您所見，這次錯誤包含有關控制器和操作相關詳細資訊的更多資訊。透過這種方式，HandleError 可以用於任何級別和跨控制器來處理此類錯誤。

列印頁面