MVC – use custom model in views called from a SurfaceController with existing templates in Umbraco

Here is how I solved this issue so I could use Umbraco’s model in my view and a master view/existing template.

When trying to pass a custom model to a view while using an existing template as master I get this error.

The model item passed into the dictionary is of type 'Identity.Models.ExternalLoginConfirmationViewModel', but this dictionary requires a model item of type 'Umbraco.Web.Models.RenderModel'.

The error is pretty self explanatory but the solution was a bit harder to find.

The way I call this view with this model  is from my SurfaceController as I need a callback from Facebook. So what I return from my SurfaceController looks like this

return View("ExternalLoginConfirmation","~/Views/Master.cshtml", new ExternalLoginConfirmationViewModel { Email = loginInfo.Email });

And this will give the error above as my Master.cshtml inherits from UmbracoTemplatePage. If I omit the “~/Views/Master.cshtml” from the return View function above I will not get any errors but I will not have any of my design/surrounding html (that I have in my Master.cshtml) either.

When I got the error my model looked like this.

public class ExternalLoginConfirmationViewModel
{
    [Required]
    [Display(Name = "Email")]
    public string Email { get; set; }
}

After a lot of searching I found a solution to this: to let the model inherit from RenderModel and create the constructors as per below. You should now have access to both ExternalLoginConfirmationViewModel  and Umbraco’s Model in both your parent view (Master.cshtml) and your body view (ExternalLoginConfirmation.cshtml):

public class ExternalLoginConfirmationViewModel : RenderModel
{
    public ExternalLoginConfirmationViewModel() : this(new UmbracoHelper(UmbracoContext.Current).TypedContent(UmbracoContext.Current.PageId)) { }
    public ExternalLoginConfirmationViewModel(IPublishedContent content, CultureInfo culture) : base(content, culture) { }
    public ExternalLoginConfirmationViewModel(IPublishedContent content) : base(content) { }
    
    [Required]
    [Display(Name = "Email")]
    public string Email { get; set; }
}

Let your view (ExternalLoginConfirmation.cshtml) inherit from ExternalLoginConfirmationViewModel  like this

@inherits Umbraco.Web.Mvc.UmbracoViewPage<Identity.Models.ExternalLoginConfirmationViewModel>

Your parent view/template (Master.cshtml) should inherit from UmbracoTemplatePage  like this (It probably already does)

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage

Now, if you put @Model.Content.Name into your Master.cshtml or ExternalLoginConfirmation.cshtml it will write the name of you Document in Umbraco. In your ExternalLoginConfirmation.cshtml you can still use @Model.Email to get the email (or whatever is in your custom model).