7 天逐步学习 MVC (Model View Controller) – 第 1 天
4.85/5 (512投票s)
正如文章标题所言，学习MVC。所以日程安排很简单，我们将在7天内学习ASP.NET MVC。
目录
- 关于作者
- 那么，日程安排是什么？
- MVC 与 Webforms 与 ASP.NET 词汇
- 那么为什么选择MVC，它为什么比Webforms更好？
- MVC的先决条件
- 实验1：创建一个简单的Hello World ASP.NET MVC应用程序
- 实验2：在控制器和视图之间传递数据
- 实验3：使用MVC创建一个简单的模型
- 实验4：创建一个简单的MVC数据录入屏幕
- 实验5：使用HTML Helper更快地创建视图
- 第二天会讲什么？
- 关于MVC的进一步阅读
关于作者
简单介绍一下两位作者。Shivprasad Koirala和Sukesh Marla都是专业的MVC培训师，每周六和周日您都可以在孟买安德海（Andheri Mumbai）找到他们，他们每周都教授MVC。
那么，日程安排是什么？
正如文章标题所言，学习MVC；所以日程安排很简单，我们将在7天内学习ASP.NET MVC。
第一天我们将从一个简单的Hello World开始，包括在控制器和视图之间传递数据、HTML辅助类、MVC模型，我们还将创建一个简单的客户数据录入页面。
MVC 与 Webforms 与 ASP.NET 词汇
许多开发者认为ASP.NET与MVC是不同的。但实际上它们是相同的。
ASP.NET是微软的一个Web框架，MVC是用于使用MVC架构风格编写代码的Visual Studio代码模板。旧版ASP.NET的正确名称是“ASP.NET WebForms”。所以ASP.NET Webform是带有后台代码的旧版ASP.NET，而MVC是新事物。但它们都使用ASP.NET框架。
所以我们直说，ASP.NET是一个框架，而MVC和Webform是编码风格。MVC是新事物，WebForm是你的旧代码后台风格。
那么为什么选择MVC，它为什么比Webforms更好？
作为一名ASP.NET Webform开发者，在MVC中你将错过许多你喜爱的东西。在MVC中没有后台代码，没有rad服务器控件，没有ViewState，没有ASP.NET页面生命周期等等。所以在初期阶段，你真的很难相信MVC比Webforms更好。所以我建议你观看下面的30分钟视频，以理解为什么MVC比Webform更出色。
MVC的先决条件
在开始这一天之前，请确保您拥有创建MVC应用程序所需的所有“配料”。现在MVC有很多版本：MVC 2、MVC 3、MVC 4和MVC 5。所以根据您使用的版本，您需要相应的Visual Studio版本。
- 如果您正在使用MVC 5，您需要VS 2013，您可以从http://www.visualstudio.com/en-us/products/visual-studio-express-vs.aspx下载。
- 如果您正在使用MVC 3和4，您需要VS 2012。http://www.microsoft.com/en-us/download/details.aspx?id=34673
- 对于MVC 2，您需要VS 2010，2008也可以。
所以一旦你具备了所有先决条件，就可以开始第一个实验了。
实验1：创建一个简单的Hello World ASP.NET MVC应用程序
在本实验中，我们将使用MVC模板创建一个简单的Hello World程序。我们将创建一个简单的控制器，将控制器附加到一个简单的index.aspx页面，并在浏览器上查看显示。
您还可以观看下面的MVC 5视频，它展示了如何在MVC 5中显示一个简单的“HelloWorld”。
步骤1：- 选择项目模板
打开Visual Studio 2013，点击“文件”-->“新建项目”。展开“Visual C#”节点，点击“Web”，然后点击“ASP.NET 应用程序”模板，输入名称和文件夹路径，然后按“确定”。
步骤2：- 选择适当的ASP.NET One选项
MVC 5最大的发展之一是“一个ASP.NET”。如果您查看Visual Studio 2013之前，即VS 2012及更早版本，一旦您选择了MVC或Webforms等编码模板，您就无法更改。您不能在VS 2012中将它们混合使用。因此，如果您使用MVC编码风格启动一个项目，就不能使用Webforms；反之，如果您使用Webforms启动，就不能使用MVC。
如果您好奇想看看VS 2012的结构，可以通过点击IDE中显示的“Visual Studio 2012”菜单来查看。您可以看到我们有不同的模板，如MVC、WebApplication等。一旦您选择了MVC，您就会被它“绑定”，或者一旦您选择了Webforms，您也会被它“绑定”。
而且，从逻辑上讲，WebForm、MVC和WebAPI都在内部使用ASP.NET框架。因此，拥有不同的模板导致了开发人员之间的许多困惑。许多开发人员开始认为ASP.NET与MVC不同，请阅读这篇ASP.NET和MVC的困惑。
因此，在VS 2013中，他们将所有模板合并到一个ASP.NET模板中，即“ASP.NET Web 应用程序”，以避免混淆，并且无论您是Webform开发人员还是MVC开发人员，都能获得相同的体验。因此，如果您开始使用MVC，您仍然可以选择使用Webform ASPX视图创建视图。
因此，当您点击“ASP.NET Web 应用程序”时，您会看到所有模板都集中在一个伞形结构下，如下图所示。
请执行以下操作：-
步骤1：- 选择MVC模板，并勾选MVC复选框。如果选择MVC模板，此复选框很可能会被禁用。
步骤2：- 点击“更改身份验证”并将其设置为“无身份验证”。由于这是我们的第一个MVC项目，我们不想涉及身份验证和授权。在第3天，我们将更详细地讨论身份验证。
MVC的好处之一是“单元”测试。因为没有后台代码，控制器变成了简单的类，所以可以非常容易地对控制器进行单元测试。但目前我们将保持此选项未选中，因为我们的主要目的是显示“Hello World”。
让我们花点时间来理解所创建的解决方案。您会注意到的第一件事是创建了许多文件夹，请看下图。
这些文件夹中最重要的是“View”、“Model”和“Controllers”文件夹。MVC架构分为模型、视图和控制器三个部分。
所以第一个请求会到达控制器，它会创建模型和视图的对象，并将最终响应发送给最终用户。
| 文件夹名称 | 描述 |
| 视图 | 在此文件夹中，您将添加MVC视图，可以是HTML、Razor或Webform页面。 |
| 模型 | 在此文件夹中，您将添加模型类。模型是简单的.NET类，它们提供数据，并且可能还包含验证。因此，在此文件夹中，您将添加Customer类、Supplier类等。 |
| 控制器 (Controller) | 在此文件夹中，您将添加控制器，控制器可以有动作。此组件负责接收最终用户的请求，调用相应的动作，创建模型对象，然后将视图和模型绑定在一起，以响应的形式发送结果。 |
| 其他文件夹 | |
| 脚本 | 在这里添加您的javascript文件。默认情况下，您会找到Jquery和Angular javascript文件，因为它们由Visual Studio本身包含。 |
| App_Start | 在MVC应用程序上线之前，它需要激活和初始化许多对象。例如，路由、捆绑和缩小组件等。目前您无需担心此文件夹，我们稍后将讨论每个对象。例如，路由在MVC第2天解释，捆绑在第5天解释，依此类推。所以请放松，目前不要考虑这个文件夹。 |
| Content | 此文件夹包含CSS（层叠样式表），它为您的项目提供统一的外观和感觉。 |
| App_Data | App_Data用于基于文件的数据存储。通常开发者使用RDBMS，如SQL Server、Oracle等，但有时人们也会使用XML、txt文件来存储数据。所以当您将数据存储在文件中时，会创建此文件夹。 |
| 字体 | 如果您的Web应用程序中使用了字体，您可以将它们放在这里。 |
步骤3：- 添加控制器
下一步是添加控制器。进入控制器文件夹，右键点击并选择控制器菜单，如下图所示。
接下来的屏幕是选择“支架”模板。支架（Scaffolding）是一种技术，MVC模板通过它帮助自动生成CRUD代码。CRUD代表创建（Create）、读取（Read）、更新（Update）和删除（Delete）。
但是目前我们正在学习MVC，所以选择Scaffolding或现成的代码不是一个好的选择。因此，请选择“MVC 5 空控制器”选项，如下图所示。
给控制器起一个名字，比如“FirstMVCController”。但是不要删除“Controller”这个词。“Controller”结尾是一种必要的约定。所以不要删除这个词。
控制器类创建后，如下图所示。向其中添加一个动作“SayHello”，如下图所示。一个控制器可以有多个动作。所以“Home”控制器可以有“GotoHome”、“GotoIndex”等动作。
public class FirstMVCController : Controller
{
//
// GET: /FirstMVC/
public ActionResult SayHello()
{
return View();
}
}
步骤4：- 添加视图
所以我们已经创建了控制器和动作。但是当最终用户请求控制器和动作时，我们需要调用一个视图。为了保持这个“Hello World”MVC示例的简单性，我们暂时不讨论模型。
现在，在您的文件夹部分，您应该看到一个以控制器名称命名的文件夹，即“FirstMVC”，如下图所示。
右键点击“FirstMVC”文件夹并添加一个视图。
给一个好听的名字，现在不要选择任何模板，因为我们想保持简单，所以选择“空（不带模型）”。
视图是一个简单的Razor HTML页面。在主体中，只需输入一些内容，就像我们在下面的代码中做的那样。
<body>
</body>
步骤5：- 将视图连接到控制器
视图已创建，控制器也已创建。是时候将视图与控制器连接起来了。所以在“SayHello”动作中，在视图里输入您的视图名称，如下面的代码所示。
public ActionResult SayHello()
{
return View("HelloView");
}
步骤6：- 运行程序
一切就绪后，是时候享受您的第一个程序的输出了。按下Control键 + F5，并在localhost端口后输入以下URL。URL的输入方式如下：-
本地主机:端口号/控制器名称/动作名称
请注意，控制器名称应不带“controller”一词，如下图所示。
现在放松30秒，享受你的第一个程序。恭喜你走到这里。
警惕这个常见错误
如果您收到以下常见错误，请不要惊慌，您需要检查更多内容。
所以首先让我们尝试理解错误信息。错误说视图，即“HelloView”视图，应该放在共享文件夹中或控制器名称文件夹中。例如，在我们的例子中，控制器名称是“FirstMVC”，所以您要么将视图移动到“FirstMVC”文件夹，要么将其移动到“shared”文件夹，如下图所示。
那么下一个实验是什么？
既然我们已经创建了一个简单的MVC Hello World，现在是时候看看如何将数据从控制器传递到视图了。第一个请求到达控制器，控制器将加载您的业务对象或模型，您希望将这些对象传输到视图以进行显示。
实验2：在控制器和视图之间传递数据
控制器首先接收请求并加载模型。大多数时候，我们希望将模型传递给视图以进行显示。作为ASP.NET开发人员，您的选择可能是使用会话变量、视图状态或某些其他ASP.NET会话管理对象。
使用ASP.NET会话或视图状态对象的问题在于其范围。ASP.NET会话对象具有会话范围，而视图状态具有页面范围。对于MVC，我们希望将范围限制在控制器和视图。换句话说，我们希望在请求到达控制器并到达视图时维护数据，之后数据的范围应该过期。
这正是ASP.NET MVC框架中引入新会话管理技术——ViewData的地方。
实验2的视频演示
下面是一个简单的YouTube视频，演示了视图数据的实验。在这个视频中，我们将看到如何使用视图数据在控制器和视图之间共享数据。所以我们将创建一个简单的控制器，将当前数据记录到一个视图数据变量中，然后使用百分比标签在视图中显示相同的数据：http://youtu.be/Fu9v2MIDlTA?hd=1。
步骤1：创建项目并设置视图数据
所以第一步是创建一个项目和一个控制器。在控制器中，按照下面的代码片段所示设置viewdata变量并启动视图。
public class DisplayTimeController : Controller
{
//
// GET: /DisplayTime/
public ActionResult Index()
{
ViewData["CurrentTime"] = DateTime.Now.ToString();
return View();
}
}
步骤2：在视图中显示视图数据。
接下来是在视图中使用百分比标签显示数据。需要注意的一个重要点是，视图没有代码后台。因此，为了显示视图，我们需要在ASPX页面中使用<%:标签，如下面的代码片段所示。
<body>
<div>
<%: ViewData["CurrentTime"] %>
</div>
</body>
那么下一个实验是什么？
既然我们已经知道如何使用视图数据传递数据，那么下一个实验就是创建一个简单的模型，并查看所有三个MVC实体（即模型、视图和控制器）的实际运行。
实验3：使用MVC创建一个简单的模型
在这个实验中，我们将创建一个简单的客户模型，为其填充一些数据，并在视图中显示它。
实验3的视频演示
下面是一个视频演示：http://youtu.be/0-UdqWy9lVc?hd=1。
步骤1：创建一个简单的类文件
第一步是创建一个简单的客户模型，它只是一个包含三个属性（代码、名称和金额）的类。创建一个简单的MVC项目，右键单击模型文件夹，然后单击“添加新项”，如下图所示。
从模板中选择一个简单类并将其命名为Customer。
使用三个属性创建类，如下面的代码片段所示。
public class Customer
{
private string _Code;
private int _Id;
private double _Amount;
public string CustomerCode
{
set
{
_Code = value;
}
get
{
return _Code;
}
}
public int Id
{
get
{
return _Id;
}
set
{
_Id= value;
}
}
public double Amount
{
set
{
_Amount = value;
}
get
{
return _Amount;
}
}
}
步骤2：定义带有动作的控制器
下一步是添加控制器并创建一个简单的动作来显示客户，如下面的代码片段所示。在控制器类中导入模型命名空间。在动作中，我们创建客户类的对象，填充一些数据，并将其传递给名为“DisplayCustomer”的视图。
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);
}
}
步骤3：使用类创建强类型视图
我们现在需要通过创建视图来连接MVC的各个点。所以右键单击视图文件夹并点击“添加视图”。您应该会看到一个下拉菜单，如下图所示。输入视图名称，勾选“创建强类型视图”，然后使用下拉菜单将此视图绑定到客户类，如下图所示。
注意：如果您在下拉列表中看不到模型，请先编译您的项目。
创建强类型视图的优点是，您现在可以通过输入模型和“.”在视图中获取类的属性，如下图所示。
以下是显示客户属性值的视图代码。我们还设置了一个if条件，如果金额高于100，则显示为特权客户，如果低于100，则显示为普通客户。
<body>
<div>
The customer id is <%= Model.Id %> <br />
The customer Code is <%= Model.CustomerCode %> <br />
<% if (Model.Amount > 100) {%>
This is a priveleged customer
<% } else{ %>
This is a normal customer
<%} %>
</div>
</body>
步骤4：运行您的应用程序
现在是“D”环节，按下Ctrl + F5，并为又一个实验成功而庆祝。
那么下一个实验是什么？
在这个示例中，我们从控制器内部填充了客户对象。在下一个实验中，我们将从输入视图中获取数据并显示它。换句话说，我们将看到如何创建数据录入屏幕以接受视图中的数据。
实验4：创建一个简单的MVC数据录入屏幕
每个项目，无论大小，都需要数据录入屏幕。在这个实验中，我们将使用MVC模板创建一个简单的客户数据录入屏幕，如下图所示。
一旦最终用户输入详细信息并提交数据，它将重定向到如下图所示的屏幕。如果输入的金额小于100，则显示普通客户，否则显示特权客户。
实验4的视频演示
这是本实验的一个简单视频演示：http://youtu.be/1dlxtHuRw34?hd=1。
步骤1：创建数据录入ASPX页面
第一步是使用简单的HTML表单动作标签创建数据录入页面，如下面的代码片段所示。下面的代码片段中最重要的注意事项是动作指向控制器动作，即“DisplayCustomer”。
<form action="DisplayCustomer" method="post">
Enter customer id :- <input type="text" name="Id" /> <br />
Enter customer code :- <input type="text" name="CustomerCode" /><br />
Enter customer Amount :-<input type="text" name="Amount" /><br />
<input type="submit" value="Submit customer data" />
</form>
步骤2：创建控制器
上面定义的表单动作将提交到控制器类和函数“DisplayCustomer”。因此，我们需要从HTML控件中获取数据，填充对象，并将对象发送到视图。
以下是DisplayCustomer的代码片段，它通过从Request.Form收集数据来填充客户对象，并将该对象发送到视图DisplayCustomer。
public class CustomerController : Controller
{
…..
….
[HttpPost]
public ViewResult DisplayCustomer()
{
Customer objCustomer = new Customer();
objCustomer.Id = Convert.ToInt16(Request.Form["Id"].ToString());
objCustomer.CustomerCode = Request.Form["Id"].ToString();
objCustomer.Amount = Convert.ToDouble(Request.Form["Amount"].ToString()); ;
return View("DisplayCustomer", objCustomer);
}
}
步骤3：创建视图以显示客户对象
下一步是创建“DisplayCustomer”视图。所以右键点击视图文件夹并点击“添加视图”。您应该会看到一个下拉菜单，如下图所示。输入视图名称，勾选“创建强类型视图”，然后使用下拉菜单将此视图绑定到客户类，如下图所示。
创建强类型视图的优点是，您现在可以通过输入模型和“.”在视图中获取类的属性，如下图所示。
以下是显示客户属性值的视图代码。我们还设置了一个if条件，如果金额高于100，则显示为特权客户，如果低于100，则显示为普通客户。
<body>
<div>
The customer id is <%= Model.Id %> <br />
The customer Code is <%= Model.CustomerCode %> <br />
<% if (Model.Amount > 100) {%>
This is a priveleged customer
<% } else{ %>
This is a normal customer
<%} %>
</div>
</body>
步骤4：最终运行项目
最后一步是运行项目并查看输出。
您还应该能够测试高于100和低于100的情况。
那么下一个实验是什么？
在这个实验中，我们创建了一个简单的数据录入屏幕，帮助我们填充客户对象。然后将此客户对象传递给视图以进行显示。如果您仔细观察当前的实验，我们编写了大量的代码，即创建HTML屏幕、填充对象等。如果有某种自动化功能会很棒。在下一个实验中，我们将看到HTML辅助类如何帮助最小化许多此类手动编码，从而提高生产力。
实验5：使用HTMLHelper更快地创建视图
在之前的实验中，我们创建了一个简单的客户数据录入屏幕。我们成功完成了实验，但存在两个大问题：
<form action="DisplayCustomer" method="post">
Enter customer id :- <input type="text" name="Id" /> <br />
Enter customer code :- <input type="text" name="CustomerCode" /><br />
Enter customer Amount :-<input type="text" name="Amount" /><br />
<input type="submit" value="Submit customer data" />
</form>
public class CustomerController : Controller
{
…..
….
[HttpPost]
public ViewResult DisplayCustomer()
{
Customer objCustomer = new Customer();
objCustomer.Id = Convert.ToInt16(Request.Form["Id"].ToString());
objCustomer.CustomerCode = Request.Form["Id"].ToString();
objCustomer.Amount = Convert.ToDouble(Request.Form["Amount"].ToString()); ;
return View("DisplayCustomer", objCustomer);
}
}
- 完整的HTML代码是手动编写的。换句话说，效率较低。这就像回到了开发者在记事本中编写HTML标签的黑暗时代。
- 除此之外，控制器中还编写了大量手动代码来填充对象并将数据发送到MVC视图。
在本实验中，我们将探讨如何使用MVC HTMLHelper类来最大程度地减少手动编码并提高生产力。
步骤1：创建Customer类
创建一个简单的客户类，详情请参阅实验5。
步骤2：使用辅助类创建HTML输入表单
HTML辅助类拥有现成的函数，通过它们您可以轻松创建HTML控件。进入任何MVC视图并查看HTMLHelper类的智能感知，您应该会看到如下图所示的内容。
通过使用HTMLHelper类，您只需调用相应的函数即可创建任何HTML控件，如TextBox、Label、ListBox等。
为了创建HTML的form标签，我们需要使用“Html.BeginForm”。下面是它的代码片段。
<% using (Html.BeginForm("DisplayCustomer","Customer",FormMethod.Post))
{%>
-- HTML input fields will go here
<%} %>
上述代码将生成以下HTML
<form action="DisplayCustomer" method="post">
…..
…..
</form>
HTML辅助器“beginform”接受三个输入参数：动作名称（控制器内部的方法）、控制器名称（实际控制器名称）和HTTP提交方法（POST或GET）。
如果要创建文本框，只需使用HTMLHelper类的“TextBox”函数，如下面的代码所示。这样您就可以使用HTMLHelper类函数创建HTML控件。
Enter customer id :- <%= Html.TextBox("Id",Model)%> <br />
上述代码片段将生成以下HTML代码
Enter customer id :- <input type="text" name="Id" /> <br />
要创建如下图所示的数据录入屏幕，我们需要使用以下代码片段。
<% using (Html.BeginForm("DisplayCustomer","Customer",FormMethod.Post))
{ %>
Enter customer id :- <%= Html.TextBox("Id",Model)%> <br />
Enter customer code :- <%= Html.TextBox("CustomerCode",Model) %><br />
Enter customer Amount :- <%= Html.TextBox("Amount",Model) %><br />
<input type="submit" value="Submit customer data" />
<%} %>
步骤3：使用客户类创建强类型视图
所以一旦您使用HTMLHelper类创建了视图，是时候将客户类与视图关联起来了；详情请参阅实验5。
步骤4：创建控制器类
最后是控制器代码。现在控制器代码变得非常简单。由于我们使用了HTML Helper类，客户对象将自动填充。您将像在实验4中那样创建控制器类，但我们不需要编写任何代码来连接HTML屏幕和控制器，它都被隐藏和自动化了。
[HttpPost]
public ActionResult DisplayCustomer(Customer obj)
{
return View(obj);
}
请享受针对不同客户输入金额条件下的输出。
所以，为完成MVC实验的第一天干杯！
第二天会讲什么？
在第二次会话中，我们将讨论URL路由、MVC单元测试的简易性、MVC控制器属性等等。与第一天相比，下一个实验会稍微高级一些。以下是第二天的链接：点击这里进入第二天MVC逐步学习。
关于MVC的进一步阅读
以下是您可以探索的更多MVC学习链接
- 您可以从这个精彩的40分钟YouTube视频http://www.youtube.com/watch?v=Lp7nSImO5vk开始，它直接带您了解如何在MVC中创建一个简单的Hello World。我觉得这是学习MVC的最佳方式。
- 许多初次接触MVC的人对MVC与Webforms的区别感到困惑，建议您阅读Sukesh的MVC文章：https://codeproject.org.cn/Articles/528117/WebForms-vs-MVC
- 如果您有一些紧急的MVC面试，这里有100个带答案的MVC面试问题https://codeproject.org.cn/Articles/556995/MVC-interview-questions-with-answers
从 MVC 5 开始
如果您想从 MVC 5 开始，请从下面的视频“2 天学会 MVC 5”开始。
如需进一步阅读，请观看以下面试准备视频和分步视频系列。