This section will guide you in creating a very minimal uCodeFirst-powered Umbraco site with only one document type and one template.

It assumes basic knowledge of Umbraco.

For the purpose of the demonstration we will create a simple website for the Contoso company.

 

1. Create the Visual Studio solution and install Umbraco

We will start by creating a brand new Visual Studio solution that will host two projects : one for the vanilla Umbraco site, and another one that will contain our customizations.

Open Visual Studio, and go to File > New Project > Other Project Types > Blank Solution

image

Then right-click on the solution and Add > New Web Site… > ASP.NET Empty Web Site

image

Be careful to place your website inside your solution folder (look for the Web location field at the bottom).

image

 

No go to the Umbraco website and grab the latest release. Go ahead and unzip it inside the web site you just created. You can happily replace the Web.config file that Visual Studio created before.

After a project refresh, you should end up with something like this:

image

Now right-click on the project name and select “Property pages”. In the Build page, change Before running startup page: No Build and uncheck “Build Web site as part of solution”.

image

You are know ready to launch Umbraco and performed its first-time configuration by right-clicking on the project and selecting “View In Browser”.

You can know perform a standard Umbraco installation. We recommend:

  • using SQLCE for the database, as it is very convenient for a development website
    image
  • do not install a starter kit and start fresh!

At this stage you should have a blank Umbraco working installation.

 

2. Create the uCodeFirst project that will contain the customizations

Right-click on the solution and choose Add > New project… > ASP.NET Empty Web Application

image

Then, right-click on the References and choose Manage Nuget packages…

image

Select uCodeFirst and click install

image

During the installation process, you will be asked to select the Umbraco web site folder. Please do so:

image

When installation is finished, you will be prompted because the  project file has been modified:

image

Choose to reload the project. You should end up with the following project:

image

You can then rebuild the solution, and refresh your browser.

Congratulation, your uCodeFirst project has been created successfully!

Next, we will create the first document type.

 

2. Create the first document type and its template

We will begin by creating a simple document type that defines two properties : a title and a body.

Start by creating a new class in the ContentTypes folder, name it SimplePage.cs, and paste the following code:

namespace Contoso.Web.Customizations.ContentTypes
{
    using System.Web;

    using UCodeFirst;
    using UCodeFirst.ContentTypes;

    [ContentType(Name = "Simple page")]
    public class SimplePage : ContentTypeBase
    {
        [Property(UmbracoDefaultDataType.Textstring, Tab.PageContent)]
        public string Title { get; set; }

        [Property(UmbracoDefaultDataType.RichtextEditor, Tab.PageContent, Name = "Body")]
        public IHtmlString BodyText { get; set; }
    }

    public enum Tab
    {
        [EnumName("Page content")]
        PageContent
    }
}

Rebuild the project, refresh your browser and go to the Settings section in the Umbraco back-end. You should see that the document type has been created, along with its properties:

image

How did that worked?

  • Every document type is a class that derive from ContentTypeBase; it can be further configured by decorating it with a ContentTypeAttribute;
  • Every property is a standard .Net property, decorated with a PropertyAttribute; the only mandatory information are the data type, which can be a standard Umbraco data type or a custom one (we will see it later), and the tab on which it appears;
    • The BodyText property has a type of IHtmlString, since it uses the rich text editor and expects a string that contains HTML elements;
  • Tabs must be defined as enums; the order of the tabs in Umbraco will follow the order defined in the enum.

 

Next, we will create a razor template to render this document type:

Create a file named “SimplePage.cshtml” in the Views directory, and type the following code:

@inherits UCodeFirst.RazorViews.UCodeFirstTemplatePage<Contoso.Web.Customizations.ContentTypes.SimplePage>

<!DOCTYPE html>

<html lang="@System.Threading.Thread.CurrentThread.CurrentCulture.TwoLetterISOLanguageName">
    <head>
        <meta charset="utf-8">
        <title>@StrongContent.Title</title>
    </head>
    <body>
        <div>
              @StrongContent.BodyText
        </div>
    </body>
</html>

Notice how you benefit from intellisense while manipulating @StrongContent.

Rebuild the project, refresh your browser and go to the Content section in the Umbraco back-end. You can know create a “Simple page”, publish it and see the result!

image

 

image

How did that worked?

  • Templates are defined as razor files. They are copied at the end of the build in their corresponding location in the Umbraco site;
  • They can inherit from UmbracoTemplatePage, in which case they behave as standard Umbraco template pages, or they can inherit from UCodeFirstTemplatePage<>, in which case:
    • They provide an additional @StrongContent property which is a strongly-typed version of the content, using the classes defined in the project
    • By specifying the document type they provide a template to, they will register as a template for this document type automatically – furthermore, if its their only template, it will be defined as the default

 

Congratulation, you just mastered the first step in learning uCodeFirst!

Last edited Feb 6, 2013 at 7:50 PM by julienblincgi, version 10

Comments

No comments yet.