7 天逐步学习 MVC (Model View Controller) – 第 2 天






4.85/5 (130投票s)
7 天逐步学习 MVC (Model View Controller) – 第 2 天
MVC 2 已经比较老旧了,这篇文章写于很多年前。我们建议您从我们最新的 MVC 5 循序渐进系列开始阅读:-https://codeproject.org.cn/Articles/866143/Learn-MVC-step-by-step-in-days-Day
目录
- 那么,日程安排是什么?
- 第1天:-控制器、强类型视图和辅助类
- 第2天:-单元测试、路由和传出URL
- 第3天:-部分视图、数据注释、Razor、身份验证和授权
- 第4天:- JSON、JQuery、状态管理和异步控制器
- 第5天:-打包、最小化、视图模型、区域和异常处理
- 第6天:-显示模式、MVC OAuth、模型绑定器、布局和自定义视图引擎
- 实验 6:单元测试 MVC 项目
- 实验 7:理解 MVC 路由
- 实验 8:验证和设置 MVC URL 的默认值
- 实验 9:理解 MVC 出站 URL
- 第三天有什么内容?
- 50个MVC面试题及答案
那么,议程是什么?
在第 2 天,我们将介绍以下四个实验
- 对 MVC 项目编写单元测试。
- 配置 MVC 路由。
- 验证 MVC 路由。
- 配置 MVC 出站路由。
以下是 MVC 文章其他部分的链接:-
第1天:-控制器、强类型视图和辅助类
https://codeproject.org.cn/Articles/207797/Learn-MVC-Model-view-controller-Step-by-Step-in-7
第2天:-单元测试、路由和传出URL
https://codeproject.org.cn/Articles/259560/Learn-MVC-Model-view-controller-Step-by-Step-in-7
第3天:-部分视图、数据注释、Razor、身份验证和授权
https://codeproject.org.cn/Articles/375182/Learn-MVC-Model-View-Controller-Step-by-Step-in-4
第4天:- JSON、JQuery、状态管理和异步控制器
https://codeproject.org.cn/Articles/667841/Learn-MVC-Model-view-controller-Step-by-Step-in-3
第5天:-打包、最小化、视图模型、区域和异常处理
https://codeproject.org.cn/Articles/724559/Learn-MVC-Model-view-controller-Step-by-Step-in-7
第6天:-显示模式、MVC OAuth、模型绑定器、布局和自定义视图引擎
https://codeproject.org.cn/Articles/789278/Learn-MVC-Model-view-controller-Step-by-Step-in-d
如果您是完全的新手,我建议您从以下 4 个大约 10 分钟的 MVC 网站视频开始,这样您就可以更快地掌握 MVC。
实验编号。 | 实验描述 | 相关的 YouTube 视频演示 |
1 | 一个简单的 ASP.NET MVC "Hello world" 应用程序。 | http://youtu.be/KAKxm4eQP24?hd=1 |
2 | 在这个实验中,我们将了解如何使用 ViewData 在控制器和视图之间共享数据。 | http://youtu.be/Fu9v2MIDlTA?hd=1 |
3 | 在这个实验中,我们将创建一个简单的客户模型,为其填充一些数据,并在视图中显示。 | http://youtu.be/0-UdqWy9lVc?hd=1 |
4 | 在这个实验中,我们将创建一个简单的客户数据录入屏幕,并在视图上进行一些验证。 | http://youtu.be/1dlxtHuRw34?hd=1 |
那么,让我们一个接一个地开始进行上述 4 个实验。
实验 6:单元测试 MVC 项目
当我们开始整个 MVC 系列(第 1 天)时,我们主要关心两个关于后台代码的问题:
- 如何在 ASP.NET 后台代码上进行单元测试?
- 如何重用 ASP.NET 后台代码与不同的用户界面?
在本节中,让我们专注于第一个问题,即单元测试。
如果我们需要对 ASP.NET 后台代码中的 btngenerateinvoices_click
方法进行单元测试,我们可能会遇到以下问题:
- 我们如何创建
sender
和eventargs
对象? - 下面的完整代码在
HttpContext
对象下运行,我该如何模拟它? - ASP.NET UI 控件呢,我该如何访问它们?
- 其他 ASP.NET 对象如 session 对象、application 对象呢,我该如何访问它们?
供参考:许多开发人员会谈论 mock tests、rhino mocks 等,但它们仍然是晦涩难懂的,并且随着 session 变量、view data 对象、ASP.NET UI 控件的增加,复杂性会增加,导致进一步的混淆。
所以,在本节中,我们将创建一个简单的 MVC 应用程序,并使用 VSTS 单元测试框架对该 ASP.NET 应用程序进行单元测试。
步骤 1:创建简单的显示客户屏幕项目
第一步是创建一个简单的 MVC 项目。我们将使用在 MVC(模型-视图-控制器)第 1 天讨论过的相同项目 LearnMVC.aspx。因此,如果您没有任何示例项目,请使用上面的链接创建一个。
一天结束时,控制器类就是一个简单的 .NET 类。例如,如果您仔细查看项目代码,可以轻松看到客户控制器类,如下所示:
public class CustomerController : Controller
{
...
....
public ViewResult DisplayCustomer()
{
Customer objCustomer = new Customer();
objCustomer.Id = 12;
objCustomer.CustomerCode = "1001";
objCustomer.Amount = 90.34;
return View("DisplayCustomer",objCustomer);
}
}
简单来说,因为这是一个简单的 .NET 类,所以我们可以轻松实例化该类并为其创建自动化的单元测试。这正是我们将在下一步中要做的。
步骤 2:添加一个简单的单元测试项目
让我们使用 VSTS 单元测试框架来测试控制器类。如果您是 VSTS 单元测试的完全新手,请参阅这篇文章了解单元测试: https://codeproject.org.cn/KB/cs/VSTSTesting.aspx。使用测试项目解决方案模板为您的解决方案添加一个新项目。
步骤 3:添加适当的项目引用
我们需要在单元测试项目中添加对 MVC 应用程序的引用,以便我们可以获得控制器类。
添加引用后,您应该会在项目引用中看到 MVC 应用程序,如下面的图所示:
步骤 4:编写单元测试
添加完引用后,打开单元测试类,即 UnitTest1.cs。在此类中,创建一个名为 DisplayCustomer
的简单测试方法,该方法被 TestMethod
属性修饰,如下面的代码片段所示。
如果您查看下面的代码片段,我们正在创建一个控制器类的对象,调用控制器操作,即 DisplayCustomer
,然后检查视图名称是否为 DisplayCustomer
。如果它们相等,则表示测试通过,否则测试失败。
[TestMethod]
public void DisplayCustomer()
{
CustomerController obj = new CustomerController();
var varresult = obj.DisplayCustomer();
Assert.AreEqual("DisplayCustomer", varresult.ViewName);
}
步骤 5:最后运行单元测试
编写完测试用例后,就可以通过点击测试、窗口,然后点击测试视图来运行测试用例了。
在测试视图中,右键单击测试并运行选定的测试用例,如下所示:
如果一切顺利,您应该会看到绿色表示测试通过,否则您应该会看到红色并显示测试失败的原因。
下一个实验是什么?
在下一个实验中,我们将讨论 MVC 路由。MVC 完全是为了将操作连接到控制器,而 MVC 路由有助于我们实现这一点。所以,请准备好在我们的下一个教程中被路由。
实验 7:理解 MVC 路由
引言
归根结底,MVC 不过是将 URL 映射到控制器,控制器映射到操作。
例如,当用户从浏览器发送一个请求 URL,如 www.questpond.com/locateproduct 时,这些操作会与 MVC 控制器进行映射,而 MVC 控制器最终会调用这些函数。
下面是一个简单的表格,显示了整个过程的样子:
为了增加复杂性,我们可以有多个 URL 映射到一个控制器,或者您可以有多个控制器映射到一个 URL。例如,您可能有一个 www.questpond.com/contactus 和 www.questpond.com/aboutus 映射到一个名为 AboutUsController
的控制器。
如果我们有一种机制来配置这些映射,那将是很好的。这正是 MVC 路由的用途。MVC 路由有助于轻松配置 URL 与控制器之间的映射。
步骤 1:使用第一天创建的 MVC 项目。
让我们使用我们在上一节中讨论过的相同的客户项目。
步骤 2:修改 global.asax.cs
所有路由映射都存储在“global.asax.cs”代码隐藏文件中。因此,第一步是转到并修改此文件。
所有路由映射都存储在一个名为 routes
的集合中。此集合属于 System.Web.Routing
命名空间。要添加路由,您需要调用 MapRoute
方法并传递三个参数:name
、url
和 defaults
。
下面是 maproute
函数代码片段的屏幕截图。
Name
是路由在集合中被识别的键名。Url
定义了我们希望与控制器连接的 URL 格式。例如,在下面的代码片段中,我们说 View/ViewCustomer 是 URL 格式。Defaults
定义了当调用 URL 时将被调用的控制器类和操作函数。例如,在下面的代码中,我们说当调用 View/ViewCustomer 时,它将调用Customer
控制器类,并调用DisplayCustomer
操作函数。
如果您的控制器接受参数,您可以使用 { 括号。例如,在下面的代码片段中,我们使用了 { 来指定我们可以有一个 id
参数。如果要将参数定义为可选,可以使用 UrlParameter.Optional
枚举。
首先,注释掉默认的映射代码。我们稍后会解释默认的映射代码。
//routes.MapRoute(
// "Default", // Route name
// "{controller}/{action}/{id}", // URL with parameters
// new { controller = "Home", action = "Index", id =
UrlParameter.Optional }); // Parameter defaults
放入以下代码,这意味着当我们调用 https:///View/ViewCustomer/ 时,它将调用客户控制器并调用 displaycustomer
函数。
routes.MapRoute(
"View", // Route name
"View/ViewCustomer/{id}", // URL with parameters
new { controller = "Customer", action = "DisplayCustomer",
id = UrlParameter.Optional }); // Parameter defaults
下面是将被调用的 DisplayCustomer
操作函数:
public ViewResult DisplayCustomer()
{
Customer objCustomer = new Customer();
objCustomer.Id = 12;
objCustomer.CustomerCode = "1001";
objCustomer.Amount = 90.34;
return View("DisplayCustomer",objCustomer);
}
步骤 3:运行应用程序
如果您运行应用程序,您应该会看到下面的显示。
如果您还记得,我们注释掉了默认的入口路由。让我们理解一下这段默认代码的含义。
"{controller}/{action}/{id}" 定义了 URL 将自动命名为控制器名称 / 函数操作名称 / 值 的约定。因此,如果您有一个名为 Customer 的控制器类和一个名为 Search 的操作函数,那么 URL 将自动构建为 http://xyz.com/Customer/Search。
//routes.MapRoute(
// "Default", // Route name
// "{controller}/{action}/{id}", // URL with parameters
// new { controller = "Home", action = "Index", id =
UrlParameter.Optional }); // Parameter defaults
下一个实验是什么?
在下一个实验中,我们将讨论如何验证 MVC URL。所有 MVC 的操作都通过 MVC URL 进行,甚至数据也是通过 MVC URL 馈送的。因此,在下一节中,我们将看到如何验证 MVC URL 中传递的数据。
实验 8:验证和设置 MVC URL 的默认值
MVC 完全是关于通过 URL 进行的操作,而这些操作的数据也由 URL 提供。如果我们能够验证通过这些 MVC URL 传递的数据,那将是很好的。
例如,让我们考虑 MVC URL https:///Customer/ViewCustomer。如果有人想查看客户代码为 1001 的客户详细信息,他需要输入 https:///Customer/ViewCustomer/1001。
客户代码是数值型的。换句话说,任何输入 https:///Customer/ViewCustomer/Shiv 这样的 MVC URL 都是无效的。MVC 框架提供了一种验证机制,通过它可以检查 URL 本身的数据是否合适。在本实验中,我们将了解如何验证输入到 MVC URL 的数据。
步骤 1:创建一个简单的客户模型
第一步是创建一个简单的客户类模型,该模型将被控制器调用。
public class Customer
{
public int Id { set; get; }
public string CustomerCode { set; get; }
public double Amount { set; get; }
}
步骤 2:创建控制器类
下一步是创建一个简单的控制器类,其中包含步骤 1 中创建的客户模型对象的集合。
public class CustomerController : Controller
{
List<Customer> Customers = new List<Customer>();
//
// GET: /Customer/
public CustomerController()
{
Customer obj1 = new Customer();
obj1.Id = 12;
obj1.CustomerCode = "1001";
obj1.Amount = 90.34;
Customers.Add(obj1);
obj1 = new Customer();
obj1.Id = 11;
obj1.CustomerCode = "1002";
obj1.Amount = 91;
Customers.Add(obj1);
}
[HttpGet]
public ViewResult DisplayCustomer(int id)
{
Customer objCustomer = Customers[id];
return View("DisplayCustomer",objCustomer);
}
}
控制器有一个简单的 DisplayCustomer
函数,该函数使用 id
值显示客户。此函数接受 id
值并在客户集合中进行查找。下面是该函数的简化代码。
[HttpGet]
public ViewResult DisplayCustomer(int id)
{
Customer objCustomer = Customers[id];
return View("DisplayCustomer",objCustomer);
}
如果您查看 DisplayCustomer
函数,它接受一个数值型的 id
值。我们想对这个 ID 字段应用验证,并具有以下约束:
- ID 必须始终是数值型。
- 它应该在 0 到 99 之间。
我们希望上述验证在调用 MVC URL 时触发。
步骤 3:使用正则表达式对 MVC 路由应用验证
步骤 2 中描述的验证可以通过在路由映射上应用正则表达式来实现。如果您转到 global.asax 文件并查看 maproute
函数,则该函数的输入是约束,如下面的图所示。
如果您是正则表达式的新手,我们建议您观看此正则表达式视频: http://youtu.be/C2zm0roE-Uc?hd=1。
因此,为了适应数值验证,我们需要在 maproute
函数中指定正则表达式约束,即 ‘\d{1,2}’,如下所示。正则表达式中的 ‘\d{1,2}’ 表示输入应该是数值型的,并且最大长度为 1 或 2,即 0 到 99 之间。
您可以通过指定 id=0 来指定默认值,如下面的代码片段所示。因此,如果有人不指定 ID 的值,它将默认取值为零。
routes.MapRoute(
"View", // Route name
"View/ViewCustomer/{id}", // URL with parameters
new { controller = "Customer", action = "DisplayCustomer",
id = 0 }, new { id = @"\d{1,2}" }); // Parameter defaults
步骤 4:测试是否正常工作
现在我们已经使用 maproute
函数完成了验证,是时候测试这些验证是否有效了。因此,在第一个测试中,我们指定了有效的 1,我们看到控制器被命中,数据被显示。
如果您尝试指定大于 100 的值,您会收到如下所示的错误。请注意,这个错误有点令人困惑,但它是对 maproute
函数上指定的正则表达式验证的效果。
如果您尝试指定非数值型值,您应该再次收到相同的错误,这证实了我们的正则表达式验证工作正常。
最重要的一点是,这些验证甚至在请求到达控制器函数之前就已经执行了。
下一个实验是什么?
任何网站开发中的关键事项之一是从一个页面导航到另一个页面。在 MVC 中,一切都是操作,这些操作会调用视图或页面。我们不能指定直接的超链接,如 www.questpond.com/home.aspx,这会违背 MVC 的宗旨。换句话说,我们需要指定操作,这些操作将调用 URL。
在下一个实验中,我们将研究如何在 MVC 视图中定义出站 URL,这将帮助我们从一个页面导航到另一个页面。
实验 9:理解 MVC 出站 URL
简介。
当我们谈论 Web 应用程序时,最终用户希望从一个页面导航到另一个页面。所以,作为一个普通的开发人员,您的第一个想法可能是像下图所示那样直接给出页面名称。
例如,如果您想从 home.aspx 浏览到 about.aspx,请在锚点中给出超链接页面名称,一切都会顺利。
这样做会违反 MVC 原则。MVC 原则规定,请求应该首先到达控制器,但通过指定 <a href="Home.aspx">
,第一个请求到达的是视图。这完全绕过了您的控制器逻辑,使您的 MVC 架构失效。
理想情况下,操作应该指示要调用哪个页面。因此,超链接应该在锚点标签中有操作,而不是页面名称,即直接的视图名称。
步骤 1:创建视图
让我们像下面的图所示创建三个视图:Home、About 和 Product。
让我们在这三个页面之间创建一个简单的导航,如下所示。从主页视图,我们希望导航到关于和产品视图。从关于和产品视图,我们希望导航回主页。
步骤 2:为视图创建控制器
下一步是定义将调用这些视图的控制器操作。在下面的代码片段中,我们定义了三个操作:GotoHome
(调用主页视图)、Aboutus
(调用关于视图)和 SeeProduct
(调用产品视图)。
public class SiteController : Controller
{
//
// GET: /Site/
public ActionResult GotoHome()
{
return View("Home");
}
public ActionResult AboutUs()
{
return View("About");
}
public ActionResult SeeProduct()
{
return View("Product");
}
}
步骤 3:在链接中提供操作
要调用操作而不是视图,我们需要在锚点标签中指定操作,如下面的代码片段所示。
This is products
<a href="GotoHome">Go Home</a><br />
<a href="Aboutus">About us</a><br />
如果您想使用 HTML 助手类创建锚点链接,可以使用 action link 函数,如下面的代码片段所示。
<%= Html.ActionLink("Home","Gotohome") %>
上面的代码是针对产品页面的,您可以对关于我们和主页进行相同的导航。
This is About us
<a href="GotoHome">Go Home</a><br />
<a href="SeeProduct">See Product</a><br />
This is home page
<br />
<a href="SeeProduct">See Product</a><br />
<a href="Aboutus">About us</a><br />
</div>
步骤 4:享受您的导航
一旦您在链接中指定了操作,您就可以在主页、关于和产品页面之间进行导航。
在导航时,您可以看到 URL 是如何指向操作而不是像 home.aspx、aboutus.aspx 等绝对页面名称的,这完全违反了 MVC 原则。
第三天有什么内容?
在第三次会议中,我们将讨论部分视图、使用数据注解的验证、Razor(MVC 3)、MVC Windows 身份验证、MVC 表单身份验证等等。下一个实验将比第二天更高级一些。以下是第三天的链接:点击此处查看 MVC 第三天循序渐进教程。
最后说明:您可以观看我关于 WCF、Silverlight、LINQ、WPF、设计模式、Entity Framework 等各种主题的 .NET 面试问答视频。
有关ASP.NET、设计模式、WCF、MVC、BI、WPF等各种主题的技术培训,请联系SukeshMarla@gmail.com或访问www.sukesh-marla.com
从 MVC 5 开始
如果您想从 MVC 5 开始,请从下面的视频“2 天学会 MVC 5”开始。
50个MVC面试题及答案
如果您要去面试,可以阅读我关于 50 个重要 MVC 面试问题的文章,其中包含答案:https://codeproject.org.cn/Articles/556995/Model-view-controller-MVC-Interview-questions-and
如需进一步阅读,请观看以下面试准备视频和分步视频系列。