MVVM在ASP.NET MVC 4 Web应用程序中扮演什么角色？

Question

当我在阅读《ASP.NET MVC 4》这本书时，我对MVVM感到困惑。于是我开始了解，但没有找到任何关于使用MVVM开发Web应用程序的书籍，所以我可能缺少一些信息。

据我所知，MVVM通过knockout.js和其他框架在客户端的Web应用程序中使用。然而，如果我要开发Windows Phone应用程序，我可以直接使用MVVM而不使用MVC。 这是否意味着，MVVM /数据绑定的概念不适用于客户端 - 服务器Web应用程序？

- Krumelur

---

你可能也想看看谷歌的Angular框架，它比Knockout更好。 - rajansoft1

Answer 1

MVVM是一种子模式。目前并没有真正的“MVVM” Web应用程序框架。它们都是MVC，如果您想要视图模型，您基本上只需要将其合并。

特别是在ASP.NET MVC中，您只需创建一个类，通常以[Model Name]ViewModel或[Model Name]VM的形式命名。该类仅包含您需要处理的模型属性和任何额外的属性，这些属性与实际基于数据库的模型无关，例如SelectList等。

在您的操作中，只需将此视图模型的实例传递给视图，而不是传递您的模型：

return View(viewModelInstance);

当然，确保你的视图接受它:

@model Namespace.To.MyViewModel

唯一稍微复杂的是将视图模型与模型连接起来（即获取数据到/从视图模型/模型）。您可以通过显式映射属性手动完成此操作，或者您可以使用类似于AutoMapper的工具。

- Chris Pratt

---

Angular by Google和knockout是基于jQuery构建的MVVM框架。 - rajansoft1

对不起，我应该更具体地说明。我的意思是Web应用程序框架。我不知道有任何纯MVVM Web堆栈。 - Chris Pratt

Answer 2

MVVM是WPF/Silverlight开发的标准设计模式，不应与ASP.Net开发的MVC混淆。

这两者听起来可能相似并且有一些共同点，但它们是两种不同的设计模式。

从我对knockout.js的了解来看，它旨在创建类似于WPF/Silverlight开发中使用的“数据绑定”，因此MVVM设计模式适用于该领域。

引用我另一个答案中关于MVVM和MVC之间差异的描述：

在MVVM中，你的代码类(ViewModels)是你的应用程序，而Views只是一个漂亮的用户友好界面，位于应用程序代码之上，允许用户与之交互。这意味着ViewModels有很大的工作量，因为它们是你的应用程序，并负责从应用程序流程到业务逻辑的所有内容。

在MVC中，Views是您的应用程序，而Controller处理应用程序流程。应用程序逻辑通常在ViewModels中找到，它们被视为MVC中的一部分(MVC中的M层包含比MVVM中的M层更多的功能)。用户会得到一个屏幕(View)，他们与之交互，然后将某些东西提交给Controller，Controller决定谁使用数据做什么，并返回一个新的View给用户。

- Rachel

---

我认为“另一个答案”中的那个引用语过于简单化，并且可能不准确。该引用中的“应用程序”暗示了业务逻辑，如果是这样，在MVVM模式中，你不会把业务逻辑放在VM中，也不会把M放在MVC中。作者完全错过了MVVM中V的整个重点，即通常要限制代码后台的数量，因此它们很难成为“漂亮的用户友好界面”。VM的工作并不多。正如先前提到的，你会限制放置在VM中的业务逻辑的数量。 - user585968

应用程序逻辑通常位于ViewModels中，这被认为是MVC模式中的M部分。但是，MVC中的M仅包含模型（通常是POCO类），我认为应用程序逻辑在控制器中，如果我错了，请纠正我。 - zeppelin

@zeppelin 或许事情已经改变了，但是几年前当我正在学习MVC教程并查看VS中的MVC模板时，我记得在Models文件夹中有一个名为“ViewModel”的类。然而它们并不是MVVM ViewModel中的ViewModel。这两个对象都提供了视图所需的数据，但MVVM ViewModel通常会完成MVC控制器中的大部分工作。 - Rachel

精妙的MVVC模式已被几乎所有平台采用。Android开发使用它，Xamarin Forms和WPF特别强大，尤其是在视图方面。您不再需要担心状态...例如，您可以直接将进度条绑定到循环计数器或购物车总额，并忘记它。 - Tim Davis

Answer 3

MVC是一种单向数据绑定系统。

在控制器中填充您的Model，然后将其传递给View。

---

MVVM是一种双向数据绑定系统。

填充您的Model，在View中使用它，当View状态发生更改时，您的Model会自动更新。(反之亦然)

- ahmet

Answer 4

“这是否意味着，MVVM / 数据绑定的概念不适用于客户端-服务器Web应用程序？”

“不，您可以将MVVM模式应用于客户端-服务器Web应用程序。”

“实际上，Asp.Net MVC实际上使用了这种模式 - 当控制器创建视图时，它可以传递一个“视图模型”。这个视图模型通常是一个POCO数据对象，包含特定视图所需的所有数据，从模型（数据库）中提取。视图使用此数据来呈现HTML页面。”

“维基百科上的MVVM说是由Microsoft与WPF一起推出的。具体而言，视图绑定到视图模型上的属性。然后，视图模型将其映射到数据库。按照这个定义，Asp.Net并不完全匹配。客户端框架如knockout.js和vue.js确实支持此类2-way绑定与视图模型属性。”

所有这些模式都基于MV*模式。它最初被称为MVC设计模式。那么这与Asp.Net MVC完全相同吗？实际上并不完全相同。首先，控制器的意义完全不同（请参见维基百科上的MVC）。原始的MVC控制器直接处理所有用户输入，而不是通过视图。其次，原始的MVC模式是为桌面应用程序GUI设计的，而Asp.Net MVC则将该模式适用于客户端-服务器Web应用程序。ASP.Net控制器是一组HTTP端点，客户端HTML页面可以使用它们（例如表单提交、页面导航、Ajax）。

因此，有很多M-something-V模式，通常称为MVC设计模式。

还有一个重要的细节：客户端与服务器端。我们引入了丰富的客户端JavaScript框架，MV*模式在这里也非常适用。因此，现在我们可以拥有像客户端视图-模型-服务器HTTP端点和服务器端HTTP端点-服务器模型这样的东西。服务器端点是指Asp.Net控制器或您所使用的任何Web框架或编程语言中的等效物。从服务器端的角度来看，整个客户端HTML都是视图。客户端模型与服务器ajax api（http端点）对话以同步数据或触发高级操作。ServerModel通常是一个数据库。在knockout/vue中，客户端的“Model”会被称为ViewModel。如果您使用redux/flux的react/vue，则客户端将是View-ViewModel-Model-ServerHTTPEndPoints，其中Model将是redux/flux存储。此外，在服务器端，通常会引入服务：ServerHTTPEndPoints-Service-Model。这样，单元测试就可以直接访问服务，而不是启动整个Web服务器并进行HTTP连接。

- Curtis Yallop

Answer 5

我在桌面应用程序中使用了MVVM，我的视图模型中有一个名为Model的属性，其中存储了业务对象作为模型。我的视图具有一个名为DataContext的属性，在加载视图之前，视图模型被存储在其中。视图使用路径DataContext.Model.BusObjPropertyName将其控件绑定到业务对象。我有一个UserInteractionService，它从一开始就注册视图和视图模型之间的关系。当视图模型需要显示另一个视图模型时，它调用UserInteractionService中的ShowView方法，并将视图模型作为参数传递。然后服务实例化与接收到的视图模型相对应的视图，将其DataContext属性设置为视图模型并显示它。

如果在Asp中可以像上面那样绑定路径，那么所有这些模型都可以在桌面和Web应用程序中重复使用。

- Danilo Silva