# MVC vs MVVM: Similarities and Differences MVC and MVVM are similar architectural approaches, and it can be confusing to understand the difference between the two. We will compare two Wisej.NET projects that achieve the same result- a simple DataGridView that displays information about students, and allows the user to add additional students. One project is written using a MVC approach and the other uses a MVVM approach. You can view both projects on GitHub here: Let's get the similarities out of the way first- both MVC and MVVM have a View and a Model. In fact, you can use a very similar View and the same Model whether you are using MVC or MVVM! So the difference in MVC vs MVVM really comes down to the difference in the Controller vs the ViewModel.

The View- You will notice that the view looks identical in the MVC vs MVVM application

## The Controller In MVC, the controller is typically more tightly coupled to the view than the ViewModel is in MVVM and may not be as easily reusable across different views.\ In our example project, the controller is Page1.cs, and the view is Page1.designer.cs. So, in this case, they are extremely tightly coupled- they're actually part of the same class! Note that you could instead take a less tightly coupled approach, by creating a seperate Controller class. In that case, the Page1.cs part of the code would be known as the code-behind: the part of the code that connects the Controller to the view.\

Architecture used in the example MVC project- the controller and the view are in one class

Alternative MVC architecture- the controller and view are in separate classes

## The ViewModel In MVVM, the ViewModel binds to the View. This ensures that data is synchronized between the database and the view as soon as it is changed. (Whereas in MVC, [you have to manually call a function to synchronize the data](/wisej.net-application-architectures/architecting-21st-century-web-apps-using-wisej.net/model-view-controller-approach-mvc-with-wisej.net.md#synchronizing-the-view-and-the-database).) ## Setting up a Button in MVC vs MVVM In order to understand how event handlers are set up in MVC vs MVVM, let's look at the simple example of creating a Button with a Click event. We'll start by creating a Button object in the designer. The designer-generated code is generated in Page1.Designer.cs. The code that involves creating the Button, as well as setting its location and text belongs in the view. Because our view is Page1.Designer.cs, this code is fine- it doesn't need to be moved or edited. ``` // Designer-generated code that belongs in the View (looks the same in MVC and MVVM) this.button1 = new Wisej.Web.Button(); this.button1.Location = new System.Drawing.Point(740, 298); this.button1.Name = "button1"; this.button1.Size = new System.Drawing.Size(146, 37); this.button1.TabIndex = 1; this.button1.Text = "Add Student"; ``` What about when we attach an event handler to the Button to handle the Click event? That's where we can really see the difference between the MVC and the MVVM approaches.\ Here's the code that the designer produces when we attach an event handler: 
// Page1.Designer.cs
this.button1.Click += new System.EventHandler(this.button1_Click);
``` // Page1.cs private void button1_Click(object sender, System.EventArgs e) { // code that runs when the button is clicked } ``` In MVC, this code is fine as-is. Page1.Designer.cs is our View, and it's fine to set up the Click event handler in the view. And Page1.cs is either our controller or our code-behind. Either way, that's the correct place to put the `button1_Click()` function. (Note that if Page1.cs is the code-behind, the contents of the `button1_Click()` function should consist of calling a function in the controller.)\ \ However, with MVVM, this code is in the wrong place! Both of these code snippets would need to be moved to the ViewModel. The event hander is set up in the constructor of the ViewModel, and the `button1_Click()` function is defined as part of the ViewModel class. 
// ViewModel (MVVM)

//Constructor
public ViewModel(Page frm)
{
//Add an event handler to the "Click" event of the "button1" control
button1.Click += button1_Click;
}

private void button1_Click(object sender, EventArgs e)
{
// code that runs when the button is clicked
}
So, as you can see, it's a little more intuitive to write MVC code (as compared to MVVM), especially when you are using the designer to edit the view. MVVM can certainly be implemented in Wisej; you just have to know which designer-generated lines of code you need to move to the ViewModel. ## Pros and Cons of MVC vs MVVM ### Pros of MVC * MVC is simpler than MVVM, which makes it easier to implement. * With Wisej.NET, the designer generates event handler code in Page1.cs, which makes it very natural to incorporate that code into the code-behind or into the controller. ### Cons of MVC MVC is harder to maintain than MVVM. Because the controller is so tightly coupled to the view, . ### Pros of MVVM Databinding automatically synchronizes data between the View and the database. ### Cons of MVVM Some designer-generated code (event handlers) will have to be moved to the ViewModel class. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://www.learnwisej.net/wisej.net-application-architectures/architecting-21st-century-web-apps-using-wisej.net/mvc-vs-mvvm-similarities-and-differences.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.