Jumping into MVC Development With Kentico - Part 1

   —   

By now you’ve probably heard about some of the great advancements and features in Kentico 9. Improved MVC support was one of the most anticipated updates as more and more developers transition to the (not so young) web development pattern. To support this development model, Kentico has reworked some of its core APIs to better allow the creation and utilization of data outside of the core Kentico installation. In addition, a demo MVC project has been offered, demonstrating best practices and use cases when implementing Kentico with ASP.NET MVC.

I decided to give MVC a shot using this demo project and upgrade some existing web parts I had created to the new development pattern. In this blog, I’ll show you how I took the Azure Search Integration Web Part, migrated it to MVC, and then into my demo site.

NOTE

This blog is the first of a two-part series. Be sure to check DevNet here for Part 2.

For this demo, I will be working with the Azure Search Integration Web Part I created back in 2015. You can find out more about that web part here. While a good bit of the code in this article is Azure Search related. the overall goal is to show how to leverage the Kentico MVC Demo for your custom functionality.

Background

As with most technical articles, my demo environment needed a little setup. First, I downloaded and installed the MVC demo project and Kentico installation from GitHub. The GitHub package contains instructions on how to set it up, so this part was easy to do.

You can download the MVC demo project here.

Once the demo projects were setup, I was ready to start some real development.

Getting to Know the MVC Demo

My next step was to familiarize myself with the MVC demo site. I have done MVC development before but I am far from an expert on it. It was very helpful for me to run the site and comb through the code to understand how it all fits together. We have lots of documentation and videos on this, so I’ll just leave you with a few notes and highlights:

  • The MVC Demo supports the ASP.NET MVC 5 framework. We are continuing to test and evaluate MVC 6, however, we will not add official support until the framework is publically released.
  • The MVC demo project connects directly to the Kentico database. In the example, there is a Kentico installation (with one site) and a separate MVC application. Both of these projects (sites) hit the same database, so there is no duplication of data. The Kentico site is in charge of creating/maintaining the data, and the MVC site extracts it and displays it.
  • The MVC Demo contains “generated” classes from the Kentico installation. Whenever a Page Type is created in Kentico, there is a Provider class generated that tells the system about the object. These classes are copied to the MVC project, so it knows how to deal with the data coming from the Kentico database.
  • The MVC Demo site contains a number of projects. These are:
    • Dancing Goat
      This is the actual MVC site where all of the controllers, models, views, generated classes, and layout files are contained.
    • Kentico.Glimpse
      This is a 3rd party utility that has been migrated into the project. This utility provides real-time statistics and diagnostic information when running the site locally.
    • Kentico.Newsletters
      This provides a service to integrate with the core Newsletter API.
    • Kentico.Search
      This provides a service to integrate with the core Search API.
    • Kentico.Web.MVC
      The is the core MVC code that provides API integration and functionality.

You can find out more about Kentico 9’s MVC Support here.

And if you like videos, you can also check out the Kentico 9 MVC Support webinar here.

Integrating Generated Classes

Because I started with my Azure Search code that uses some awesome Simpsons quotes for data, I knew I would need to bring this functionality into my site. My only issue was that I already had the data in an existing Page Type in my Kentico site (Custom.Quote). With the new MVC development, I had to move my data to a “content only” Page Type for it is to be entered properly within Kentico and extracted correctly using the API. To do this, I went through the following steps:

  • I created a new “content only” Page Type for the data (Custom.QuoteMVC), matching the fields to the existing Custom.Quote Page Type.
  • I used the Import Toolkit to copy the existing Custom.Quote data into the MVC Content tree, selecting the Custom.QuoteMVC Page Type.

QuoteMVC Content Tree

Once I had the data in the correct place and structured properly (using the right Page Type), I needed to bring the Custom.QuoteMVC generated classes into the MVC site. I copied the files over and included them in the MVC project under the DancingGoat project.

QuoteMVC Generated Files

Creating a New Controller/View

After getting an idea of how the MVC demo site worked, I was ready to add my custom functionality. The first step in this process was to create a new controller. In my example, I would need a new controller and view for my Azure Search functionality. I created a new controller (AzureSearchController.cs) and added my actions.

The AzureSearchController.cs file would contain actions for creating my index, loading it with data, searching against the index, and deleting the index. I planned on porting over all of the functionality from the original web part, so I replaced these methods with the base functionality.

    Click to view AzureSearchController code

I then created a View for my code (AzureSearch/Index.html). This would be very similar to my web part layout.  However, I knew I would be using a lot more JavaScript, so I replaced  hose sections, as well.

    Click to view View code

One last step was to make a “helper” class for a lot of my functionality. My “web forms” implementation of the code had a similar file, which helped keep things be organized and neat. With the new project being in MVC, it would be crucial to stick with the model guidelines and best practices. I created an AzureSearchHelper.cs class to hold these functions within my MVC project.

    Click to view AzureSearchHelper code

With these three crucial pieces in place, I could work on my actual Azure Search functionality.

Continue to Part 2 of the series to see how to port the Azure Search Integration into to MVC.

Share this article on   LinkedIn Google+

Bryan Soltis

Hello. I am a Technical Evangelist here at Kentico and will be helping the technical community by providing guidance and best practices for all areas of the product. I might also do some karaoke. We'll see how it the night goes...

Comments