MVC 模式（主动模型和被动模型）及其在 ASP.NET Web Forms 中的实现

• 下载 MVCPassiveModelForWinFormsProject.zip

介绍 

本教程区分了 MVC 模式，特别是主动模型 MVC 模式和被动模型 MVC 模式，并为技术人员和非技术人员提供了图示。本教程还描述了使用 ASP.Net Web Forms 实现具有被动模型的 MVC 模式。

目录 

• 第一部分：区分主动模型和被动模型 MVC 模式。
• 第二部分：被动模型 MVC 模式介绍。  
• 第三部分：使用被动模型 MVC 模式的 ASP.NET Web Forms 项目示例。  

第一部分：区分主动模型和被动模型 MVC 模式

MVC 模式介绍 

模型-视图-控制器（MVC）是一种流行的 UI 设计模式。它用于表示表示层。此模式分离了应用程序代码。MVC 模式包含三个组件，分别称为模型 (Model)、视图 (View) 和控制器 (Controller)。

主动模型和被动模型 MVC 模式介绍 

主动模型 MVC 模式：  在主动模型中，MVC 模式的三个组件（如下面的图 1.1 和 1.2 所示）中，模型是活动的。与被动模型实现的主要区别在于，在主动模型实现中，当模型被控制器更改时，模型会通知视图。图形表示将更清楚地说明这一点。

被动模型 MVC 模式：  但在被动模型实现中，模型是惰性的。它不活动。当模型被控制器更改时，它不会通知视图。通知任务由控制器完成。这是两者之间的主要区别。

我认为以上的讨论让读者更清楚了。为了更清楚，我并排展示了两者的图示。

首先使用非技术符号

图 1.1：主动模型（图片来源-https://codeproject.org.cn/Articles/661878/Implementation-of-MVC-Patterns-in-ASP-NET-Web-form)	图 1.2：被动模型

其次使用 UML 类图

图 1.1：主动模型（图片来源-https://codeproject.org.cn/Articles/661878/Implementation-of-MVC-Patterns-in-ASP-NET-Web-form)	图 1.2：被动模型

在上面的四幅图中，可以清楚地看到，在主动模型图中，模型依赖于视图并通知视图更改。而在被动模型图中，控制器和视图都依赖于模型，但模型不依赖于任何人，而是由控制器通知视图。

希望现在区别已经清楚了。有关主动模型 MVC 模式的更多详细信息，请访问我的文章 https://codeproject.org.cn/Articles/661878/Implementation-of-MVC-Patterns-in-ASP-NET-Web-form。

第二部分：被动模型 MVC 模式介绍

图 1.2 和图 2.2 显示了具有被动模型的 MVC 模式的主要组件及其关系。让我们详细描述一下。

• 视图：视图代表用户界面。它显示的数据来自模型组件。当控制器更新模型时，视图会收到更新通知。
• 控制器：控制器充当视图和模型之间的中介。当用户触发事件时，视图会接收该事件并将其控制权移交给控制器。然后控制器更新模型并通知视图更新。 
• 模型：模型包含应用程序的数据。

下图显示了具有被动模型的 MVC 模式的顺序图。

图 3：具有被动模型的 MVC 模式的顺序图。

上面的顺序图从用户请求开始，当用户在 UI 上触发事件时。视图将 RequestUpdate 消息发送到控制器，并将自身作为参数传递。控制器通过调用辅助函数 UpdateModel 来更新模型。在成功更新模型后，控制器使用 NotifyUpdate 消息通知视图，并将更新后的模型作为参数传递。收到通知后，视图使用更新后的值更新 UI，并且视图从模型中获取更新后的值。

第三部分：使用被动模型 MVC 模式的 ASP.NET Web Forms 项目示例

项目描述：示例项目显示了一个仪表板，其中包含销售中心的当前库存。仪表板如下所示。在仪表板中，我使用了两个视图来显示计算机配件和手机配件的状态。对于这两个视图，都有两个控制器和两个模型。项目的分步描述如下。

步骤 1 - 首先创建一个项目，如下图所示的解决方案图像。

步骤 2 - ComputerController 的代码如下所示。

public class ComputerController
{
    private ComputerModel Model;
    private ComputerView View;
    public ComputerController(ComputerModel paramModel, ComputerView paramView)
    {
        Model = paramModel;
        View = paramView;
    }
    public void InitializedConponent(bool ispostback)
    {
        if(!ispostback)
            View.InitializedView(Model);
    }
    public ComputerController()
    {
    }
    public void RequestUpdate(ComputerView view)
    {
        if (Model != null)
        {
            UpdateModel(view.Monitor, view.Fan, view.Motherboard);
            this.NotifyView();
        }
    }
    public void UpdateModel(int paramMonitor, int paramFan, int paramMotherboard)
    {
        Model.Monitor += paramMonitor;
        Model.Fan += paramFan;
        Model.Motherboard += paramMotherboard;
    }
    public void NotifyView()
    {
        View.Update(Model);
    }
}

步骤 3- ComputerModel 类模型代码如下所示。

public class ComputerModel
{
    private ArrayList aList = new ArrayList();
    public ComputerModel(string paramName, int paramMonitor, int paramFan, int paramMotherboard)
    {
        Name = paramName;
        Monitor = paramMonitor;
        Fan = paramFan;
        Motherboard = paramMotherboard;
    }
    public string Name { get; set;}
    public int Monitor { get; set; }
    public int Fan { get; set; }
    public int Motherboard { get; set; }
}

步骤 4 - ComputerVeiw 的 HTML 部分如下所示。

<%@ Control Language="C#" AutoEventWireup="true" 
  CodeBehind="ComputerView.ascx.cs" Inherits="MVCPassiveModelForWinForms.Views.ComputerView" %>
<div style="height:30px; background-color:black; color:white; margin-bottom:10px;">
    <asp:Label ID="label1" runat="server" 
      Text="Computer Accessories" style="display:block; text-align:center;"></asp:Label>
</div>

<table style="padding:10px 0px;float:left; width:365px;">
    <tr>
        <td style="font-weight:bold;">Monitor:</td>
        <td><asp:TextBox ID="txtMonitor" runat="server"></asp:TextBox></td>
        <td>Pieces</td>
    </tr>
    <tr>
        <td style="font-weight:bold;">Fan:</td>
        <td><asp:TextBox ID="txtFan" runat="server"></asp:TextBox></td>
        <td>Pieces</td>
    </tr>
    <tr>
        <td style="font-weight:bold;">Motherboard:</td>
        <td><asp:TextBox ID="txtMotherboard" runat="server"></asp:TextBox></td>
        <td>Pieces</td>
    </tr>
    <tr>
        <td>
            <asp:Button ID="btnUpdate" runat="server" 
               Text="Add New" OnClick="btnUpdate_Click" />
        </td>
        <td></td>
        <td></td>
    </tr>
</table>

<span style="font-weight:bold; color:black; margin-bottom:10px; display:block;">Present Stock:</span>
<div style="font-size:14px;">
    <table>
        <tr>
            <td>Monitor:</td>
            <td><asp:Label ID="lblMonitor" runat="server"></asp:Label></td>
            <td>Pieces</td>
        </tr>
        <tr>
            <td>Fan:</td>
            <td><asp:Label ID="lblFan" runat="server"></asp:Label></td>
            <td>Pieces</td>
        </tr>
        <tr>
            <td>Motherboard:</td>
            <td><asp:Label ID="lblMotherboard" 
               runat="server"></asp:Label></td>
            <td>Pieces</td>
        </tr>
    </table>
</div>

ComputerView 的后端代码如下

public partial class ComputerView : System.Web.UI.UserControl
{
    private ComputerController Control;
    private ComputerModel Model = new ComputerModel("Computer Accessories", 30, 20, 40);
    protected void Page_Load(object sender, EventArgs e)
    {
        Control = new ComputerController(Model, this);
        Control.InitializedConponent(IsPostBack);
    }
    public int Monitor { get; set; }
    public int Fan { get; set; }
    public int Motherboard { get; set; }
    protected void btnUpdate_Click(object sender, EventArgs e)
    {
        Monitor = Convert.ToInt32(txtMonitor.Text.ToString());
        Fan = Convert.ToInt32(txtFan.Text.ToString());
        Motherboard = Convert.ToInt32(txtMotherboard.Text.ToString());
        Control.RequestUpdate(this);
    }
    public void Update(ComputerModel paramModel)
    {
        UpdateInterface(paramModel);
    }
    public void UpdateInterface(ComputerModel auto)
    {
        if (Monitor != auto.Monitor)
        {
            lblMonitor.Text = auto.Monitor.ToString();
        }
        if (Fan != auto.Fan)
        {
            lblFan.Text = auto.Fan.ToString();
        }
        if (Motherboard != auto.Motherboard)
        {
            lblMotherboard.Text = auto.Motherboard.ToString();            
        }
    }
    public void InitializedView(ComputerModel paramModel)
    {
        lblMonitor.Text = paramModel.Monitor.ToString();
        lblFan.Text = paramModel.Fan.ToString();
        lblMotherboard.Text = paramModel.Motherboard.ToString();
    }
}

步骤 5 - 仪表板的 HTML 如下所示。

<%@ Page Language="C#" AutoEventWireup="true" 
  CodeBehind="DashBoard.aspx.cs" Inherits="MVCPassiveModelForWinForms.DashBoard" %>
<%@ Register Src="~/Views/ComputerView.ascx" TagPrefix="com" TagName="Computer" %>
<%@ Register Src="~/Views/MobileView.ascx" TagPrefix="mob" TagName="Mobile" %>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        body {
            font-family:Verdana;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div style="height:400px; width:825px; margin:auto auto;">
            <div style="border:1px solid; width:400px; height:400px; float:left; margin-right:20px;">
                <com:Computer runat="server" id="computer" />
            </div>
            <div style="border:1px solid; width:400px; height:400px; float:left;">
                <mob:Mobile runat="server" id="mobile" />
            </div>
        </div>
    </form>
</body>
</html>

注意：有关手机配件的视图、控制器和模型实现，请查看附件的项目 ZIP 文件。

结论

总而言之，我想说的是，MVC 模式用于将 UI 与业务逻辑和数据分离。它使得单元测试非常容易。在主动模型的实现中，模型通知视图数据更改；在被动模型的实现中，控制器通知视图数据更改。本教程介绍了被动模型 MVC 模式，有关主动模型的详细信息，请访问我的文章 https://codeproject.org.cn/Articles/661878/Implementation-of-MVC-Patterns-in-ASP-NET-Web-form。