[bra_highlight style=”highlight2″]This post is meant to give users an overview of Views in the MVC framework. If your are unfamiliar with the MVC framework start with the Overview of the MVC Framework.[/bra_highlight]
In MVC the V stands for the View, which is the presentation layer or User Interface (UI). Applications can work perfectly and pass all the unit test but in the end the user will judge the application on the UI. Good news is that MVC’s strength is the ability to let developers write code and leave the front-end code to the designers. In fact, both the designer and developer could work on the same section at the same time without stepping all over each other. The View is just a a template for that allows the Controller to present data in a compelling why for the users.
What Are The Extension Types?
In Web Forms and early in MVC the ASP.NET extension was the .aspx, which was put in to replace the Classic ASP extension .asp. The Razor syntax was introduced with the release of MVC 3.0, the Razor syntax is simply C# (VB) and HTML mixed together with a @ sign. If you understand C# or VB you can code your View with Razor. While Razor is the community favorite for developing Views the other extension types listed below are also valid.
[bra_list style=”arrow-list”]Most Popular Extensions
- .html – Regular HTML page
- .aspx – ASP.NET page mostly found in Web forms but still available for MVC
- .cshtml – Razor C#
- vbhtml – Razor VB
[/bra_list]
What does a View looks like?
Very similar to regular a .aspx extension but with some C# included with an @ in front of it. From the example below you will see that when we populate data from the back-end (Controller) you use an @ to tell MVC that you are going to use C#. After the View knows you are calling C# you have access to data you have declared in your Controller.
For example we can see in the View we have an h2 tag with an @Viewbag.Message.
View/About/Index.cshtml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
@{ ViewBag.Title = "About"; } <hgroup class="title"> <h1>@ViewBag.Title.</h1> <h2>@ViewBag.Message</h2> </hgroup> <article> <p> Use this area to provide additional information. </p> <p> Use this area to provide additional information. </p> <p> Use this area to provide additional information. </p> </article> <aside> <h3>Aside Title</h3> <p> Use this area to provide additional information. </p> <ul> <li>@Html.ActionLink("Home", "Index", "Home")</li> <li>@Html.ActionLink("About", "About", "Home")</li> <li>@Html.ActionLink("Contact", "Contact", "Home")</li> </ul> </aside> |
When we run the application in the browser we see it displays Your app description page in html.
If we hit F12 and look at the source code we will see that is was sent in HTML as <h2>Your app description page.</h2>. So compiled the Viewbag.Message for us and sent it to the browser as plain HTML. Awesome!!!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<hgroup class="title"> <h1>About.</h1> <h2>Your app description page.</h2> </hgroup> <article> <p> Use this area to provide additional information. </p> <p> Use this area to provide additional information. </p> <p> Use this area to provide additional information. </p> </article> <aside> <h3>Aside Title</h3> <p> Use this area to provide additional information. </p> <ul> <li><a href="/">Home</a></li> <li><a href="/Home/About">About</a></li> <li><a href="/Home/Contact">Contact</a></li> </ul> </aside> |
If we look at the HomeController for the about page, our Viewbag.Message is declared Viewbag.Message = “Your app description page.” Our Message was sent from the Controller to the View.
Controller/HomeController.cs
1 2 3 4 5 6 |
public ActionResult About() { ViewBag.Message = "Your app description page."; return View(); } |
Just from the example above you can see how using data can be passed from Controller to View. Your Views will be more complicated, but you still have to understand how data is passed and rendered on the browser before you can create even simple Apps. Feel free to let me know what you think of the MVC Views Overview.