Click here to monitor SSC
  • Av rating:
  • Total votes: 64
  • Total comments: 9
Jinath Premaratne

WebMatrix: Website Development made easier?

05 October 2010

Microsoft's WebMatrix Beta 2 comes with some interesting technologies, such as Razor and IIS Developer Express. It promises a much simpler way of getting Web Applications up and running, either by using a configurable package, or by writing code from scratch. Jinath investigates to see what's in store with WebMatrix.

When you want to build and host a web application, you will need to have a web server, a database server and a mail server. It is the same whether you are writing a web application for a small local grocery store or writing a large corporate Enterprise Resource Planning (ERP) system. Apart from some differences in server configurations and some tweaks in the code base, you will have the same basic requirements for servers and you’d still need the same level of competency in a programming language.

This basic requirement can cause a number of problems. The local shop can’t afford the same investment in servers as a large Corporation or government institute. Even if the latter can make the investment, what if there are insufficient in-house skills to develop or maintain the web application?

What compromise or alternative strategy is possible if your customers were facing these problems? Will you ask them to discard the idea of having a Web application? Are there adequate compromise solutions that will make it possible?

With WebMatrix, Microsoft are hoping that it will be much easier to develop web applications or sites regardless of the size of the system and for whom it’s going to cater. Although it is still in beta stage it may already give you all that you need. So let’s see what WebMatrix is all about.

Microsoft’s definition for WebMatrix goes like this, “WebMatrix is everything you need to build Web sites using Windows. It includes IIS Developer Express (a development Web server), ASP.NET Web Pages (a Web framework), The Razor templating engine, and SQL Server Compact (an embedded database).”

And it’s free.

What can you do with WebMatrix?

With WebMatrix you get two main options. The first alternative is to start coding using the in-built IDE, either from scratch, or by adapting a template site that is provided with the application. The second alternative is to use the WebMatrix tool to install one of the many freely-available open-source web applications such as Umbraco, Joomla! or WordPress, using WebMatrix’s built-in directory; This will guide you through the tasks of installing, customizing, and deploying your Web application.

WebMatrix will allow you to manage IIS express and SQL CE 4 database. It will also help you to find a hosting provider if you don’t already have one.

But wait! I have mentioned the phrase “start coding from scratch” and also I have told if you use WebMatrix you don’t need a high-level of competency in a programming language. Well isn’t that contradictory? The answer to that is that the new ASP.NET Web pages use the new Razor syntax. Classic ASP programmers should love this.

Razor at the Cutting Edge

Razor syntax can be embedded in the new ‘ASP.NET Web Pages’ framework. This is a more lightweight framework than WebForms; it doesn’t use server controls, but makes it far easier to integrate server-side code with HTML. It uses a simple ‘inline page’ model, rather than MVC. The page is little more than an HTML page with some code added where needed, rather like PHP but with the full power of the .NET framework available. Unlike PHP, it supports concepts such as layout pages. ASP.NET Web Pages can also run c# or VB.net server-side code that the web server recognizes via the view-engine, and which it processes when the page runs.

ASP.NET Web Pages uses Razor as its templating engine, though it could equally use aspx or Spark. .It acts as a new alternative view-engine to ASP.NET that renders server tags and code inside your HTML and will generate the appropriate HTML output for your browser. The razor view-engine acts like a parser to the underlying ASP.NET framework.

The Razor templating engine will soon be available as an optional view engine alternative to ASP.NET MVC (model-view-controller) users with the upcoming release of ASP.NET MVC 3.0. (now in Beta ). This doesn’t mean that the same restrictions would apply as to ASP.NET Web Pages, and the use of Razor has no effect on how you write your controllers or other parts of your app. You will find that the “Add New View” dialog box will get an additional drop-down to select the View Engine that you prefer, “ASP.NET ASPX or Razor” along with any third party View Engines that you have installed. If this is selected, you will get Visual Studio 2010 syntax highlighting, which makes it far easier to distinguish between HTML code and Razor code.

You may think that this is yet another new programming language that we’ll have to learn, but Razor isn’t a language at all, but a templating engine. Blocks of VB or C# code or variables are simply embedded in the page with an @ prefix to distinguish them. The Razor syntax lets you add server C# or VB code to the normal client content. If there's server code in the page, the server runs that code first, before it sends the page to the browser. It can be written using any text editor. Anyone with basic C# or VB.NET skills with HTML, CSS and JavaScript knowledge can easily adapt to this. Also any developer who is familiar with PHP and Classic ASP would pick it up without difficulty. Microsoft’s main aims behind the design of Razor were compactness, expressiveness, and flexibility.

Here is a simple example of an HTML page with Razor

<!DOCTYPE html>

 

<html>

    <head>

        <title>Testing out Razor</title>

    </head>

    <body>

 

@{

    var total = 345.45;

    var CreditOrDebit = (total>0 ? "in credit" :"in debit");

 }

<!-- Inline expression -->

<p>The value of your account is: $@total @CreditOrDebit</p>

 

<!-- Multi-statement block. -->

@{

    var maybeNot =(total>0 ? "" :"not");

    var greeting = "a good time to buy our special offer on holiday insurance!";

    var weekDay = DateTime.Now.DayOfWeek;

    var greetingMessage = weekDay + " is maybe " + maybeNot + greeting;

}

<p>Hi! @greetingMessage</p>

    </body>

</html>

Which produces...

The value of your account is: $345.45 in credit

Hi! Monday is maybe a good time to buy our special offer on holiday insurance!

As you can see all the razor code goes after the @ symbol and you don’t need any symbols to tell the end of the razor code (like the "%>" in ASPX), this is because razor can distinguish between HTML and other .NET language syntax.

If we were to write a for loop as embedded code block as in past, we have to write as this.

Here a list of students are been fetch from database and populated to List of student objects.

        <ul id="students">

            <%foreach (var s in students)

              {%>

            <li>

                <%=s.Name%>

            </li>

            <%}%>

        </ul>

With Razor the syntax would be this.

        <ul id="students">

            @foreach(var s in students){

            <li>@s.Name </li>

            }

        </ul>

You can see how simple it is. The magic is with the ‘@’ sign. It uses fewer keystrokes in order you to get what you want compared to the old embedded way.

Here is a fuller example using database code to get a paged listing of the staff of AdventureWorks. It uses one of the extremely handy ‘helpers’ that are supplied with WebMatrix called WebGrid. It reads some of the contents of a view into a WebGrid and displays it. In a full example, you’d use CSS to build up the example to give it the exact appearance that you’d want.

@{

    var db = Database.Open("adventureworks");

    var selectQueryString = "SELECT Firstname +COALESCE(' '+Middlename+' ',' ')+lastname AS name, Jobtitle, Phone,  emailAddress FROM HumanResources.vEmployee order by lastname";

    var data = db.Query(selectQueryString);

    var grid = new WebGrid(data, defaultSort: "name", rowsPerPage: 20);

}

<!DOCTYPE html>

<html>

    <head>

        <title>Displaying Data Using WebGrid </title>

    </head>

    <body>

    

    <h1>AdventureWorks Employees</h1>

    

@grid.GetHtml(

  columns: grid.Columns(

    grid.Column("Name"),

    grid.Column("JobTitle"),

    grid.Column("Phone" ),

    grid.Column("emailAddress")

    )

)

</html>

Which gives this, allowing you to page through quite a large result and see the rows sorted by any of the columns...

One thing that you’ll notice from this example is that the conventions to access the database are simplified from by a wrapper. This is done to make it easier to write code for a SQL Compact database and then port it to SQL Server as the website usage grows.

In the current Beta, there is no intellisense with Razor. This is promised for the released product, though.

What you get with WebMatrix

You can use WebMatrix’s inbuilt editor to code Razor syntax so you don’t need to install Visual Studio.

You will also have an IIS 7 Developer Express which is a free lightweight development Web server. This Self-contained version of IIS optimized for developers. With the IIS 7 installed, you can take advantage of built-in dynamic caching, IIS Media Services for high definition media experiences, support from ASP.NET to PHP and lot more, all for free. It has the advantage of allowing you to run one or more websites from the command line, either from a configuration file or the application folder. This makes it easy to set up most IDEs to work with WebMatrix, so that you are not forced to use WebMatrix or Visual Studio to develop Razor applications.

Also you will have the ASP.NET web framework. So all the razor syntaxes you write will run on top of ASP.NET web framework. Since ASP.NET web framework runs on top of .NET framework, you can get most of the benefits that .NET framework offers.

SQL Server Compact Edition (SQL CE) is a free, embedded, database engine. SQL CE stores databases as files on disk within files with a .sdf file extension. SQL Server Compact edition database engine runs in-memory within your application. It can be used in production if there is only a light amount of traffic to your site, or else you can upgrade your SQL CE databases to use SQL Server Express, SQL Server, or SQL Azure without a great deal of modification.

Isn’t that all you need in order to develop and host a site? Basically yes, but WebMatrix makes your life easier with the database and HTML helpers for performing common web-tasks. We’ve seen one web helper already, the WebGrid. There are some other built-in helpers that do tasks such as uploading and cropping images, capcha, mail, linking to social networking sites, drawing a chart or playing video clips.

Another cool feature in WebMatrix is a built-in search-engine optimization (SEO) tool. This tool will inspect your web application and provides suggestions that can help increase the ranking.

The Beta 2 also includes the Nupack integration that allows you to installlibraries into the application you are working on.

As I mentioned before, when it comes to hosting, it will help you to find a Web host that fits your requirements and budget, and the deployment will be easy with the use of built-in publishing support for FTP, FTPS, and Web Deploy.

Conclusion

With WebMatrix, there seems to be all you need to build and maintain a web application. By using it, a software provider should be able to build a system cheaper and quicker, so it would be feasible even for a local grocery store to use it. Even a large corporation should easily find a benefit from using WebMatrix, without demanding a large commitment from the IT department. Whether it succeeds is entirely dependent on the quality of the final product: To succeed, the help will need to be exceptional, the example templates comprehensive, and the helpers made to fit the whole gamut of common requirements for the average site. We look forward to the completed product, but it promises well.

you can see more about WebMatrix on ScottGu's blog 'Announcing NuPack, ASP.NET MVC 3 Beta, and WebMatrix Beta 2' and download WebMatrix Beta 2 from here.

submit to reddit
Jinath Premaratne

Author profile:

Jinath Premaratne is a Microsoft MVP for ASP.NET since 2005. Also a MCAD, Has over 9 year’s experiences in web programming. He is the leader of the Colombo .NET user group. He is working as a Senior Software Engineer / Tech lead at Teamwork Technology. His blog is http://jinath.wordpress.com.

Search for other articles by Jinath Premaratne

Rate this article:   Avg rating: from a total of 64 votes.


Poor

OK

Good

Great

Must read
Have Your Say
Do you have an opinion on this article? Then add your comment below:
You must be logged in to post to this forum

Click here to log in.


Subject: This is very helpful article
Posted by: Hiruni Vithanage (not signed in)
Posted on: Thursday, October 07, 2010 at 9:31 AM
Message: Hi
This is very helpful article
Thanks

Subject: Interesting Article
Posted by: Madura Kulatunga (not signed in)
Posted on: Thursday, October 07, 2010 at 9:51 AM
Message: Hi Jinath, This is really helpful article, Thanks lot.

Subject: nice one
Posted by: kaminda rathnayake (not signed in)
Posted on: Thursday, October 07, 2010 at 10:07 AM
Message: informative article.. nice

Subject: nice and clean
Posted by: Aneef (view profile)
Posted on: Friday, October 08, 2010 at 10:19 PM
Message: good one jinath :) thumbs up

Subject: Mail Server?
Posted by: Tuck (view profile)
Posted on: Monday, October 11, 2010 at 4:53 AM
Message: The one thing you mentioned at the open is needing a mail server for testing. What is available other than Mailster for testing email before deployment?

Subject: RE:Mail Server?
Posted by: jinath (view profile)
Posted on: Monday, October 11, 2010 at 8:22 AM
Message: HI
i normally use in-house exchange server for testing.. mail server or a mail helper would be a good addition for web matrix.
also you and see this tool http://invalidlogic.com/2008/10/29/introducing-papercut

Subject: Good Article
Posted by: Yalinda (not signed in)
Posted on: Monday, October 11, 2010 at 8:55 PM
Message: Hi.... really great explanation of webmatrix. thanks
http://yalindaliyanagamage.blogspot.com/

Subject: Awesome...!
Posted by: Chandana (not signed in)
Posted on: Monday, October 11, 2010 at 11:19 PM
Message: Jump starting article for WebMatrix... super..

Subject: Great Aricle
Posted by: sevenboy (view profile)
Posted on: Sunday, November 06, 2011 at 7:45 AM
Message: i will go download and install webmaxtrix now ......... heee

 

Top Rated

Acceptance Testing with FitNesse: Multiplicities and Comparisons
 FitNesse is one of the most popular tools for unit testing since it is designed with a Wiki-style... Read more...

Acceptance Testing with FitNesse: Symbols, Variables and Code-behind Styles
 Although FitNesse can be used as a generic automated testing tool for both applications and databases,... Read more...

Acceptance Testing with FitNesse: Documentation and Infrastructure
 FitNesse is a popular general-purpose wiki-based framework for writing acceptance tests for software... Read more...

TortoiseSVN and Subversion Cookbook Part 11: Subversion and Oracle
 It is only recently that the tools have existed to make source-control easy for database developers.... Read more...

TortoiseSVN and Subversion Cookbook Part 10: Extending the reach of Subversion
 Subversion provides a good way of source-controlling a database, but many operations are best done from... Read more...

Most Viewed

A Complete URL Rewriting Solution for ASP.NET 2.0
 Ever wondered whether it's possible to create neater URLS, free of bulky Query String parameters?... Read more...

Visual Studio Setup - projects and custom actions
 This article describes the kinds of custom actions that can be used in your Visual Studio setup project. Read more...

.NET Application Architecture: the Data Access Layer
 Find out how to design a robust data access layer for your .NET applications. Read more...

Calling Cross Domain Web Services in AJAX
 The latest craze for mashups involves making cross-domain calls to Web Services from APIs made publicly... Read more...

Web Parts in ASP.NET 2.0
 Most Web Parts implementations allow users to create a single portal page where they can personalize... Read more...

Why Join

Over 400,000 Microsoft professionals subscribe to the Simple-Talk technical journal. Join today, it's fast, simple, free and secure.