1

Sorry for the vague title. I am pretty ashamed to ask this but I really need my awareness right now. I cannot identify whether I am following an MVC pattern or MVVM pattern.

In my previous internship, we had C# code (.NET) which had a controller and connected directly to the database (there wasn't a service layer). The controller would fetch information, format into JSON and give it to Angular's controller, which would display it on the view.

In my current internship, we don't use Angular. We use .cshtml files. The service layer provides its information to the controller, which formats the MODEL and gives it to the .cshtml view and which displays the content.

My questions:

Which one is MVC and which one is MVVM? Please drop down to my level and explain. Most of what I've read on the web seems to confuse me more with what I observe at work.

Everyone at work calls both of them MVC and, I am really confused now. If both are MVC, what's the difference between the two?

Oct8
  • 77
  • 1
  • 8
  • 1
    Just google it. http://stackoverflow.com/questions/667781/what-is-the-difference-between-mvc-and-mvvm Or this http://stackoverflow.com/questions/19444431/what-is-difference-between-mvc-mvp-mvvm-design-pattern-in-terms-of-coding-c-s and many others.... – Rick S Mar 31 '16 at 20:26
  • I have several times. Asked other several times. People are providing different answers. I know it is replacing controller with modelview but i have a controller in both cases and i do find a difference in way things are done. Techincally, both will be MVC but whats the difference in those architectures? Whats the name for these differences – Oct8 Mar 31 '16 at 20:37
  • You know which ASP.NET MVC is, right? That shouldn't be confusing. I don't know what pattern angular uses, but if it does databinding between server calls and the UI, it's most likely MVVM. –  Mar 31 '16 at 20:56

2 Answers2

1

Angular is definitely more Model-View-ViewModel-ish. Whereas what you're doing now definitely sounds like MVC.

MVVM is a special pattern where the UI state is encapsulated in a ViewModel, so that the rendering of the final UI is fairly dumb and just data-binding. The state logic to say, show this button, or hide this area is all encapsulated in the ViewModel. One benefit, is that this allows for unit tests to be built to test the ViewModel and thereby implicitly testing all of the UI behaviors. (see: Wikipedia article on MVVM and Martin Fowler's Introduction to Presentation Model which MVVM is a variation of.)

In MVC, the view itself has the latitude to control it's behaviors, what you want to show/hide, etc based off of the data provided, the model. This means that in MVC, you can't test the UI behaviors (e.g. if something is correctly showing or hiding based on data changes) without testing the UI itself.

So in summary, MVVM, the ViewModel controls the UI behavior and the UI itself is dumb and just uses data-binding and does what it's told to do based on the logic in the ViewModel.

In MVC, the UI is 'intelligent' and re-shapes and renders itself however it feels it needs to based on the data it receives from the model.

You can basically look at how the UI is rendered and if you see the UI rendering logic making a lot of its own decisions about how to render itself based on the decision, then you pretty much know you're using MVC. If you just see a lot of data-binding, where almost every behavior is driven by a separate class that encapsulates all of the logic for showing and hiding pieces of the UI and this data is passed to the UI via data-binding, then it's probably MVVM.

I hope that helps.

Ayo I
  • 6,642
  • 4
  • 24
  • 37
1

In both cases, you are using MVC (or at least an MVC-ish pattern). When using the .cshtml files, you are using server-side MVC. When using Angular, you are using client-side MVC (which is probably more like MVVM). The biggest difference is where the model is rendered into HTML elements; on the client, or on the server.

In my opinion, this is a better way to view the differences in what you have done.

Jestin
  • 330
  • 1
  • 13