Previous Posts in Series:
- FubuMVC From Scratch Part 1 – Basic project structure setup
- FubuMVC From Scratch Part 2 – FubuMVC configuration and Controller setup
Preparing for our View
Another founding principal of FubuMVC is to have little to no logic in the View, no logic is preferred. So when we add .aspx pages, we will delete the code behind files since we won’t be using them. We will need another file in our Views folder named “View_Page_Type_Declarations.cs” We will declare all of our View Pages in this file.
This file looks like this at the moment:
You will notice that we don’t have a FubuSamplePage class anywhere in our project. So let’s go ahead and add the 3 main classes all of our Views and controls will inherit from.
We also need to add a reference to System.Web to our FubuSample.Core project, so do that quickly before we move on.
We need to create an interface that all of our pages will implement to give us some standard results. Our interface just says that every page that implements IFubuSamplePage will provide an object that is our Model or ViewModel. This class just goes in the FubuSample.Core.Web folder.
The rest of these classes will be created in the Core.Web.WebForms folder. These pages implement our interface as well as a FubuMVC View interface so the framework can work with our view pages.
Once we have these three classes all setup we are ready to start adding some views!
Creating a Site.Master
Let’s go ahead and create a Site Master file so we have a place to display our content once we create it. First though, we need to declare our SiteMasterView in view_page_type_declarations, so add this line to that file:
Add another folder to the Views folder in our Web project, named Shared. Inside this folder create a new Site Master File. I am changing a few things in this generated file
- Rename the ID for the main ContentPlaceHolder to be “MainContent” instead of ContentPlaceHolder1.
- Delete the code behind files
- Modify the page declaration like so:
- Delete “AutoEventWireup="true"
- Delete CodeBehind=”Site.master.cs”
- Change Inherits to “SiteMasterView”
We can customize this further later on if we want to.
Adding the Corresponding View for our HomeController
Since we have our controller ready to go, lets setup a View in our Web project. In the Views folder add another folder named Home. Inside this folder create a new .aspx web form named Index (Index corresponds with our method name in our controller)
Once this file is created, go ahead and delete the two code behind files, and all the html code that was generated.
Next modify the page declaration in Index.aspx from:
Now instead of cramming a bunch of logic into our view we will use some of FubuMVC’s built in Html helper magic to make this simple. Add the following Html/C# code to your Index.aspx
What we are doing here is saying that For Each Product in our list Products render part of the view using a UserControl called ProductInfo, let’s make this control now.
Creating ProductInfo User Control
Back to View_page_type_declarations real quick so we can define our UserControl. Add the following line to your view page type declarations file:
Now add a new user control to the Views/Shared folder named ProductInfo, same as before delete the code behind files and make your ascx file look like this:
We are almost ready to see if our labor has produced any fruit. But we need to modify our Web.config file. I am getting tired so I am not going to go in depth on what all has to change, I just copied the AltOxite Web.Config and modified what needed to be changed. Here are the results:
I will tell you some of the more important aspects though:
- Add UrlRoutingModule to <httpModules> under <system.web>
- Add all the namespaces your projects uses be default under <namespaces> inside <pages> under <system.web>
With any luck, this should work when you debug it. Using the integrated Visual Studio Web server you will have to manually type “/Home” at the end of your localhost address.
You can find some information on running a FubuMVC project with the Visual Studio Web server out on the wiki