ASP.NET MVC快速入門（一）

本文轉載自查看原文 2021-12-02 17:27 1974 C#/ .Net/C#/WinForm/WPF/ ASP.NET MVC

MVC是當前比較流行的WEB程序開發模式之一，ASP.NET MVC是.Net對MVC的一種實現。本文主要以一些簡單的小例子，簡述ASP.NET MVC的簡單應用，僅供學習分享使用，如有不足之處，還請指正。

MVC概述

MVC是當前比較流行的WEB程序開發模式之一，ASP.NET MVC是.Net對MVC的一種實現。MVC（Model View Controller 模型-視圖-控制器）具體如下所示：

Model（模型）表示應用程序核心（比如數據庫記錄列表）。
View（視圖）顯示數據（數據庫記錄）。
Controller（控制器）處理輸入（寫入數據庫記錄）。

MVC 分層有助於管理復雜的應用程序，因為您可以在一個時間內專門關注一個方面。例如，您可以在不依賴業務邏輯的情況下專注於視圖設計。同時也讓應用程序的測試更加容易。MVC 分層同時也簡化了分組開發。不同的開發人員可同時開發視圖、控制器邏輯和業務邏輯。

什么是ASP.NET MVC?

ASP.NET MVC是.Net對MVC三層架構的一種實現方式，在.Net體系中，地位如下：

ASP.NET MVC項目創建

文件-->新建-->項目，打開項目創建對話框，然后選擇ASP.NET Web應用程序(.NET Framework)，點擊【下一步】。如下所示：

點擊【下一步】打開項目配置窗口，輸入項目名稱，和保存位置，然后點擊【創建】，如下所示：

點擊【創建】后，打開【創建新的Web應用程序窗口】，選擇MVC模板，然后點擊【創建】，如下所示：

稍等片刻，即可創建成功。通過模板創建的MVC程序，會自動創建對應的文件夾和默認示例文件，如下所示：

通過點擊工具欄的【運行】按鈕或快捷鍵【F5】即可啟動Visual Studio自帶的IIS Express運行項目，如下所示，

然后在瀏覽器中打開，輸入網址 https:localhost:44310，默認框架模板創建的程序如下所示：

ASP.NET MVC默認路由配置

ASP.NET MVC的路由配置在RouteConfig.cs中，默認訪問url為{controller}/{action}/{id}的方式，如果為空默認controller為Home，默認action為Index，id為可選項。

即：https://localhost:44301/ 和 https://localhost:44301/Home/Index是等價的。默認配置可以修改，以適應實際業務的需要。

ASP.NET MVC的約定

在ASP.NET MVC中，流行【約定大於配置】的說法，即在同一個項目中，大家都按照同一種方式去開發，會使項目更易於維護，可讀性更高，同時簡化大量的配置，以提高工作效率。ASP.NET MVC中的約定，體現如下：

控制器的約定：

所有的Controller必須放到Controllers文件夾中，並以【名稱+Controller】的方式命名，如：HomeController。
每個Controller都對應View中的一個文件夾，文件夾的名稱跟Controller名相同，如：Home。
Controller中的方法名都對應一個View視圖（非必須，但是建議這么做）而且View的名字跟Action的名字相同。
控制器必須是非靜態類，並且要實現IController接口，默認繼承自Controller。
Controller類型可以放到其他項目中

視圖的約定：

所有的視圖必須放到Views目錄下。
不同控制器的視圖用文件夾進行分割，每個控制器都對應一個視圖目錄。
一般視圖名字跟控制器的Action相對應（非必須）。
多個控制器公共的視圖放到Shared：例如公用的錯誤頁、列表模板頁、表單模板頁等等；

ASP.NET MVC模型創建

為了演示程序，首先創建模型類Student，在Models文件夾-->右鍵-->添加-->類，如下所示：

在【添加新項】窗口中，選擇類，輸入名稱，點擊【添加】即可，如下所示：

Student模型類，創建成功后，如下所示：

 1 namespace DemoMvc.Models
 2 {
 3     /// <summary>
 4     /// 學生實體類
 5     /// </summary>
 6     public class Student
 7     {
 8         /// <summary>
 9         /// 唯一標識
10         /// </summary>
11         public int id { get; set; }
12 
13         /// <summary>
14         /// 姓名
15         /// </summary>
16         public string Name { get; set; }
17 
18         /// <summary>
19         /// 年齡
20         /// </summary>
21         public int Age { get; set; }
22     }
23 }

ASP.NET MVC控制器創建

在controllers文件夾-->點擊右鍵-->添加-->控制器，如下所示：

在打開的控制器創建對話框，選擇【MVC5 控制器 - 空】，點擊【創建】，如下所示：

彈出【添加控制器】對話框，輸入控制器名稱，點擊【添加】，如下所示：

控制器創建成功后，默認創建Index功能，並會自動在Views文件夾下創建Student文件夾，如下所示：

ASP.NET MVC視圖創建

在Student文件夾-->右鍵-->添加-->視圖，打開【添加視圖】窗口，如下所示：

在【添加視圖】窗口，輸入視圖名稱，然后點擊【添加】如下所示：

視圖創建成功后，默認為Razor視圖，如下所示：

修改視圖，在視圖中添加如下代碼，和模型Student進行對應，如下所示：

 1 @{
 2     Layout = null;
 3 }
 4 
 5 <!DOCTYPE html>
 6 
 7 <html>
 8 <head>
 9     <meta name="viewport" content="width=device-width" />
10     <title>Index</title>
11     <style type="text/css">
12         input{
13             width:100%;
14             height:33px;
15         }
16 
17     </style>
18 </head>
19 <body>
20     <h1>學生基礎信息</h1>
21     <form name="form1" method="post">
22         <table width="400">
23             <tr>
24                 <td width="20%" >學號：</td>
25                 <td width="80%" align="left">
26                     <input type="text" name="id" />
27                 </td>
28             </tr>
29             <tr>
30                 <td >姓名：</td>
31                 <td align="left">
32                     <input type="text" name="Name" />
33                 </td>
34 
35             </tr>
36             <tr>
37                 <td >年齡：</td>
38                 <td align="left">
39                     <input type="text" name="Age" />
40                 </td>
41             </tr>
42             <tr>
43                 <td colspan="2" align="center">
44                     <input type="submit" value="提交" style="width:30%" />
45                     <input type="reset" value="重置" style="width:30%" />
46                 </td>
47             </tr>
48 
49         </table>
50         
51     </form>
52 </body>
53 </html>

運行程序，在瀏覽器中輸入網址：【https://localhost:44310/Student/Index】，如下所示：

ASP.NET MVC數據傳遞

在ASP.NET MVC中，為了與用戶進行交互，數據需要從瀏覽器傳遞到后台，經過業務處理后，再返回給瀏覽器，呈現給用戶，具體流程如下所示：

本次主要分析如何將數據從View層傳遞到Controller層，及如何從Controller層傳遞到View層。那具體要如何傳遞數據呢？

View層傳遞到Controller層，可以通過以下幾種方式：

1. 通過內置對象Request進行獲取，如下所示：

1 public ActionResult SaveStudent() {
2       int id =Convert.ToInt32( Request.Params["id"]);
3       string Name = Request.Params["Name"].ToString();
4       int Age = Convert.ToInt32(Request.Params["Age"]);
5       //Console.WriteLine(string.Format("id = {0},Name = {1},Age = {2}",id,Name,Age));
6       return View("Index");
7 }

調試狀態下，可以查看從前台獲取的值，如下所示：

2. 通過模型類Student進行獲取，即以模型類作為入參，前端傳遞的數據，會自動和模型類中的屬性進行匹配，如下所示：

1 public ActionResult SaveStudent2(Student student)
2 {
3       int id = student.id;
4       string Name = student.Name;
5       int Age = student.Age;
6       return View("Index");
7 }

在調試狀態下，可以查詢模型類中的屬性值，如下所示：

Controller層傳遞到View層，可以通過以下幾種方式：

1. 通過ViewData將數據從控制層傳遞到視圖層。

在控制層對ViewData進行賦值，如下所示：

1 ViewData["msg"] = "請先輸入學生信息";

在視圖層獲取信息並展示，如下所示：

1 <td colspan="2" align="center">
2      <span style="color:red">@ViewData["msg"].ToString()</span>
3 </td>

運行起來，如下圖所示：

2. 通過ViewBag將數據從控制層傳遞到視圖層，如下所示：

在控制層對ViewBag進行賦值，如下所示：

1 ViewBag.msg = "請先輸入學生信息";

在視圖層獲取信息並展示，如下所示：

1 <td colspan="2" align="center">
2       <span style="color:red">@ViewBag.msg</span>
3 </td>

示例效果和ViewData一致。ViewData和ViewBag對比差異，如下所示：

為何可以同時在控制層和視圖層使用ViewData和ViewBag呢？

通過查看代碼結構發現，ViewData和ViewBag屬於ControllerBase的屬性。

同時又是WebViewPage的屬性，如下所示：

所以個人猜測：在調用View()返回視圖的時候，同時將ViewData和ViewBag進行了賦值，所以才可以在控制層和視圖層同時進行使用。

備注

以上是ASP.NET MVC快速入門介紹，旨在拋磚引玉，一起學習，共同進步。

免責聲明！

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

猜您在找 Asp.NET MVC基礎第一篇 Asp.NET MVC快速入門 ASP.NET MVC 5 學習教程：快速入門 ASP.NET Core快速入門（第6章：ASP.NET Core MVC）--學習筆記 ASP.NET MVC 5 一入門 Asp.Net MVC 入門【番外篇】ASP.NET MVC快速入門之免費jQuery控件庫（MVC5+EF6）【第三篇】ASP.NET MVC快速入門之安全策略（MVC5+EF6）【第四篇】ASP.NET MVC快速入門之完整示例（MVC5+EF6）【第二篇】ASP.NET MVC快速入門之數據注解（MVC5+EF6） asp.net core MVC 入門學習