Enabling and using MVC in Umbraco

Enabling and start using Umbraco is just changing a key in the umbraco config file (~/config/umbracoSettings.config) from webforms to Mvc.

    <defaultRenderingEngine>Mvc</defaultRenderingEngine>

After that create a MVC3 project with Visual Studio and copy the Umbraco files into the project. Now you can create the Controllers and Models folders. Instead of masterpages you will create Views and partial Views.

Working with views in Umbraco is just like a regular MVC project with the difference that a inherit is needed for a refence to Umbraco:

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = "_layout.cshtml";
}
<h1>@CurrentPage.Title</h1>
@CurrentPage.Content

If you create the view in Visual Studio, like the layout or partials, these views are not visual in the Umbraco Content Manager. Only the views created by Umbraco.

Example partial view wich query's the child nodes and creates a ul wich images and text 

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage

@{    
        foreach(var page in Model.Content.Children.Where(x => x.IsVisible()))
        {
            umbraco.cms.businesslogic.media.Media startMedia = new 		umbraco.cms.businesslogic.media.Media(
			int.Parse(page.GetPropertyValue
				("behandelingImage").ToString()));
            <div class="behandeling">
                <div class="behandelingimage">
                    <a href="@page.NiceUrl()"><img src="/ImageGen.ashx?image=@startMedia.GetImageUrl()&width=65" alt="{@page.Name}" /></a>
                </div>
                <div class="behandelingtext">
                    @Html.Raw( page.GetProperty("BehandelingText").Value.ToString())
                </div>
            </div>
            
        }
        <div class="clear"></div>
}

Working with the views, partial views, razor works like a charm!, second step is to create a contact form, a model and a controller wich responds:

Contact Model

    /// 
    /// Model class for Contact Formulier
    /// 
    public class ContactViewModel
    {
        
        [Required(ErrorMessage="Naam is verplicht")]
        [StringLength(50, MinimumLength = 2, ErrorMessage="Als naam dient u meerdere karakters in te vullen")]
        [Display(Name = "Naam:")]
        public String Naam{get;set;}

        [Required(ErrorMessage = "Adres is verplicht")]
        [StringLength(50, MinimumLength = 2, ErrorMessage="Als adres dient u meerdere karakters in te vullen")]
        [Display(Name = "Adres:")]
        public String Adres{get;set;}

        [Required(ErrorMessage = "Plaats is verplicht")]
        [StringLength(50, MinimumLength = 2, ErrorMessage = "Als plaats dient u meerdere karakters in te vullen")]
        [Display(Name = "Plaats:")]
        public String Plaats{get;set;}

        [Required(ErrorMessage = "Telefoonnummer is verplicht")]
        [RegularExpression(@"[-+]?[0-9]*\.?[0-9]?[0-9]", ErrorMessage = "Dit telefoonnummer schijnt niet te kloppen")]
        [Display(Name = "Telefoonnummer:")]
        public String Telefoonnummer{get;set;}

        [Required(ErrorMessage = "Email is verplicht")]
        [RegularExpression(@"^([0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$",ErrorMessage = "Dit email adres schijnt niet te kloppen")]
        [Display(Name = "Email:")]
        public String Email{get;set;}
    }

The controller: inherits from Umbraco's SurfaceController

    public class ContactController:SurfaceController
    {
    
        [HttpPost]
        public System.Web.Mvc.ActionResult PostContact( ContactViewModel Model)
        {

            if (ModelState.IsValid)
            {
                // mail contact form
                
                MailVariables mailveriables = new MailVariables();
                mailveriables.Content = ConstructContent(Model);
                mailveriables.To = "teus@uwwebburo.nl";
                mailveriables.From = "josien@uwwebburo.nl";
                mailveriables.FromName = "contactaanvraagformulier";
                mailveriables.ReplyTo = Model.Email;
                mailveriables.Replyto = Model.Naam;
                mailveriables.Subject = "Contact aanvraag";
                Mail.SendMail(mailveriables);

                // add return message
                //TempData.Add("CustomMessage", "Hartelijk dank voor uw aanvraag, wij nemen zo spoedig mogelijk contact met u op! ");
                TempData.Add("Bericht", "Bericht is verzonden, wij nemen zo spoedig mogelijk contact met u op");
            }


            return RedirectToCurrentUmbracoPage();

        }

Finally the view:

@using Models;
@using Controllers;


@if (TempData["Bericht"] == null)
{
    using (Html.BeginUmbracoForm("PostContact", "Contact"))
    {
            ≪table>
                ≪tr>≪td>≪span>Naam:≪/span>≪/td>≪td>@Html.EditorFor(x => new ContactViewModel().Naam)@Html.ValidationMessageFor(x => new ContactViewModel().Naam)≪/td>≪/tr>
                ≪tr>≪td>≪span>Adres:≪/span>≪/td>≪td>@Html.EditorFor(x => new ContactViewModel().Adres)@Html.ValidationMessageFor(x => new ContactViewModel().Adres)≪/td>≪/tr>
                ≪tr>≪td>≪span>Plaats:≪/span>≪/td>≪td>@Html.EditorFor(x => new ContactViewModel().Plaats)@Html.ValidationMessageFor(x => new ContactViewModel().Plaats)≪/td>≪/tr>
                ≪tr>≪td>≪span>Telefoonnummer:≪/span>≪/td>≪td>@Html.EditorFor(x => new ContactViewModel().Telefoonnummer)@Html.ValidationMessageFor(x => new ContactViewModel().Telefoonnummer)≪/td>≪/tr>
                ≪tr>≪td>≪span>Email:≪/span>≪/td>≪td>@Html.EditorFor(x => new ContactViewModel().Email)@Html.ValidationMessageFor(x => new ContactViewModel().Email)≪/td>≪/tr>
                ≪tr>≪td>≪span>≪/span>≪/td>≪td>≪input class="button" type="submit" value="Verzenden"/>≪/td>≪/tr>
        ≪/table>    
    }
    @Html.ValidationSummary();
}
else
{
    ≪h2>@TempData["Bericht"]≪/h2>
}

For form validation to work you need to include the right javascripts:

    ≪script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript">≪/script>
    ≪script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript">≪/script>
    ≪script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript">≪/script>

and next to that enable it in the webconfig, in the app-setting :

{{opmerking.Naam}}:

{{opmerking.OpmerkingText}}

            

Saving your comment....

Naam is verplicht!
Email is verplicht!
Opmerking is verplicht!