MVC Basics

Model-View-Controller (MVC) is a design pattern commonly used by applications that require multiple views of the same data. The MVC pattern reqires the separation of individual objects into the following three categories:

Controllers: Classes that handle incoming requests to the application, retrieve model data, and then specify view templates that return a response to the client.
Models: Classes that represent the data of the application and that use validation logic to enforce business rules for that data.
Views: Template files that your application uses to dynamically generate HTML responses.

The concept of MVC is depicted in the following diagram:

Typically, the control flow in an MVC application would be as follows:

Someone interacts with the UI in a way that triggers an event.
The controller notifies the model of the user's interaction and requests an action.
Model performs the requested action.
The controller requests for the view to display the result of the action.
The view (or views) query the model to generate the new view and grabs the data from the model.
The view displays the results.
But before we do that, it might help to understand how a view is formatted and ComponentOne widgets are accessed.

How Wijmo Works in Mobile MVC

The C1 ASP.NET MVC 4 Mobile Application allows you to create an MVC application with mobile-optimized Wijmo controls. These controls are used for the application's default UI, and the necessary Wijmo assemblies are already referenced in the application's _Layout.cshtml page.
The Wijmo widgets will always be added under one or more of the views (.cshtml files) under the Views folder. It may be helpful if we go over a few basics about MVC views.
Before a view appears to the user, the return View() statement for the view is executed in a controller. The layout of that view and, in fact, the layout of ALL views in the project is specified in the _ViewStart.cshtml. You can find the_ViewStart.cshtml file in the root of the Views folder.
If you open the _ViewStart.cshtml file, you will see the following Razor syntax:
```
  @{
      Layout = "~/Views/Shared/_Layout.cshtml";
   }
```
If you want the widgets to appear in a particular view, just open that view and use the data-role attribute to create the widget in markup. If you want a menu on the first page, for example, all you have to do is add the following markup to the Index.cshtml file.
<div data-role="wijlineargauge" data-options="{value: 10}"></div>

It's as simple as that. When you run your application, the initial view will resemble the following image: