Using ViewModels in MVC with TDS code generation and Glass.Mapper

So, first and foremost, I want to thank the guys over at Hedgehog Development for developing this wonderful tool TDS (Team Development for Sitecore) for the Sitecore community. In my experience, it is not just a handy tool in the toolbag, it’s now become a way of life and is on my best practices list where I just don’t see myself ever developing without it (unless I have to…boo!). There are many features, but the one I love the most is the ability to do code generation utilizing Glass.Mapper as the ORM. What might take you days to develop models for your Sitecore templates depending on how many templates are in the Content Tree, takes only minutes with TDS code generation. This is definitely a time saver for your development team, and once you have developed with it before, and try to build out models in MVC on your own, you will quickly realize you were spoiled with TDS code generation. It’s definitely a return on investment in terms of saved development time for your development firm and I highly recommend!

Ok, so now down to the main reason I am putting up this post, which is using ViewModels in MVC to help gain additional functionality with Glass.Mapper. After getting everything setup with TDS and code generation, I proceeded to start on my development efforts and needed to get the datasource of a component on my home page, then get the children of that datasource and use those items (Navigation_Item) in my NavigationComponent to render out my navigation. Since, I generated the classes, I needed to create a ViewModel class and inherit from my Navigation_Folder like so:

using Glass.Mapper.Sc.Configuration.Attributes;
using System.Collections.Generic;
 
namespace SitecoreSandbox.Models
{
    public class NavigationViewModel : Site.Navigation.Navigation_Folder
    {
        [SitecoreChildren]
        public virtual IEnumerable<Site.Navigation.Navigation_Item> Children { get; set        ; }
    }
}

Using this ViewModel I can inherit all the properties of the Item AND create additional functionality such as getting the children of the Navigation_Folder now. Glass.Mapper makes this so easy for us. However, be sure to add the [SitecoreChildren] configuration attribute! Otherwise, the Children property will always come back “null” and you will be scratching your head as to what is wrong. Here is more on children if you are interested.

Now, I just get the datasource from my Navigation Component using my NavigationController making sure I inherit from GlassController:

using Glass.Mapper.Sc.Web.Mvc;
using System.Web.Mvc;
 
namespace SitecoreSandbox.Controllers
{
    public class NavigationController : GlassController
    {
        public Models.NavigationViewModel Model { get; set; }
 
        public ActionResult Navigation()
        {
            Model = this.GetDataSourceItem<Models.NavigationViewModel>();
            return View(Model);
        }
    }
}

Then I pass my NavigationViewModel over to my View and I can iterate through the Navigation_Items that are children of my Navigation_Folder to render my navigation:

@using Sitecore.Mvc
@using Sitecore.Mvc.Presentation
@using Glass.Mapper.Sc;
@model SitecoreSandbox.Models.NavigationViewModel
 
<ul>
    @foreach (SitecoreSandbox.Models.Site.Navigation.Navigation_Item navigationItem in Model.Children)
    {
       <li class="mainNavItem"><a href="@navigationItem.Link.Url">@navigationItem.Link.Text</a></li>
    }
</ul>

So, you can see you can use a ViewModel to gain the additional functionality you need while still using TDS code generation and Glass.Mapper.  Overall, TDS code generation, Glass.Mapper, and ViewModels in MVC will have you doing your Sitecore development like a BOSS in no time! Happy coding!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s