My first Razor (ASP.NET WebPages) based app in WebMatrix

If you are following Scott Gu’s Blog or simply the ASP.NET Community, you would have definitely heard about WebMatrix and the Razor view engine.  More specifically you must have heard of something known as “ASP.NET WebPages”

The ASP.NET WebPages, Razor Engine as well as WebMatrix can definitely be confusing for many who have been into ASP.NET Development for sometime now.  Clearly, this is not for you, if you are hard core ASP.NET Web Developer and are happy with either Webforms or MVC based development.

However, if you are new to ASP.NET and would like something simple and clean (unlike the much more comprehensive webforms/MVC model), you would really want to start with the WebMatrix.  The WebMatrix is a tool that allows you to create web apps in a breeze.  Get an intro from www.microsoft.com/web/webmatrix  (more specifically download it along with the Web Platform Installer 3 Beta from here )

Note: Don’t miss to watch the intro video on WebMatrix at www.microsoft.com/web/webmatrix  

Having said that, I wanted to explore the WebMatrix tool as well as the Razor engine and to do that, I first downloaded WebMatrix.  Along with it came the Razor engine (ASP.NET WebPages folder in C: \Program Files\Microsoft ASP.NET)

To begin with, I opened WebMatrix and it gave me a nice looking welcome screen.

welcomescreen

As you can see, there are quite a lot of options to create site from WebAppGallery (most popular webapps such as DotNetNuke, Wordpress etc.,)

webgallery

or create site from templates (built-in starter kits to speed up development). 

webtemplate

These, for sure, would speed up your web development to great magnitude if you are starting with ASP.NET Development.

You can also chose to create a “Site from Folder” and chose a location to create your website.  I did that and I got a blank site.  It gave me the link to “Add file to my site” and a variety of file options therein

addfile

I chose the CSHTML file type since I would be using C# syntax in my webpage.  What it gave is a regular HTML code block as follows

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
   
    </body>
</html>

Now, my friend Janakiram MSV posted a nice status message on Facebook using PHP syntax on, how, when job, passion and hobby are the same, it gives an adrenaline rush.  I really liked the theme and wanted to use that for my first coding experience in Razor based apps in WebMatrix (I have to be careful here since WebMatrix allows you to create not just Razor based apps but even the popular web apps such as DotNetNuke and much more which are not necessarily Razor based)

So, here below is the syntax for the above logic of Jani

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
    @{
var passion = "evangelism";
var job = "evangelism";
var hobby = "evangelism";
}

<div id="source-of-happiness">
@if((passion == job) && (hobby == job))
{<p>Adrenaline rush !!</p>}
else

{<p>I hate monday mornings!</p>}

</div>
    </body>
</html>

If you are following so far with me (trying it along), you can just click on the “Run” icon in the top and select “Internet Explorer” to run the page.

RunIcon

The output for this obviously would be “Adrenalin Rush” since I have given the same direct string values to all the variables.  But getting this from database isn’t that difficult (would save it for a later post or read Scott Gu's post)

If you notice the syntax above, its all very few lines of code and you can switch between HTML and C# code seamlessly. (I hear experienced guys shout, ah wasn’t this kind of no no in the codebehind days?)

Agreed and this is one more way for developers who like spaghetti coding style.  More over, if you had to do this in a regular ASP.NET Page, you would need chunks of <% or <%= and switching is also not that straight forward.

And not just that.  I can now switch to the “Site” tab (down bottom)

tab

and do a lot of stuff.  For example, I want to add Database or Run a report I can use this screen to do that through a wizard

 siteui[6]
 

The “Run a report” uses the free SEO Toolkit and analyzes your site and provides a report on what all you need to fix for your site to the SEO optimized.  All within the same IDE.

I can also go back to the “Site” tab and check the “Requests” for my site and manage the “Settings” as well

requests

Needless to say, it provides a real Integrated tool to do a lot of web development, management and deployment (there is a link to find best web hosting offers as you can see in the previous screen shot.

If you want more comprehensive start up tutorial with Database etc.,  you can check Scott Gu’s post “Introducing WebMatrix” 

That’s my experimentation with WebMatrix and ASP.NET WebPages.  I hope you found it beneficial.

Cheers !!!

Print | posted on Thursday, July 29, 2010 3:02 AM

Comments on this post

# re: My first Razor (ASP.NET WebPages) based app in WebMatrix

Requesting Gravatar...
Excellent use of Razor, well done! I am going to try it now.
Left by Fred on Jul 30, 2010 3:20 AM

# re: My first Razor (ASP.NET WebPages) based app in WebMatrix

Requesting Gravatar...
congratulations. very nice post!
Left by perde kursunu on Jul 30, 2010 12:17 PM

# re: My first Razor (ASP.NET WebPages) based app in WebMatrix

Requesting Gravatar...
Very nice ! thanks.
Left by Prensin Günlüğü on Sep 26, 2010 9:06 PM

# re: My first Razor (ASP.NET WebPages) based app in WebMatrix

Requesting Gravatar...
Woow Thanks Very Nice :)
Left by DexterTurkiye on Nov 28, 2010 7:27 PM

# re: My first Razor (ASP.NET WebPages) based app in WebMatrix

Requesting Gravatar...
razor and web matrix both are awesome to use...
Left by Abhishek Luv on Sep 20, 2011 7:56 PM

Your comment:

 (will show your gravatar)