ASP.NET from Scratch: Views with MVC3

Jeremy McPeak on Apr 13th 2011 with 30 comments

Tutorial Details

Subject: .NET MVC3
Difficulty: Moderate
Format: Video

This entry is part 10 of 10 in the ASP.NET from Scratch Session
« Previous

ASP.NET MVC3 is now available, and it includes a new View engine called Razor. In this lesson (dubbed 9.5), we download the MVC3 bits and look at Razor and rebuild the application from the previous lesson with the new View engine.

Subscribe to our YouTube page to watch all of the video tutorials!
Download the Video

Press the HD button for a clearer picture.

Jeremy McPeak is jwmcpeak on Codecanyon

Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By Jeremy McPeak

Rollover to read this author's bio or click through to see a full list of posts by this author.

I started my development career on the client-side writing JavaScript and DHTML components in my spare time. In 2005, Nicholas C. Zakas asked me to join him in writing the first edition of Professional Ajax for Wiley Publishing. Since Professional Ajax, 1st Edition, I've been blessed to take part in other book projects: Professional Ajax 2nd Edition, and Beginning JavaScript 3rd and 4th editions.

Plus Premium

Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more

Nedim
This is great. :) Thanks a lot.
http://webprogramming360.com/ Web Programming 360
Sorry not into ASP! :( Go PHP or Javascript more popular and interesting!

Eastern Block
Thank you for speaking for the entire Web Development community!
Whether it’s popular or interesting to you is really just your opinion. ASP MVC3 is very interesting to many people, if it wasn’t MIX11 would be pretty empty this year.

Nick
Ha! Well you for one didn’t watch it, nor did even the net tuts editors, or the author of this video. Look at 12 minutes in, the screen is completely blank for 5 minutes. Also, the text is unbearably tiny. Zero quality assurance guys, good job. Pretty hilarious though.
Eastern Block
I know, I watched it, but it still has nothing to do with the point I was making before.
http://www.jeffrey-way.com Jeffrey Way
Hey guys – that’s fixed now. Sorry for the trouble!

http://www.github.com/dotink/inkwell Matthew J. Sahagian
I am a PHP developer who also happens to run Linux 100% of the time and have been absolutely into this series since it started. Although I have not taken the time to actually develop or toy with ASP.NET too much, it’s extremely interesting simply from an MVC and architectural point of view.
In fact, I’m more interested in these videos than a lot of the other material on Nettuts simply because it’s new and refreshing to me. And, as you may or may not know, these tutorials and working with C# and ASP.NET MVC is not limited to Microsoft only, Mono provides a capable application server as well as the excellent Monodevelop IDE… Keep ‘em up Jeremy.
My only complain on this one is he kept calling an @ an ampersand. Not sure if it actually has a name other than “at sign” — some have waged to call it an “atmark.”

http://www.wdonline.com/ Jeremy McPeak
Author
Thanks, Matthew.
Yikes, I called it an ampersand? I’m an idiot.
http://www.github.com/dotink/inkwell Matthew J. Sahagian
I spoke too soon as I only got to watch the first half before I left. It also appears that the screen goes black from 11:46 – 15 or so. That’s my second complaint.
http://blog.donwilson.net Don Wilson
I’ve heard the @ referred to as an arroba or a monkey tail. I personally like the name monkey tail.
I also noticed the black screen during the screencast. It was from about 11:30 to 15:30.

Dave
Jeremy-
The video was great for about the first 10 minutes. After that, at least for me, the screen went black although the audio continued just fine and I could still see your mouse moving. I was watching with HD turned on, in case that makes a difference.
By the way, consider this a request for more ASP.NET videos/tutorials. Nothing wrong with PHP and JavaScript as mentioned in one of the previous comments. But, there’s a huge chunk of the web development world that’s being ignored if Microsoft technologies are dismissed out of hand.
nettuts
Please 1024 x 768
Tony Jansen
The screen goes black in the 2nd half, with only a mouse cursor visible.
Myke
Razor is the sexiness. Im excited to watch this later to see if there are some nice tips and tricks. Glad to see .NET MVC tuts back!
Panos
Nice tutorial involving views and models. Don’t concern yourself with the “ampersand” mistake :)…it happens.
Asp.Net for me has always been a superior web development technology than pretty much everything else…not perfect, just better. But now with MVC and MVC3 in particular things are really moving forward.
No more file based development logic, clean url routing and not rewriting and much more.
I’m really looking forward to more cool .Net MVC videos from nettuts.
Mad Myche
The actual name assigned to that symbol by ASCII and UTF is “Commercial At”. I still will use the popular “at sign” for this symbol that was made up by some typewriter company
Matt
Great timing for this. So few good tuts on mvc3 – not even any books yet. Hopefully the video will get fixed and we’ll get to see the missing section mentioned above.
Nick
Great video! Keep the ASP.NET MVC vid’s coming! Very useful.
PS – Just echoing what Don said above. The video goes black for a while…
Norm
Thanks for the ASP.NET screencast. I hope to see more .net related content on nettuts.
http://www.github.com/dotink/inkwell Matthew J. Sahagian
On the actual screencast and content… I can’t say I’m a fan of the syntax. One of the things that has irked me a little bit throughout these screencasts is, even in traditional views, the need to add non-HTML, but framework related information. This now seems to be echoed in the way the ViewBag (?? I think that’s what it was called) is handled.
One of the great benefits to MVC is the separation of concerns, and the idea that you could have designers or people with limited knowledge of the backend working in the front end code in the views. While some logic might need to be known, I feel with complex views there ends up being various blocks of code which are independent really of the markup and represent the View more as an object — in my mind much of this should be moved and/or handled by the controller in prepping/loading the view.
With regards to the Razor syntax, The @ just seems fairly out of place. While it may look better when embedded in attributes, it certainly does not look better for blocked logic such as loops and it seems inconsistent or confusing that the example here goes something like…
@for
{
@…
}
Why are the curly braces parsed without the @? The benefit of traditional ASP tags or for that matter PHP short tags is that for logic blocks they tend to replicate the look and feel of markup. PHP long tags are actually, in my mind, much better suited for this in the context of XML/XHTML where they feel very much like legitimate processing instructions (http://www.javacommerce.com/displaypage.jsp?name=pi.sql&id=18238).
Ideally I would like to see a mixed syntax where echos are perhaps using this razor style, and logic is using a more tag-like syntax.
http://www.github.com/dotink/inkwell Matthew J. Sahagian
On the actual screencast and content… I can’t say I’m a fan of the syntax. One of the things that has irked me a little bit throughout these screencasts is, even in traditional views, the need to add non-HTML, but framework related information. This now seems to be echoed in the way the ViewBag (?? I think that’s what it was called) is handled.
One of the great benefits to MVC is the separation of concerns, and the idea that you could have designers or people with limited knowledge of the backend working in the front end code in the views. While some logic might need to be known, I feel with complex views there ends up being various blocks of code which are independent really of the markup and represent the View more as an object — in my mind much of this should be moved and/or handled by the controller in prepping/loading the view.
With regards to the Razor syntax, The @ just seems fairly out of place. While it may look better when embedded in attributes, it certainly does not look better for blocked logic such as loops and it seems inconsistent or confusing that the example here goes something like…
@for
{
@…
}
Why are the curly braces parsed without the @? The benefit of traditional ASP tags or for that matter PHP short tags is that for logic blocks they tend to replicate the look and feel of markup. PHP long tags are actually, in my mind, much better suited for this in the context of XML/XHTML where they feel very much like legitimate processing instructions (http://www.javacommerce.com/displaypage.jsp?name=pi.sql&id=18238).
Ideally I would like to see a mixed syntax where echos are perhaps using this razor style, and logic is using a more tag-like syntax (PHP/ASP hybrid ahead):
encodeID();”>
…
Lastly, how does this play out if you have static content containing an @? Is there a method for escaping this? Traditional tags offer unlikely collisions, while @ seems fairly commonplace.

http://www.github.com/dotink/inkwell Matthew J. Sahagian
As usual comment system ate my code, but it’s my own fault:
Example of ideal syntax:
<ul>
<foreach ($members as $member) { >
<li id=”member-@$member->encodeId();”>
….
</li>
< } >
</ul>
Panos
“Is there a method for escaping this? ”
You escape the @ with @@. That wasn’t so hard was it? And you don’t even have to escape it for email addresses..it picks it up automatically.
Come on guys the razor is easy, easy and easy. Curly braces or any braces just add to the complexity of the markup. The need to add C# logic in the View is just for rendering purposes and even if you break some rules it is far more better than the spaghetti code in PHP or in classic ASP and of course better than the whole runat=server WebForms logic.

Jesse
I agree with Panos, Razor is dead simple, but if you’re looking for something closer to your “ideal” syntax, there is also the Spark View Engine (http://sparkviewengine.com/)…and if you’re a Ruby guy that is into HAML, we have NHAML as well.
http://www.github.com/dotink/inkwell Matthew J. Sahagian
@Panos
I wasn’t saying it was difficult, I didn’t catch it mentioned in the video so I was just curious.
From what I could tell Razor did not resolve curly braces on things like for loops. Indeed the example within the screencast used something to the effect of:
@for(var i in array)
{
@…
}
My point was more the inconsistency of requiring an @ before the for, and the internal code but not prior to the braces. My point about classic ASP or PHP tags is that the demarcation of what is code and what is not is clearly visible within confined beginning and end tags. All this amounts to is the creation of a start tag without an end tag. If code is preceded by @, I would expect it to be more like this:
@ for (var i in array) {
@ …
@ }
Not @ on some lines and not others. Of course my assumption is that it “knows” that a for loop may be preceded by an { so parses that appropriately, and also knows it will end with an } so parses that appropriately. That’s fine, but it’s not explicitly clear what the parsing rules are.
While there is certainly spaghetti code in the PHP world, there is nothing inherent about PHP (at least not for the past several years) that produces spaghetti code. The following link is an example of my framework’s equivalent to a “master page”: https://github.com/dotink/inKWell/blob/master/user/views/html.php — while this, much like ASP.NET MVC, with razor or not, has PHP logic in it, the logic is strictly limited to outputting and placing view data/partials — my concern is the actual assignment of data in the view as seems to be the case with the ViewBag.
Comparing ASP.NET MVC to any one of the modern PHP MVC frameworks, both with competent developers will result in comparatively clean code and good separation of concerns.
This method is indeed better than “runat=server” – that doesn’t mean it doesn’t have it’s oddities.
Panos
Yes i see your point. Seeing in your example that you value clean code, lambda expressions etc…. i believe that we like the same thing, just from different angles. I wouldn’t concern my self so much with the parsing rules of .net mvc. Keep in mind that it was created with simplicity as a rule. As you said the parser knows where to transition from c# to html without looking for an explicit token as a curly brace or something else.
It is smart enough to read through c# code to html and vice versa.
That’s why the aspx engine was never a perfect match for mvc 1 & 2. The braces always seem a little hassle to deal with even if you make ‘em as clear as it gets as you did in your example. But PHP was not designed for that (it is just flexible enough to accomplish pretty much everything).
I guess at the end of the day it’s just a matter of personal choice and i agree that as things are moving forward the syntax of any language will keep being simplified and more easy to read and write. The .NET MVC has many other cool things to offer besides Razor…. seperation of concerns, convention over configuration, Url routing (not re-writing), as always object oriented programming, perfect match with the Entities framework … and much much more.

eric
you all realize large corporation run a majority of their intranet sites on ASP.NET don’t you? food for thought when you are looking for work.
Esmael
Hi, I hope you continue posting more video tutorials.
http://www.BlaineSch.com Blaine
The text was really hard to read. Usually you are good about zooming in. You kept saying ampersand(&) so when I was taking notes I kept writing them out, but you actually meant at signs(@).
http://www.iapcsolutions.com iapcsolutions
I just got a premium membership, and this is the first video I clicked on. I was very disappointed to be greeted with an ad before the video started. Should there be ads for premium members?