7 天逐步学习 MVC (Model view controller) – 第 6 天
4.93/5 (60投票s)
本文是“7天学会MVC”系列教程的第6天。
MVC 2 已经比较老了，这篇文章写于很多年前。我们建议您从我们最新的“7天学会MVC 5”系列开始阅读： -https://codeproject.org.cn/Articles/866143/Learn-MVC-step-by-step-in-days-Day
Content
第五天：- 打包、最小化、ViewModel、异常处理和区域
步骤2：- 创建一个 MVC 网站以使用 OAuth 进行身份验证
步骤1：- 创建“EnterCustomer.aspx”和控制器
那么，MVC 第6天的议程是什么？
第6天，我们有五个很棒的实验：-
- 使用“DisplayMode”功能实现移动支持。
- 使用“OAuth”集成您的应用程序，使其能够使用 Facebook、Twitter 或任何其他第三方网站。
- 使用模型绑定器将 UI 和模型类进行绑定，即使属性名称不同。
- Razor 布局。
- 创建您自己的自定义视图引擎。
如果您错过了 Asp.net MVC 教程的前几天，以下是涵盖主题的链接。
第一天：-控制器、强类型视图和助手类
https://codeproject.org.cn/Articles/207797/Learn-MVC-Model-view-controller-Step-by-Step-in-7
第二天：-单元测试、路由和出站 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-7
第四天：- JSON、Jquery、状态管理和异步控制器
https://codeproject.org.cn/Articles/375182/Learn-MVC-Model-View-Controller-Step-by-Step-in-7
第五天：- 打包、最小化、ViewModel、异常处理和区域
https://codeproject.org.cn/Articles/724559/Learn-MVC-Model-view-controller-Step-by-Step-in-7
实验22：- 显示模式（MVCMobile）
引言
这是一个小设备的时代，即移动设备。作为一名 MVC 开发人员，我们期望来自
Microsoft MVC 模板的大力支持。现在，桌面屏幕和移动屏幕在尺寸上存在巨大差异。
所以我们希望为桌面创建不同的屏幕，为移动设备创建不同的屏幕。例如，我们将为普通桌面创建“Home.aspx”，为移动设备创建“Home.mobile.aspx”。如果 MVC 能够自动检测设备类型并渲染相应的页面，这将节省大量工作。这是通过使用“MVC Display Mode”实现的。
当任何 HTTP 请求到达 Web 应用程序时，该 HTTP 请求会包含一个名为“User Agent”的值。MVC 显示模式使用此“User Agent”值，并根据设备选择并渲染相应的视图。那么，让我们进行一个演示，亲眼看看它。
步骤1：- 创建合适的页面
因此，让我们创建一个示例 MVC 项目，该项目具有两个视图：“Index.aspx”（用于桌面）和“Index.Mobile.aspx”（用于移动），如下图所示。
此外，让我们添加一个名为“Home”的控制器，该控制器将调用“Index”视图。
注意：-您可以在下面的代码片段中看到我们创建了一个名为 index 的 action result。因为我们的视图名称和操作名称相同，所以我们不需要在“return View();”中传递视图名称。
publicclassHomeController : Controller
{
publicActionResult Index()
{
return View();
}
}
步骤2：- 就这样，让我们来测试一下。
这就是我们所需要做的。现在，让我们去测试 MVC 显示模式是否兑现了它的承诺。
所以，如果您通过浏览器访问控制器和操作，您将看到左侧的输出。如果您使用 Android 移动模拟器访问相同的控制器和操作，您将看到屏幕的右侧部分。
在本实验中，我们使用“Opera mobile”模拟器来模拟移动测试。您可以从 http://dev.opera.com/articles/opera-mobile-emulator/ 下载模拟器。
步骤3：- 更多自定义和控制
但是，如果我们想要更多的自定义和控制呢？
- 如果桌面显示“Index.aspx”。
- 如果移动显示“Index.mobile.aspx”。
- 如果 Android 移动显示“Index.Andriod.aspx”。
我们已经实现了前两个条件。现在，为了第三个条件，我们需要执行一些额外的步骤。请放心，它们非常小，就像婴儿的步伐，但会带来巨大的最终结果。
第一步是在视图文件夹中添加一个名为“Index.android.aspx”的页面，专门用于 Android，如下图所示。
下一步是对“Global.asax.cs”文件进行一些更改。第一步是添加“Webpages”命名空间，如下图所示。
下一步是对“Global.asax.cs”文件进行一些更改。第一步是添加“Webpages”命名空间，如下图所示。
using System.Web.WebPages;
第二步是使用“DisplayModeProvider”类，并将一个“Android”条目添加到“Modes”集合中，如下面的代码片段所示。下面的代码搜索字符串“Android”，如果找到，它会尝试渲染“Index.Android.aspx”页面。
protectedvoid Application_Start()
{
DisplayModeProvider.Instance.Modes.
Insert(0, newDefaultDisplayMode("Android")
{
ContextCondition = (context => context.
GetOverriddenUserAgent().IndexOf("Android",
StringComparison.OrdinalIgnoreCase) >= 0)
});
}
步骤4：- 测试您的移动自定义
现在，如果您使用 Android 作为用户代理运行 Opera mobile 模拟器，如下图所示，您将看到 Android 页面（Index.android.aspx）被渲染。
实验23：- MVC OAuth 提供程序
对于最终用户来说，最令人厌烦的过程之一是在网站上注册。有时，那些冗长的表格和电子邮件验证会让用户望而却步。那么，如何通过使用他们现有的 Facebook/Twitter/LinkedIn/等帐户来验证用户，从而简化操作呢？这样，用户就可以使用他们已有的东西，而网站可以确保用户是真正的用户。
这是通过使用 MVC OAuth（开放授权标准）实现的。
实现 OAuth 是一个三步过程，请参阅上图：-
- 注册您的应用程序并获取 ID 和密钥。
- 与第三方网站进行身份验证。
- 身份验证完成后，浏览您的网站。
步骤1：- 注册您的应用程序并获取 ID 和密钥
因此，第一步是使用第三方网站注册您的应用程序。对于此实验，我们将使用 Facebook 进行开放身份验证。请注意，Twitter、LinkedIn 和其他网站的步骤将有所不同。转到 developers.facebook.com，然后点击“创建新应用”菜单，如下图所示。
填写“应用名称”、“类别”，然后点击“创建应用”按钮，如下图所示。
应用程序注册后，您需要通过点击显示按钮来获取“应用 ID”和“应用密钥”，如下图所示。
步骤2：创建 MVC 网站以使用 OAuth 进行身份验证
现在我们有了 ID 和密钥，让我们继续创建一个 MVC Internet 应用程序。我们创建一个 Internet 应用程序，这样我们就能获得一些现成的代码，或者说模板代码，用于“OAuth”。
创建项目后，打开“App_start”文件夹中的“AuthoConfig.cs”文件。
在此配置文件中，您会找到“RegisterAuth”方法，您会看到许多用于第三方网站的方法调用。取消注释“RegisterFacebookClient”方法，并按如下代码所示输入 ID 和密钥。
publicstaticclassAuthConfig
{
publicstaticvoidRegisterAuth()
{
// To let users of this site log in using their accounts from other sites such as Microsoft, Facebook, and Twitter,
// you must update this site. For more information visit http://go.microsoft.com/fwlink/?LinkID=252166
//OAuthWebSecurity.RegisterMicrosoftClient(
// clientId: "",
// clientSecret: "");
//OAuthWebSecurity.RegisterTwitterClient(
// consumerKey: "",
// consumerSecret: "");
OAuthWebSecurity.RegisterFacebookClient(
appId: "753839804675146",
appSecret: "fl776854469e7af9a959359a894a7f1");
//OAuthWebSecurity.RegisterGoogleClient();
}
}
运行您的应用程序，并复制带有端口号的本地主机 URL 名称。
返回您的 Facebook 开发人员门户，打开您刚刚创建的应用程序，点击设置，然后点击“添加平台”，如下图所示。
它会打开另一个对话框，选择网站，然后点击添加。
在 URL 中，输入带有端口号的本地主机 URL，如下图所示。
步骤3：开始浏览
这样，您就全部准备好了。现在运行应用程序并单击登录。
屏幕打开，显示两个选项：左侧是使用“表单”身份验证的本地登录，右侧是第三方提供的登录。单击 Facebook 按钮，输入您的凭据，然后享受结果。
实验24：- MVC 模型绑定器
引言
在 Learn MVC Day 1 Lab 5 中，我们使用了 HTML 助手类来将 HTML UI 与 MVC 模型对象进行映射。下面是一个简单的 HTML 表单，它向“SubmitCustomer”操作发出 POST 请求。
<formid="frm1" method=post action=”/Customer/SubmitCustomer”>
Customer code :- <inputname="CustomerCode"type="text"/>
Customer name :- <inputname="CustomerName"type="text"/>
<input type=submit/>
</form>
“SubmitCustomer”操作接受一个客户对象。该“Customer”对象是自动生成的，数据填充在那些文本框中，没有任何绑定和映射。
publicclassCustomerController : Controller
{
publicActionResult SubmitCustomer(Customer obj)
{return View(“DisplayCustomer”);}
}
您知道为什么客户对象会自动填充吗？这是因为文本框的名称和客户类的属性名称相同。
publicclassCustomer
{
publicstring CustomerCode { get; set; }
publicstring CustomerName { get; set; }
}
但是，如果文本框的名称与“Customer”类的属性名称不同呢？
换句话说，HTML 文本框的名称是“txtCustomerCode”，而类属性的名称是“CustomerCode”。这就是模型绑定器发挥作用的地方。
模型绑定器将 HTML 表单元素映射到模型。它充当 HTML UI 和 MVC 模型之间的桥梁。那么，让我们对“ModelBinder”进行一些实际操作练习。
步骤1：- 创建“EnterCustomer.aspx”和控制器
第一步是创建“EnterCustomer.aspx”视图，该视图将接收“Customer”数据。
<formid="frm1" method=post action=”/Customer/SubmitCustomer”>
Customer code :- <inputname="TxtCode"type="text"/>
Customer name :- <input name="TxtName"type="text"/>
<input type=submit/>
</form>
要调用此表单，我们需要在“Customer”控制器中有一个操作，因为在 MVC 中您不能直接调用视图，您必须通过控制器。
publicclassCustomerController : Controller
{
publicActionResult EnterCustomer()
{
return View();
}
}
步骤2：- 创建 Customer 模型
下一步是创建一个“Customer”模型。请注意，“Customer”类的属性名称和 HTML UI 元素文本框名称是不同的。
publicclassCustomer
{
publicstring CustomerCode { get; set; }
publicstring CustomerName { get; set; }
}
步骤3：- 创建进行映射的绑定器。
现在，因为 UI 元素名称和“Customer”类具有不同的名称，我们需要创建“Model”绑定器。要创建模型绑定器类，我们需要实现“IModelBinder”接口。在下面的代码中，您可以看到我们如何在“BindModel”方法中编写了映射代码。
publicclassCustomerBinder : IModelBinder
{
publicobject BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
{
HttpRequestBase request = controllerContext.HttpContext.Request;
string strCustomerCode = request.Form["TxtCode"];
string strCustomerName = request.Form["TxtName"];
returnnewCustomer
{
CustomerCode = strCustomerCode,
CustomerName = strCustomerName
};
}
}
步骤4：- 将映射器附加到操作
现在我们有了绑定器，有了 HTML UI，是时候将它们连接起来了。查看下面的“SubmitCustomer”操作代码。“ModelBinder”属性将绑定器与“Customer”对象绑定在一起。
publicclassCustomerController : Controller
{
publicActionResult SubmitCustomer([ModelBinder(typeof(CustomerBinder))]Customer obj)
{
return View(“DisplayCustomer”);
}
}
步骤5：- 享受您的成果
现在，请访问调用客户数据输入屏幕的操作（“EnterCustomer”）。
当您填写数据并单击提交时，您将看到下方填充的“Customer”对象。
实验25：- Razor 布局
引言
布局就像 ASP.NET Web Form 中的母版页。母版页为 Web Form 视图（ASPX）提供标准的观感，而布局则为 Razor 视图（CSHTML）提供标准的观感。如果您不熟悉 Razor，请参阅 Lab 12 MVC Razor 视图。
在这个实验中，我们将看到如何实现 Razor 布局。
步骤1：- 创建布局页面
第一件事是我们需要创建一个布局页面。所以创建一个新的 MVC Web 应用程序，转到视图文件夹，右键单击，添加新项，然后选择 MVC 布局页面模板，如下图所示。
在 MVC 布局页面中，我们需要定义将应用于所有 Razor 页面的通用结构。您可以在下面的布局页面中看到我们有三个部分：头部、正文和页脚。头部和页脚是自定义部分，而“RenderBody”是 MVC 提供的内容，用于显示正文内容。
<div>
@RenderSection("Header")
@RenderBody()
@RenderSection("Footer")
</div>
步骤2：- 创建视图并应用布局
现在我们已经创建了布局，接下来要做的是将该布局应用于视图。所以右键单击视图的共享文件夹，然后选择 Razor 视图。
要应用布局页面，请选择“…”浏览选项，如下图所示，然后选择布局页面，如下图所示。
创建视图后，第一行代码会指出页面正在使用哪个布局。它看起来像下面的代码。
@{Layout = "~/Views/Default1/_LayoutPage1.cshtml";}
所以现在视图中的最后一件事情是填充所有部分。页脚和头部部分是自定义部分，因此我们需要使用 @section 命令后跟部分名称以及我们想要放入这些部分的内容。所有其他文本将成为正文的一部分（@RenderBody()）。
This is body
@section Footer{Copyright 2015-2016}
@section Header{Welcome to my site}
简单来说，布局和 Razor 视图代码之间的映射如下所示。
步骤3：- 创建一个控制器，查看您的布局效果
现在我们一切就绪，是时候创建一个控制器和操作来调用视图了。您应该会看到类似下面的内容。您可以看到布局模板是如何应用于视图的。
实验26：- 自定义 HTML 助手方法
引言
在第一天，我们谈到了 MVC 助手类。它帮助我们更有效地处理输入控件。当您在 MVC Razor 视图中键入“@Html.”时，您会在智能感知中看到类似的内容。
HTML 助手方法使我们能够轻松快速地创建文本框、单选按钮、复选框、文本区域等 HTML 输入控件。在此实验中，我们将更进一步，创建“自定义”助手方法。
要创建自定义 HTML 助手方法，我们需要使用扩展方法。扩展方法概念在 .NET 3.5 中引入。
如果您不熟悉扩展方法，请观看 www.questpond.com 提供的以下 YouTube 视频。
http://www.youtube.com/watch?v=Iu7OrL6vCOw
步骤1：- 创建一个带有简单类文件的 MVC 项目
创建一个名为 CustomHtmlHelperDemo 的简单 MVC 项目。添加一个名为 HelperSample 的控制器和一个名为 Index 的操作。在 MVC 项目中创建一个新文件夹，并将其命名为 ExtensionClasses。
步骤2：将类标记为静态并添加方法
对于扩展方法，我们需要将类标记为静态。
public static class HelperExtension
{
}
在这个类中，让我们创建一个名为“HelloWorldLabel”的新静态方法，它将返回 **MvcHtmlString** 类型的值，并接受一个 **HtmlHelper** 类型的参数。
**注意**：在声明第一个参数之前，请务必添加“this”关键字，因为我们的目标是为 HtmlHelper 类创建扩展方法。
publicstaticMvcHtmlStringHelloWorldLabel(this HtmlHelper helper)
{
}
步骤3：使用助手类。
最后一步是导入“System.Web.Mvc.Html”命名空间。我们需要导入此命名空间，因为默认的 TextBoxFor、TextAreaFor 和其他 HTML 助手扩展方法都位于此命名空间中。仅当我们要使用其中一个扩展方法时，才需要它。
returnhelper.Label("Hello World");
只需在视图中编写以下代码并构建，您可能会遇到如下所示的错误。
要解决上述错误，只需在视图顶部添加 using 语句，如下所示。
@using CustomHtmlHelperDemo.ExtensionClasses
构建应用程序，按 F5 并测试应用程序。
最后一天有什么内容？
我的最后一天将主要关注如何将 JavaScript 框架（Angular、KO）与 MVC 集成。
最后说明，您可以在 www.questpond.com 上观看我关于 WCF、Silverlight、LINQ、WPF、设计模式、Entity Framework 等各个方面的 C# 和 MVC 培训视频。无论如何，请不要错过我由 www.questpond.com 出版的 .NET 和 C# 面试题及答案一书。
您是MVC新手吗？
如果您是完全的新手，我建议从以下 4 个大约 10 分钟的视频开始，这样您可以快速进入 MVC。
实验1：- 一个简单的“Hello world”ASP.NET MVC 应用程序。
实验2：- 在这个实验中，我们将看到如何使用 ViewData 在控制器和视图之间共享数据。
实验3：- 在这个实验中，我们将创建一个简单的客户模型，用一些数据填充它，并在视图中显示它。
实验4：- 在这个实验中，我们将创建一个简单的客户数据输入屏幕，并在视图上进行一些验证。
从 MVC 5 开始
如果您想从 MVC 5 开始，请从下面的视频“2 天学会 MVC 5”开始。
不要错过 MVC 面试题及答案
在这个为期7天的系列教程的每个实验中，我还会更新一个单独的文章，讨论在面试中提出的重要 MVC 面试问题。到目前为止，我收集了60个重要问题及准确答案，您可以从中查看：https://codeproject.org.cn/Articles/556995/Model-view-controller-MVC-Interview-questions-and
如需进一步阅读，请观看以下面试准备视频和分步视频系列。