Getting Started

1 This Guide Assumes…

That when you approach a new web application project, your first thought isn’t to open the designer and start dragging-and-dropping your way to the finish line.
That you have a copy of Visual Studio 2008 (any SKU)
You are familiar with building basic ASP.NET applications (either WebForms or MVC) and know how to basically get an ASP.NET app working in IIS7 (Windows 2008, Windows 7).
That you plan on using IIS7 (see note below).
That you have a good working knowledge of C# 3.0 and .NET 3.5 in general including generics, lambda expressions, and using interfaces.
That you have a desire to build .NET/ASP.NET-based web applications and are looking for a web framework that doesn’t get in your way as much, allows you to test as much as possible, and helps you stay focused on your code and not pleasing your web framework.

FubuMVC can work with IIS6 (Windows 2003) and IIS6.1 (XP), but it’s more complicated to set up. This guide will focus on IIS7.

2 Introduction to FubuMVC

2.1 What is FubuMVC?

FubuMVC is a Front Controller-style MVC framework that tries to focus on SOLID principles, separation of concerns, DRY, and other critical concepts of rapid, friction/pain-free web development.

2.2 Motivation

The motivation and the reason for existence of FubuMVC is, as stated above, to provide the most rapid, friction-free web application development in .NET as possible.

2.3 What do I need to know before I get started?

FubuMVC is open source. That means it’s developed, for free, by dedicated individuals without a lot of free time (we have families and day jobs). While we try to provide a nice, polished experience for developer, it can’t always succeed in that objective.

FubuMVC will be rougher and more raw than something you might get from Microsoft or a 3rd party library vendor. Please bear with us as we improve and make FubuMVC better. Your feedback and suggestions are always welcome. Your assistance and time are welcome more, though :)

3 Setting Up Your First Project

3.1 Setup your working area

Create a folder somewhere on a drive and set it up like you normally set up all your other projects (i.e. with a lib or tools directory, a src or source directory, etc)

3.2 Where do I get FubuMVC from?

The fastest way to get started is by downloading the binaries from the FubuMVC web site.

You can also build FubuMVC from source, but that’s a little more complicated and involves more setup time. If you’re already a git-using, rake-aware developer, you can read our (todo) getting started guide for advanced developers.

Extract the FubuMVC ZIP into your lib/tools folder.

3.3 Starting a new project

FubuMVC projects are just like normal ASP.NET Web Applications. If you’re using Visual Web Developer or Visual C#, start by creating a new solution and adding a new project of type “ASP.NET Web Application Project”.

ASP.NET Web Application Projects start out with a lot of extra fluff (tons of unnecessary assembly references, a HUGE web.config with a bunch of superfluous junk, etc).

You may optionally wish to tidy things up in your new project and remove the App_Data folder and the Default.aspx file (and code behind) since they are not necessary for this tutorial. You may also wish to remove all the System.Data.*, System.Drawing, System.Xml, and extra System.Web.* references (but not System.Web itself) references.

3.3.1 Taking an Axe to the XML Overgrowth in the Web.Config

We recommend you clear out your web.config and start with the template below. The important parts of this web.config file are:

The System.Core assembly references
The stuff to set the project up for .NET 3.5
The UrlRoutingModel


<?xml version="1.0"?>

<configuration>

  <appSettings/>
  <connectionStrings/>

  <system.web>
    <compilation debug="true">
      <assemblies>
        <add assembly="System.Core, Version=3.5.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/>
      </assemblies>
    </compilation>
    <authentication mode="None" />
    <customErrors mode="RemoteOnly"/>
    <pages>
      <controls>
        <add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
        <add tagPrefix="asp" namespace="System.Web.UI.WebControls" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
      </controls>
    </pages>
    <httpModules>
      <add name="UrlRoutingModule" type="System.Web.Routing.UrlRoutingModule, System.Web.Routing, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
    </httpModules>
    <httpHandlers>
    </httpHandlers>
  </system.web>
  <system.codedom>
    <compilers>
      <compiler language="c#;cs;csharp" extension=".cs" warningLevel="4"
                type="Microsoft.CSharp.CSharpCodeProvider, System, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089">
        <providerOption name="CompilerVersion" value="v3.5"/>
        <providerOption name="WarnAsError" value="false"/>
      </compiler>
    </compilers>
  </system.codedom>

  <system.webServer>
    <validation validateIntegratedModeConfiguration="false" />
    <modules runAllManagedModulesForAllRequests="true">
      <remove name="UrlRoutingModule" />
      <add name="UrlRoutingModule" type="System.Web.Routing.UrlRoutingModule, System.Web.Routing, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
    </modules>
    <handlers>
      <add name="UrlRoutingHandler" preCondition="integratedMode" verb="*" path="UrlRouting.axd" type="System.Web.HttpForbiddenHandler, System.Web, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" />
    </handlers>
  </system.webServer>

</configuration>

We’ll give you a second to catch your breath. And this is the SHORT version. Sorry we had to expose you to XML. This should hopefully be the last of it. FubuMVC looks unfavorably at XML and didn’t send it any Christmas cards last year (and probably won’t be next year for that matter, thank you).

3.3.2 Adding Assembly References

Right-click on your project and choose “Add Reference”.

While you wait for the “Add Reference” dialog to appear in Visual Studio 2008, you might consider the following activities: Reading a book to your child or someone else’s child, doing your taxes. Twice, or finally solving that “Hard” Sudoku puzzle you’ve been complaining to your friends about recently.

Click the “Browse” tab and navigate to the lib/tools folder you created earlier and locate the folder where you extracted the contents of the FubuMVC ZIP file to. To make things easier, reference all the DLLs in this folder. You don’t need to this, but it makes things easier so just trust me.

3.3.3 Adding and Configuring the Global.asax

Next, right-click on your project in Solution Explorer, click Add, then New Item. From the “Add New Item” dialog, select “Global Application Class”. This should add a new Global.asax file with the associated “code behind” CS file.

Open this file and remove all the guts of the Global class (all the “Application_Start” type methods). the Global class should be an empty class when you’re done.

Change the Global class to derive from FubuStructureMapApplication instead of the default Application.

Your Global.asax.cs file should now look something like this:


    public class Global : FubuStructureMapApplication
    {
    }

4 Adding your first action and view

You may have heard something about a “controller” from other frameworks. Forget about that for now. Let’s start simple. The bare minimum you need is an Action (a method on a class somewhere) that returns a viewmodel (a plain ol’ C# class) and renders a view (a WebForms/ASPX page to keep it simple for this guide).

In FubuMVC, you don’t have Controllers like in some other .NET MVC frameworks. You can call them Controllers if it makes you feel better, but you don’t have to. By default, FubuMVC assumes you’ll call the classes that contain your action methods FooController but that’s the only time you’ll see the word Controller. You can remove this if you wish and tell FubuMVC what your convention is. That’s covered in another guide.

4.1 Adding the Home action and models

Add a folder to your app called “Controllers” and under that another folder called “Home”. In there, add a new C# class file (let’s call it Home.cs) and declare a HomeController class in this file. Create another class called HomeInputModel and another class called HomeViewModel. Add one more class called HomeView and have it derive from FubuPage<HomeViewModel>. In the end, you should have four classes in this file:

HomeController
HomeInputModel
HomeViewModel
HomeView

Next, add a method to HomeController that takes in a HomeInputModel and returns a HomeViewModel. When you’re all done, it should look something like this:


    public class HomeController
    {
        public HomeViewModel Home(HomeInputModel inputModel)
        {
            return new HomeViewModel();
        }
    }

    public class HomeInputModel
    {
    }

    public class HomeViewModel
    {
    }

    public class HomeView : FubuPage<HomeViewModel>
    {
    }

4.2 Adding the view

Next, add a new WebForm to the “Home” folder (right next to the Home.cs file). Call this HomeView.aspx. Visual Studio should also create a code-behind (HomeView.aspx.cs) and a designer file (HomeView.aspx.designer). You can delete both the designer file and the code-behind file.

Because of HomeView in your Home.cs file, your view (HomeView.aspx) is strongly typed to HomeViewModel and now exposes a new Model property. You can add properties to HomeViewModel and access them via the Model property in your view. We’ll get to Models and binding in another guide. For now, let’s just keep it simple.

Next, clean all the junk out of your view (HomeView.aspx) and make it simple. For example:


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="FubuMVC.GuideApp.Controllers.Home.HomeView" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
  <head>
    <title>Home</title>
  </head>
  <body>
    Hello, World!
  </body>
</html>

4.3 Compile and verify

Compile your app (CTRLSHIFTB) and make sure everything compiles. Next, you’ll bring up your application and make sure it works.

5 Configuring IIS and bringing up the app

Open up your IIS manager and add a new application called fubuguide and point it at the folder which contains the code you’re writing for this guide.

Next, open your browser and navigate to http://localhost/fubuguide/_fubu/chains. You should hopefully see something like this:

If you see this screen, that means FubuMVC is properly configured. Next, try to hit the /home/home route in your application (something like http://localhost/fubuguide/home/home) and you should see “Hello, World” display.

Congratulations! You’ve made it through this guide.

6 Summary

In this guide you’ve seen how to :

Set up your first FubuMVC application
Add an action, models, and a view
Launch the app, view the diagnostics, and the output of your action

Since this is a getting started guide, there’s a lot we did not cover. This getting started app isn’t very useful right now.

Next, you’ll probably want to:

Learn a little bit about the philosophy and design behind FubuMVC and why it’s different from other MVC frameworks (and why this helps you)
Configure your own FubuRegistry to start setting up your own conventions
Discover what conventions are available to you
Adding functionality in a convention and compositional way (harnessing all of FubuMVC’s power)
Embrace and extend FubuMVC

(these will be turning into links as we get more guides done)

Guides