Thomas Henson

Archives for February 2014

MVC – Views Overview

by 1 Comment

[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.

Screenshot of application in firefox

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.

ASP.NET MVC Overview

by 2 Comments

MVCModel View Controller (MVC) is a software architecture pattern used to separate an application into 3 layers data, business logic, and user interface (UI). The MVC pattern is not new but has only been officially part of the ASP.NET since 2009.  Over the past few years the MVC pattern has exploded with popularity around the Web Development community. Many other popular frameworks use this pattern:

  • Ruby
  • Laravel(PHP)
  • CodeIgniter
  • CakePHP
  • FuelPHP

As result of the popularity of these frameworks and to answer the request from developers in the ASP.NET community; Microsoft developed their own brand of MVC. The legend is that Scott Guthrie developed the concept on a paper napkin during a plane ride. Since it’s release ASP.NET developers have been excited to use MVC and it is now one ASP.NET’s most popular frameworks. Many features in the last few Visual Studio releases have catered to MVC developers versus Web Forms. Just like the other popular MVC frameworks, ASP.NET is open-source and community driven.

keep your models skinny, controllers fat and views simple

Using the MVC pattern allows for seperation of concern, the main idea here is the developer can separate content from design. The View does not need to worry about how or where the data comes from it just assumes the it will always be there. Same principles apply to how the controller handles user input, it’s doesn’t matter to the view or model what the user inputs because that can be handled by the controller.

How Does MVC Work?

Like I mentioned above the idea behind the MVC pattern is to allow for separation of concern. So if we look at the at what each layers represents we can get a better picture of what of what is going on at a higher level.

Model

Data layer or database layer. This layer is where you will create a Class for each of your data models, typically each class will represent a single table in your database.

View

Presentation layer of the user interface. This layer will contain your HMTL/JavaScript/Razor logic. Information presented in this layer is passed from the model through the controller. Passive layer that does none of the processing; often refereed to as the design layer.

Controller

Business logic layer. This layer does most of the heavy lifting on the application, the controllers are represented as Classes that interact with other objects(models, views, etc). Handles interaction between model and view.  Receives events from view and processing those events. Returns view to the user.

Example

Keeping in the mind the 3 layers, lets take an example and apply MVC pattern to it. Suppose we want to create an application to track books we have read.  Just a simple application that will list books we have read and allow us to create, edit, and delete books.
Model
For this example a Book will represent our model. Each book will have an id, name, date read, review, author, description, quotes, and rating.
So in our Book Class we will declare each of these and add getters and setters. 
C#
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
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Data.Entity;
 
namespace BookTracker.Models
{
    public class Book
    {
        //id
        public int ID { get; set; }
        //name
        public string Name { get; set; }
        //date read
        public DateTime DateRead { get; set; }
        //review
        public string Review { get; set; }
        //author
        public string Author { get; set; }
        //book description
        public string Description { get; set; }
        //quotes
        public string Quotes { get; set; }
        //rating
        public int Rating { get; set; }
 
    }
 
}

Controller

Our application will need the ability to create, delete, see book details, edit, and list of books. We can create one class that will handle all of these actions. Looking at the code below the index action on line 20 is our list feature, it will be served as the index page that simply lists all books in the database. Each ActionResult corresponds to a page view we serve up to the user.

C#
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using BookTracker.Models;
using BookTracker.BookContext__BookTracker;
 
namespace BookTracker.Controllers
{
    public class BooksController : Controller
    {
        private Models_ db = new Models_();
 
        //list the items...
        public ActionResult Index()
        {
            return View(db.Books.ToList());
        }
 
        public ActionResult Details(int id = 0)
        {
            Book book = db.Books.Find(id);
            if (book == null)
            {
                return HttpNotFound();
            }
            return View(book);
        }
 
        public ActionResult Create()
        {
            return View();
        }
 
        public ActionResult Edit(int id = 0)
        {
            Book book = db.Books.Find(id);
            if (book == null)
            {
                return HttpNotFound();
            }
            return View(book);
        }
 
        public ActionResult Delete(int id = 0)
        {
            Book book = db.Books.Find(id);
            if (book == null)
            {
                return HttpNotFound();
            }
            return View(book);
        }
}

View

The model and controller have both been Classes with a .cs extension but our views will be a Razor view with a .cshtml extension. These .cshtml pages are similar to the .aspx views-bookpages in Web Forms. All of our design decisions can be done here with little need to worry about development concerns. We have already coded our Controller to allow for a create, delete, details, edit, and index Views now we just need to create the views for each. Here is a screenshot of those Views inside View/Books directory of our application and the code for the index page. Notice how there is clean the code looks for the View.

ASP
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
@model IEnumerable<BookTracker.Models.Book>
 
@{
    ViewBag.Title = "Index";
}
 
<h2>Your Books</h2>
 
<p>
    @Html.ActionLink("Add New Book", "Create")
</p>
<table>
    <tr>
        <th>
           Book Title
        </th>
        <th>
            Date Read
        </th>
        <th>
            Review
        </th>
        <th>
           Author
        </th>
        <th>
            Rating
        </th>
        <th>
            Description
        </th>
    </tr>
 
@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.DateRead)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Review)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Author)
        </td>
       <td>
            @Html.DisplayFor(modelItem => item.Rating)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Description)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.ID }) |
            @Html.ActionLink("Details", "Details", new { id=item.ID }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.ID })
        </td>
    </tr>
}
 
</table>

 

The full code for the BookTracker Application can be found at Github https://github.com/tmhenson/booktracker. Just in this quick example you can start to see how ASP.NET MVC is a powerful framework for web development. While there is more MVC than just the separation of concern, it is by far one of my favorite features about the pattern. If your like me and come from a Web Forms background you can definitely see how much cleaner the code is using a MVC pattern. Feel free to tell me what you think in the comments below.

Common C# Razor Syntax

by

Razor is the markup language used in ASP.NET, you can use C# or VB. Razor is used widely with the MVC Framework to present data from the Controller to the View. The Views blog button on keyboardwhen using Razor have an .chtml (C#) extension versus an .html or .aspx. If you already know the C# or VB syntax it won’t be that difficult to get the hang of; the tricky part is knowing how to use the @ sign and a few other small things.

My plan is to add a few snippets a month and see how it goes from there. Here are some common and uncommon C# Razor syntax variations.

C# Razor Syntax

Comments in Razor

Add Links

 

Output @ Sign (for email addresses you only need 1 @)

 For Each Function

 Date Time

 Edit in Form

 Display Raw HTML

Display Raw HMTL with Razor
1
2
3
<div>
Html.Raw(item.ItemName)
</div>

Feel free to comment on C# Razor functions that should be added to this list.