Razor MVC3 MVC 中级开发 .NET ASP.NET C#

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

Shivprasad koirala

4.91/5 (120投票s)

2012年4月28日

CPOL

19分钟阅读

513492

本文是“7天速成MVC”系列文章的第3部分，是其续篇。

MVC 2已经过时很久了，本文写于多年前。我们建议您从我们最新的“7天速成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、模型绑定器、布局和自定义视图引擎
实验10：部分视图
- 步骤1：创建一个简单的视图
- 步骤2：创建一个简单的部分视图
- 步骤3：在部分视图中添加内容
- 步骤4：在主视图中调用部分视图
- 步骤5：运行程序并查看效果
实验11：使用数据注释进行验证
- 步骤1：用数据注释装饰模型
- 步骤2：更改ASPX代码
- 步骤3：启用客户端验证
- 步骤4：编写控制器逻辑
- 步骤5：运行应用程序以查看效果
- 其他数据注释属性总结
实验12：MVC 3：Razor
- 步骤1：安装MVC 3并使用它创建一个项目
- 步骤2：选择Razor
- 步骤3：添加一个视图并从控制器调用它
- 步骤4：练习Razor语法
练习1：单行代码
练习2：多行代码
练习3：Foreach循环和IF条件
练习4：不用担心@符号
练习5：显示@符号
练习6：Razor中的HTML显示
实验13：MVC安全性（Windows身份验证）
- 步骤1：启用Windows身份验证
- 步骤2：一些小缺陷
- 步骤3：在控制器/操作上应用Authorize标签
- 步骤4：创建安装包
- 步骤5：创建IIS应用程序
- 步骤6：发布
- 步骤7：运行控制器和操作
实验14：MVC安全性（表单身份验证）
- 步骤1：定义登录页面控制器
- 步骤2：创建index视图
- 步骤3：验证凭据
- 步骤4：Authorize属性
- 步骤5：修改“Web.config”文件
- 步骤6：查看表单身份验证的效果
第四天内容是什么？
50个MVC面试题及答案
您是MVC新手吗？
- 部分视图。
- 使用数据注释进行验证。
- Razor (MVC 3)。
- MVC Windows身份验证
- MVC表单身份验证
- “Empty”选项创建一个文件最少た项目。
- “Internet Application”选项创建一个外壳应用程序，包含用户注册和身份验证、导航以及一致的视觉风格。
- “Intranet Application”选项与Internet Application非常相似，唯一的区别是身份验证是通过域/Active Directory基础设施进行的。

引言

那么，计划是什么？

在第3天的MVC分步学习中，我们将完成以下5个实验。

现在我们开始逐一进行上述三个实验。

供参考：如果您是MVC（Model View Controller）新手，请参阅本文的最后部分开始学习，或者可以查看下面列出的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

实验10：部分视图

在谈论Web应用程序时，可重用性是关键。因此，作为一名MVC开发人员，我们希望创建可重用的视图。例如，我们希望创建可重用的视图，如页脚和页眉视图，并在一个大型MVC视图中使用它们。

通过创建“部分视图”可以实现可重用视图。

步骤1：创建一个简单的视图

第一步是创建一个带有控制器的简单视图。从下面的截图可以看到，我创建了一个名为“Index.aspx”的简单视图，它将通过“Homecontroller.cs”调用。

如果您直接来到此部分，请参阅之前的实验以同步。

步骤2：创建一个简单的部分视图

现在我们已经创建了主视图，是时候创建一个可以在“Index”视图中使用的部分视图了。要创建部分视图，请右键单击视图文件夹，然后勾选“Create a partial view”复选框，如下图所示。

步骤3：在部分视图中添加内容

在部分视图中添加一些文本或逻辑。

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
This is reusable view

步骤4：在主视图中调用部分视图

最后，使用“Html.RenderPartial”函数在主视图中调用部分视图，并将视图名称作为函数参数传递，如以下代码片段所示。

<body>
<div>
<% Html.RenderPartial("MyView"); %>
</div> 
</body>

还要确保部分视图与主视图位于同一个文件夹中。如果不是，那么您还需要在RenderPartial函数中传递路径。您可以在下面的图中看到，我已经将部分视图移到了主“Views”文件夹中。

还有一点值得注意的是，主视图和部分视图的图标非常不同。您可以看到部分视图图标有一个黄色的边框，而主视图图标没有。

步骤5：运行程序并查看效果。

最后，按CTRL + F5，输入正确的控制器路径，然后查看您的结果。下面是各项内容应该显示的效果截图。

实验11：使用数据注释进行验证

在任何Web应用程序中，数据验证都是一项关键工作。作为开发人员，您希望同时在客户端（浏览器）和服务器端进行验证。因此，您可能希望编写一次验证，然后期望验证框架在两端生成验证逻辑。好消息是，这可以通过使用数据注释来实现。在MVC中，您可以验证模型值。因此，一旦数据进入模型，您就会想问模型，提供的数据是否正确？值是否在范围内？等等。

数据注释只不过是您可以应用于模型的元数据，MVC框架将使用提供的元数据进行验证。

在这个实验中，让我们使用数据注释来强制执行验证。所以第一步是使用实验4创建一个简单的模型和一个强类型的数据录入视图。如果您是直接来到这个实验，请在继续之前查看第1天的实验。

假设您已经创建了模型和强类型视图，让我们开始应用数据注释。

注意：创建的视图应该是强类型视图。

步骤1：用数据注释装饰模型

导入如下代码片段所示的数据注释命名空间。

using System.ComponentModel.DataAnnotations;

假设我们有一个客户模型，并且我们希望确保客户代码字段是必填项。因此，您可以应用“Required”属性，如以下代码片段所示。如果验证失败并且您想显示错误消息，您也可以传递“ErrorMessage”。

public class Customer
{
    [Required(ErrorMessage="Customer code is required")]
    public string CustomerCode
    {
        set;
        get;
    }
}

步骤2：更改ASPX代码

现在，与我们之前的实验相比，我们将在ASPX代码中进行一些代码更改。在body标签内，如果数据不正确，我们希望显示错误消息。这可以通过以下代码片段完成。

<%= Html.ValidationSummary() %>

我们还需要为输入数据编写HTML表单。以下是相应的代码片段。请注意，“EditorForModel”函数将根据模型属性自动生成UI控件。因此，我们不需要像实验4那样单独创建控件。

<% using (Html.BeginForm("PostCustomer", "Home", FormMethod.Post))
{ %>
<%= Html.EditorForModel() %>
<input type="submit" value="Submit customer data" />
<%}%>

步骤3：启用客户端验证

如前所述，我们希望在服务器和客户端两端触发验证。为了在客户端触发验证，我们需要引用如下代码片段所示的三个JavaScript文件。

<head runat="server">
<script src="<%= Url.Content("~/Scripts/MicrosoftAjax.debug.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/MicrosoftMvcAjax.debug.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/MicrosoftMvcValidation.debug.js") %>" type="text/javascript"></script>
<% Html.EnableClientValidation(); %>
</head>

还要注意对EnableClientValidation方法的调用，这可以启用客户端验证。

<% Html.EnableClientValidation(); %>

步骤4：编写控制器逻辑

从UI，当表单向控制器发送post请求时，您会想知道模型状态是否正确。这可以通过检查ModelState.IsValid属性来完成。因此，如果此属性有效，则调用Save方法并转到“Thanks”视图，否则返回“Customer”视图。

[HttpPost]
public ActionResult PostCustomer(Customer obj)
{
if (ModelState.IsValid)
{
    obj.Save();
    return View("Thanks");
}
else
{
    return View("Customer");
}
}

步骤5：运行应用程序以查看效果

最后，运行您的应用程序，查看数据注释的效果。

其他数据注释属性总结

还有其他数据注释属性，可以使复杂的验证变得轻而易举。以下是一些属性的列表：

如果您想检查字符串长度，可以使用StringLength。

[StringLength(160)]
public string FirstName { get; set; }

如果您想使用正则表达式，可以使用RegularExpression属性。

[RegularExpression(@"[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}")]
public string Email { get; set; }

如果您想检查数字是否在范围内，可以使用Range属性。

[Range(10,25)]
public int Age { get; set; }

有时您想将一个字段的值与另一个字段进行比较，我们可以使用Compare属性。

public string Password { get; set; }
[Compare("Password")]
public string ConfirmPass { get; set; }

如果您想获取特定的错误消息，可以使用Errors集合。

var ErrMessage = ModelState["Email"].Errors[0].ErrorMessage;

如果您自己创建了模型对象，可以在控制器中显式调用TryUpdateModel来检查对象是否有效。

TryUpdateModel(NewCustomer);

如果您想在控制器中添加错误，可以使用“AddModelError”函数。

ModelState.AddModelError("FirstName", "This is my server-side error.");

实验12：MVC 3：Razor

到目前为止，本文一直使用MVC 2，但现在是时候我们也开始讨论和进行新发布的MVC框架版本的实验了。变化是人生的一部分，MVC也是如此J。因此，在本节中，让我们讨论MVC 3，它是MVC 2之后的下一个发布版本。

供参考：最新版本是MVC4，将来我还会涉及那些版本。请耐心等待。

如果您尚未安装，请点击此处获取MVC 3模板。

如果您觉得我们在MVC 2中学到的东西都白费了，不，一点也没有。相反，MVC 3向后兼容MVC 2。因此，您在MVC 2中学到的内容在MVC 3中仍然适用。

现在，与其讨论所有新功能，不如让我们专注于MVC3中我认为是一个游戏规则的最大的功能，那就是Razor。

那么，Razor是什么？简单来说，它是一种MVC视图类型。在MVC 2中，默认视图是ASP.NET页面，即Web Forms视图。现在，Web Forms视图的问题在于，它并非为MVC而设计，因此语法有点笨重。

开发人员要求一个干净、轻量级且语法噪音少的视图：答案是Razor。

因此，让我们创建一个简单的实验来演示Razor视图的使用。

步骤1：安装MVC 3并使用它创建一个项目

安装MVC 3模板并创建一个项目，选择下面的MVC 3模板。

步骤2：选择Razor

下一个屏幕弹出，询问您要创建哪种类型的应用程序。

现在，让我们保持简单，选择“Empty”选项。第二件事是我们必须选择我们想要的视图类型，所以我们选择Razor并继续。

项目创建完成后，您可以看到名为“.cshtml”的Razor文件。“_ViewStart”页面是一个通用页面，视图将使用它来处理布局和通用代码。

步骤3：添加一个视图并从控制器调用它。

现在，继续添加一个新视图，并从控制器调用此视图。添加和从控制器调用视图的方法与前面实验中讨论的相同。只需记住选择Razor视图。

public class StartController : Controller
{
    //
    // GET: /Start/
    public ActionResult Index()
    {
        return View("MyView");
    }
}

步骤4：练习Razor语法

现在我们已经准备好了基本项目和视图，让我们来看一些常见的Razor语法，并体会一下Razor与ASPX视图相比有多么简单。

练习1：单行代码

如果您只想显示一个简单的变量，您可以这样做，如下所示。所有Razor语法都以@开头。如果您只有一行代码，则不需要“{”。Razor会逻辑地判断结尾。

Todays date  @DateTime.Now

如果您将上述语法与ASPX视图进行比较，您需要输入以下代码。所以语法不就更简单、整洁、轻量了吗？

<%=DateTime.Now%>

练习2：多行代码

如果您有多行代码，您可以使用“@”后跟“{”，如以下代码片段所示。

@{
    List<string> obj = new List<string>();
    obj.Add("Mumbai");
    obj.Add("Pune");
    obj.Add("Banglore");
    obj.Add("Lucknow");
}

练习3：Foreach循环和IF条件

循环和条件判断也变得更简单，如以下代码所示。

@foreach (string o in obj)
{
   @o <br />
}
@if (DateTime.Now.Year.Equals(2011))
{
  // Some code here        
}

练习4：不用担心@符号

如果您认为Razor会混淆Razor的@和电子邮件地址中的@，请不用担心，Razor会区分两者。例如，在下面的行中，第一行Razor将作为代码执行，第二行它会识别为电子邮件地址。

@DateTime.Now
questpond@yahoo.com

练习5：显示@符号

如果您想显示“@”，只需输入两次，如以下代码片段所示。显示效果如下图所示。

Tweet me @@Shivkoirala

练习6：Razor中的HTML显示

如果您想在浏览器中显示HTML。例如，下面是一个名为link的简单变量，其中包含HTML代码。我正在浏览器中显示data变量。

@{
    var link = "<a href='http://www.questpond.com'>Click here</a>";
}
@link;

如果您执行上述代码，您会惊讶地发现它没有显示为HTML，而是作为简单的文本显示，如下所示。这并不是我们期望的。我们期望正确的HTML显示。Razor这样做是为了防止XSS攻击（我将在后面的部分讨论）。

但别担心，Razor团队已经考虑到了这一点。您可以使用“Html.Raw”来显示它，如以下代码片段所示。

@{
    var link = "<a href='http://www.questpond.com'>Click here</a>";
}
@Html.Raw(link);

实验13：MVC安全性（Windows身份验证）

安全性是任何应用程序中最重要的方面之一，无论您使用何种技术进行开发，MVC也是如此。

在开始此实验之前，我们需要了解一点：MVC最终是建立在ASP.NET引擎之上的。换句话说，MVC使用与ASP.NET相同的安全方法，即Windows和Forms身份验证。

注意：- 在本文中，我们不会深入探讨Windows和Forms身份验证的基础知识。如果您是ASP.NET表单身份验证的新手，可以阅读这篇文章链接https://codeproject.org.cn/Articles/98950/ASP-NET-authentication-and-authorization

所以，让我们尝试在MVC 3应用程序中实现Windows身份验证。

现在，实现Windows身份验证的一种方法是使用“Intranet Application”选项创建项目。如前所述，“Intranet Application”选项启用了从Windows Active Directory进行身份验证的功能。

目前，我们不使用该选项，而是使用“Empty Application”选项从头开始创建，以便我们能更好地理解。

步骤1：启用Windows身份验证

创建项目后，第一步是使用如下所示的<authorization>标签启用Windows身份验证。是的，这段代码与我们在ASP.NET中使用的相同。

<authentication mode="Windows"/>
<authorization>
<deny users="?"/>
</authorization>

步骤2：一些小缺陷

在MVC 3模板中，有一个小缺陷。它默认运行表单身份验证。在appsettings标签中设置以下标签以避免问题。我花了两个小时才弄清楚，真是浪费时间！

<add key="autoFormsAuthentication" value="false" />
<add key="enableSimpleMembership" value="false"/>
<appSettings>
<add key="webpages:Version" value="1.0.0.0"/>
<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
<add key="autoFormsAuthentication" value="false" />
<add key="enableSimpleMembership" value="false"/>
</appSettings>

步骤3：在控制器/操作上应用Authorize标签。

启用Windows身份验证后，使用“[Authorize]”标签并指定哪些用户可以访问控制器和操作。如果需要，您还可以指定角色。

[Authorize(Users= @"WIN-3LI600MWLQN\Administrator")]
public class StartController : Controller
{
    //
    // GET: /Start/
    [Authorize(Users = @"WIN-3LI600MWLQN\Administrator")]
    publicActionResult Index()
    {
        return View("MyView");
    }
}

请注意，用户必须存在于您的Windows AD或本地用户组中。例如，在我的情况下，Administrator存在于我的本地Windows用户组中。

步骤4：创建安装包

现在是时候将此解决方案发布到IIS上进行测试，以验证Windows身份验证是否有效。为此，我们需要将必要的MVC DLL也部署到服务器上。因此，右键单击项目并选择“Add deployable dependencies”。

在下一个屏幕上，它会提示您要包含哪些依赖项。目前我使用的是Razor视图，所以我选择了这两个选项。

一旦您看到依赖的DLL已添加到项目中。

步骤5：创建IIS应用程序

下一步是创建一个IIS应用程序，并仅启用Windows身份验证，如下图所示。

步骤6：发布

创建IIS应用程序后，就可以将您的应用程序发布到Web应用程序文件夹了。因此，单击“Build”和“Publish”，如下图所示。我使用了“File system”作为发布方法，您可以自行选择。

步骤7：运行控制器和操作

最后，运行控制器和操作，看看Windows身份验证框如何弹出要求输入用户ID和密码。

如果凭据输入正确，您应该可以看到视图。

实验14：MVC安全性（表单身份验证）

在上一个实验中，我们学习了如何进行Windows身份验证。Windows身份验证非常适合内网网站。但是，一旦我们谈论到外网网站，从Windows ADS/工作组创建和验证用户就不是一个可行的选项。因此，在这些情况下，“表单身份验证”是最佳选择。

步骤1：定义登录页面控制器

我们需要做的第一件事是定义将调用登录视图的控制器。所以我创建了一个简单的index操作，它调用一个名为Index的视图。这个index视图将接收用户名和密码等输入。

public ActionResult Index(){return View();}

步骤2：创建index视图

下一步是创建登录表单，该表单将接收用户名和密码。为了创建表单，我使用了Razor视图和HTML辅助类。如果您是HTML辅助类的新手，请参阅第1天的实验。

此HTML表单将以HTTP POST方法向“Home”控制器中当前存在的“Login”操作发送post请求。因此，当用户按下提交按钮时，它将命中“Login”操作。接下来是创建“Login”操作，该操作将验证用户名和密码。

    @{Html.BeginForm("Login", "Home", FormMethod.Post);}        User Name :- @Html.TextBox("txtUserName") <br />        Password :- @Html.TextBox("txtPassword") <br />          <input type="submit" value="Login" /> <br />        @{ Html.EndForm(); }

步骤3：验证凭据

在login操作中，我们需要做的第一件事是检查用户是否正确。目前，我已经硬编码了用户名和密码的验证。这始终可以替换为从SQL Server或从其他源查询。

if ((Request.Form["txtUserName"] == "Shiv") && (Request.Form["txtPassword"] == "Shiv@123")){…..}

在检查完凭据后，下一步是使用著名的“FormsAuthentication”类并设置一个cookie，表明此用户是正确的。

这样，在下一次用户请求时，他将不会被反复验证。设置cookie后，重定向到“About”视图，否则停留在“Index”视图。

public ActionResult Login(){if ((Request.Form["txtUserName"] == "Shiv") && (Request.Form["txtPassword"] == "Shiv@123")){            FormsAuthentication.SetAuthCookie("Shiv",true);            return View("About");}else{            return View("Index");}

我的about视图只是一个简单的页面，如下所示。

@{    Layout = null;}<!DOCTYPE html><html><head>    <title>About</title></head><body>    <div>        This is About us    </div></body></html>

步骤4：Authorize属性

我们还需要在要限制未经授权用户的控制器上放置“[Authorize]”属性。例如，您可以在下面的代码片段中看到，“Default”和“About”操作都使用“[Authorize]”属性进行了修饰。

因此，如果任何未经授权的用户直接访问这些控制器中的任何一个，他们将被重定向回“Index”视图，即回到登录屏幕。

[Authorize]public ActionResult Default(){ return View();}[Authorize]public ActionResult About(){return View();}

步骤5：修改“Web.config”文件

最后，我们需要对“web.config”文件进行著名的更改，即启用“Forms”安全性。下面代码片段中最重要的部分是“LoginUrl”属性。

通常在ASP.NET中，此登录URL指向一个ASP.NET页面，但在MVC中，它指向一个操作，即“/Home/Index”。此操作调用登录凭据页面。

 <authentication mode="Forms">      <forms loginUrl="~/Home/Index"  timeout="2880"/>    </authentication>

步骤6：查看表单身份验证的效果

完成了上述5个步骤，您现在就完全准备就绪了。如果您现在尝试直接调用“About”操作，它将显示如下屏幕。此测试证明“Forms”身份验证正在工作。它自动检测到用户无效，并将其重定向到“Index”操作，该操作进一步调用了“Login”表单。

第四天内容是什么？

在第四天，我们将学习Jquery、Json、Async控制器以及Viewdata、Tempdata、Viewbag和Session Variables之间的区别。您可以在以下链接上阅读第4天内容。点击此处查看MVC分步学习第4天。

最终说明：您可以在我的C#和MVC培训视频中观看到关于WCF、SilverLight、LINQ、WPF、设计模式、Entity Framework等各种主题的内容。不要错过我的.NET和C#面试题及答案书籍。

有关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

您是MVC新手吗？

如果您是完全的新人，我建议从以下四个视频（每个大约10分钟）开始，这样您可以快速学会MVC。