Thomas Henson

  • Data Engineering Courses
    • Implementing Neural Networks with TFLearn
    • Hortonworks Getting Started
    • Analyzing Machine Data with Splunk
    • Pig Latin Getting Started Course
    • HDFS Getting Started Course
    • Enterprise Skills in Hortonworks Data Platform
  • Pig Eval Series
  • About
  • Big Data Big Questions

Archives for February 2014

MVC – Views Overview

February 21, 2014 by Thomas Henson 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.

Filed Under: MVC Tagged With: ASP.NET, MVC, Razor, Views

ASP.NET MVC Overview

February 12, 2014 by Thomas Henson 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.

Filed Under: MVC Tagged With: ASP.NET, Development, MVC, Tutorial

Common C# Razor Syntax

February 7, 2014 by Thomas Henson

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

ASP
1
2
3
<h1>Hello World</h1>
@* This is a comment *@
<p>This is a really awesome post</p>

Add Links

1
2
3
4
5
6
7
8
9
<ul id="menu">
    <li>@Html.ActionLink("Dashboard", "Index", "Home")</li>
@*(Name to display, Action Name, Controller Name) *@
    <li>@Html.ActionLink("About", "About", "Home")</li>
    <li>@Html.ActionLink("My Books", "Index", "Books")</li>
</ul>
 
@Html.ActionLink("Edit", "Edit", new { id=item.ID })
                @*(Name to display, Action Name, ID from model) *@

 

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

1
2
3
<p>Meet me @@ 4PM</p>
 
<p>Joe@hotmail.com</p>

 For Each Function

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@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>
    </tr>
}

 Date Time

1
2
3
4
5
<table>
<tr>
   <td>@DateTime.Now.Day</td>
</tr>
</table>

 Edit in Form

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
<fieldset>
        <legend>Book</legend>
 
        @Html.HiddenFor(model => model.ID)
 
        <div class="editor-label">
           Book Title
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </div>
        <div class="editor-label">
            Review
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Review)
            @Html.ValidationMessageFor(model => model.Review)
        </div>
 
        <div class="editor-label">
            Author
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Author)
            @Html.ValidationMessageFor(model => model.Author)
        </div>
        <div class="editor-label">
            Description
        </div>
        <p>
            <input type="submit" value="Save" />
        </p>
    </fieldset>

 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.

Filed Under: MVC Tagged With: ASP.NET, MVC, Razor

Subscribe to Newsletter

Archives

  • February 2019 (1)
  • January 2019 (2)
  • September 2018 (1)
  • August 2018 (1)
  • July 2018 (3)
  • June 2018 (6)
  • May 2018 (5)
  • April 2018 (2)
  • March 2018 (1)
  • February 2018 (4)
  • January 2018 (6)
  • December 2017 (5)
  • November 2017 (5)
  • October 2017 (3)
  • September 2017 (6)
  • August 2017 (2)
  • July 2017 (6)
  • June 2017 (5)
  • May 2017 (6)
  • April 2017 (1)
  • March 2017 (2)
  • February 2017 (1)
  • January 2017 (1)
  • December 2016 (6)
  • November 2016 (6)
  • October 2016 (1)
  • September 2016 (1)
  • August 2016 (1)
  • July 2016 (1)
  • June 2016 (2)
  • March 2016 (1)
  • February 2016 (1)
  • January 2016 (1)
  • December 2015 (1)
  • November 2015 (1)
  • September 2015 (1)
  • August 2015 (1)
  • July 2015 (2)
  • June 2015 (1)
  • May 2015 (4)
  • April 2015 (2)
  • March 2015 (1)
  • February 2015 (5)
  • January 2015 (7)
  • December 2014 (3)
  • November 2014 (4)
  • October 2014 (1)
  • May 2014 (1)
  • March 2014 (3)
  • February 2014 (3)
  • January 2014 (1)
  • September 2013 (3)
  • October 2012 (1)
  • August 2012 (2)
  • May 2012 (1)
  • April 2012 (1)
  • February 2012 (2)
  • December 2011 (1)
  • September 2011 (2)

Tags

Agile Apace Pig Apache Pig Apache Pig Latin Apache Pig Tutorial ASP.NET AWS Big Data Big Data Big Questions Book Review Books Data Analytics Data Engineer Data Engineers Deep Learning DevOps DynamoDB Hadoop Hadoop Distributed File System Hadoop Pig HBase HDFS HDFS Commnads IoT Isilon Isilon Quick Tips Learn Hadoop Machine Learning Management Motivation MVC NoSQL OneFS Pig Latin Pluralsight Podcast Project Management Python Quick Tip quick tips Scrum Splunk Streaming Analytics Tutorial Unstructured Data

Follow me on Twitter

My Tweets

Recent Posts

  • Learning Tensorflow with TFLearn
  • Hello World Tensorflow – How This Data Engineer Got Started with Tensorflow
  • DynamoDB Index Tutorial
  • 17 Deep Learning Terms Every Data Scientist Must Know
  • Splunk For Data Engineers

Copyright © 2019 · eleven40 Pro Theme on Genesis Framework · WordPress · Log in