With the release of Kentico 12, it’s no secret that adopting MVC architecture is the future for all things Kentico. From the simplest brochure sites to complex integrations, MVC is the recommended approach for any developer working with the platform (have we made that clear enough yet?). In this new blog series, I'll walk you through creating an MVC site using Kentico 12 and document each step.
TL;DR Version
- Kentico 12 introduces an MVC-first mindset when it comes to building your applications. This framework will future-proof your sites and provide nearly limitless design possibilities.
- Using the Kentico Installation Manager (KIM), you can quickly create your base MVC and Admin sites. This will ensure your MVC project has the correct NuGet packages referenced.
- Structuring your content properly is the key to a successful MVC project. Be sure to plan out your site map and data properly.
- Through custom page types (classes), you can inherit fields to save yourself time, and simplify your content structure.
- Use the Generate Code options to quickly create you cutom classes to include within your MVC project.
Overview
Over the past few months, we have published interviews and articles on the topic, all aimed at helping companies transition to this new development pattern from those people who have already made the switch. While stories from successful partners may help, we know nothing beats doing something for yourself and your development team.
The Kentico Documentation team has always done a great job of making sure all the technical information a developer needs is available. Covering many development methods and practices, the Kentico documentation is often the #1 bookmark for anyone working with the platform. When it comes to Kentico 12 and MVC, we have taken things to the next level by separating out all aspects of architecture, design, and implementation for each development method.
If you haven’t checked it out yet, here’s a link to our MVC-specific Kentico 12 documentation.
With this information, I’m going to take you on a journey of what it takes to build an MVC site from scratch using Kentico 12. This multi-part blog series will take you, as I said, through every step of the process. I’m going to start very basic, and gradually build up the functionality as I add more and more parts of the site. Why pay money to see the next Avengers when you have this thrilling action to watch?!?
For the process, I’m going to build a Kentico MVC Widget Showcase site. I figured, if I’m taking the time to develop something, why not make a repository for any MVC Widgets that may be helpful to others? At first, there’s only going to be a few widgets that I will make as part of the site. In the future, I’m going to build a way for others to share their creations. There’s going to be some laughs, tears, and more than a few twists and turns along the way. All the code will be completely open source for your pillaging desires.
As with anything around MVC, there’s some important notes you need to know:
- I, probably a lot like you, don’t have a ton of MVC experience. This means I’m going to try to do this as logically and efficiently as possible, but expect a few “What the..?” along the way.
- With MVC, front-end development can take on any form you want. As long as you bring in the Kentico APIs correctly, you are free to use Angular, React, Vue, or nearly any other framework for your design. I’m going to keep things simple (namely because of the restraining order I have against JS), and just use basic HTML5 & CSS.
- The first few blogs are going to be pretty simple. This is to give you an idea of how you might want to go about starting your development. I’ll try to add some cool touches where I can, but I’m sure your sites will be much more involved.
- When it comes to MVC, there is no one right way to do anything. Repository patterns, helpers, and services are just a few of the concepts a developer may or may not use. As you gain your MVC expertise, you will need to decide which techniques are correct for your projects.
Alright. With those out of the way, we can get to fun!
Initial Setup
As with every Kentico site, the process starts with the Kentico Installation Manager (KIM for you cool kids). This process is covered in the documentation, so here’s a quick video of the process.
Visual Studio Projects
When the installer is done, I am the proud parent of twin Visual Studio siblings. The CMSApp solution is my Kentico installation site, and the KenticoWidgetShowcase solution is for my MVC site. The CMSApp site will host all my content and allow me to edit and manage the Kentico site, as normal. The KenticoWidgetShowcase site is where all my awesome MVC skills will be on display and the presentation of the content occurs.
When you use the KIM to create an MVC site, a few default IIS applications will be created. While those are OK, I like to update mine to be a specific virtual directory. In the Visual Studio projects, I update the properties with the new virtual directory paths.
Here’s the MVC site.
And, here’s the admin site.
Hotfixes
When you’re creating a new Kentico site, you may want to hotfix to the latest version immediately. If so, just use the KIM for the job. When it completes the update, you may see a message about the MVC site not being updated to the latest dlls.
This message is telling you that your MVC project needs to get some NuGet package updates to match the admin suite. This is important, as both sites need to be on the exact same version of the dlls to function properly. In Visual Studio, I update my NuGet packages to the proper version.
Site map
With my new admin and MVC sites created, I’m ready to start making content!
Wrong!
Because Kentico MVC sites are so closely aligned with URLs and routing, your content structure is extremely important to how the site will function. That means that defining your content structure and how everything will fit together is a must when starting your project.
For the Widget Showcase, the site design will be fairly simple, at least at first. I know I’m going to have a Home page, a Widget page, a collection of widgets, and maybe an About page or something. This means my site map is going to look something like this:
- Root
- Home
- Widgets
- Widget 1
- Widget 2
- Widget 3
- About
Not exactly the Matrix, I know. Don’t worry, we’ll add more to it later. For now, this basic architecture tells me I need to have a few different Page Types:
- Content Page
- Specific Content Pages for each section
- Widget
- Details about each widget registered
I’m a big fan of coding things once and reusing where I can. For my Content Pages, I created a “base” class to hold the details that every page will have (Name, Metadata, etc.). Here’s an exciting video of me creating the Content Page page type.
With the base class created, I can make my section-specific ones, which will inherit from the Content Page class. Here’s the Home page type configuration, which will be used for the Home page of the site.
For the fields, I added a few specific to the section of the site.
For your sites, you may have a lot more custom fields. As you design each area of your site, try and think of how you can leverage common fields in your “inherited” class and which ones are only for that part of the site.
So I’ll have something to test with later, I go ahead and create a very interesting Home content item in my site.
The MVC Site
Wow, we’ve spent over 1,300 words talking about the site and still haven’t gotten to the MVC fun! OK, let’s work on that next. When you create your MVC site with the KIM (I told you, cool kids…), the MVC project created will have the basics of what you need to connect to your Kentico site. This includes references to all the Kentico dlls, default RouteConfig and ApplicationConfig files, and some web.config keys. But, the rest of the site is up to you to create.
Shared Layout
First, I’ll make a base layout for the site in the Views/Shared folder I created. This will serve as my master layout for my pages so everything looks amazing.
@{ Layout = null;}<!DOCTYPE html><head> <title>@ViewBag.Title</title></head><body> <div> @RenderBody() </div></body></html>Generated Classes
The next logical step would be to create a Home controller and View. Because our site is going to be powered by Kentico, I’ll want to use my new Home page type for this, so I can have strongly-typed properties and the all-important Provider class. To get these files, I need to Generate the class files within the Kentico Admin site.
For each custom page type, click the Code tab and click the Save code option. This will generate some pre-coded classes within your project for you to then copy to the MVC site.
In your MVC site, create a folder where you’d like to store these files. For my site, I’m going with Models/Generated to keep things organized. Be sure to include these into your MVC site so they get compiled.
Home Controller
With the generated classes as part of the solution, I’m ready to make my Home Controller. I create an empty controller and add the following code. This code creates a new Home object (using the generated class) and populates it using the swanky new HomeProvider class to access the data within the Kentico database. I then pass that model to my view.
using CMS.DocumentEngine.Types.KenticoMVCWidgetShowcase;using System.Web.Mvc;namespace KenticoMVCWidgetShowcase.Controllers{ public class HomeController : Controller { // GET: Home public ActionResult Index() { // Gets the latest version of a single article using the generated provider HomePage page = HomePageProvider.GetHomePage("/home", "en-us", "KenticoMVCWidgetShowcase"); return View(page); } }}Home View
Lastly, I need to create a view for my Home page. I create a new view and set it to use the Shared/_layout.cshtml page for the layout template. In the view, I define the model (Home), and extract out the class fields to display. Note that I’m using a built-in library to get the HeaderImage attachment I uploaded when I created the content item.
@model CMS.DocumentEngine.Types.KenticoMVCWidgetShowcase.HomePage@{ ViewBag.Title = "Home"; Layout = "/Views/Shared/_layout.cshtml";}@if (Model.HeaderImage.ToString() != ""){ string headerimageurl = Url.Kentico().ImageUrl(Model.HeaderImage, SizeConstraint.MaxWidthOrHeight(400)); <img src="@headerimageurl" alt="@Model.HeaderText" />}<h2>@Model.HeaderText</h2>The First Demo
After adding the above code and rebuilding, I’m ready to test my site. Low and behold, I’m presented with an amazing artistic experience using MVC. The site is dynamically displaying the content from the Kentico installation and is blazingly fast.
Learn More
When it comes to geting ready for MVC, there’s a lot of resources available. Here are some great links to learn more
Get the Code
If you'd like to create your own awesome MVC Widget Showcase site, use the link below to download the full source code. The GitHub project contains the entire codebase for the Admin and MVC site. It also uses Kentico's Continuous Integration functionality to allow you to set up the site and all the contents on your local machine.
Kentico MVC Widget Showcase GitHub Project
Next Time
Alright, that certainly took a lot of typing to get us to a very boring Home page. But don’t worry! This is just the first article. Next time, we’ll add a great design, additional content, the PageBuilder functionality, and set ourselves up for custom widgets. Be sure to watch this blog for the next part in the series!