Jumping into MVC Development With Kentico - Part 1

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 3^rd 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.

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.

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.

// GET: /AzureSearch/
private AzureSearchHelper _AzureSearch = new AzureSearchHelper();
 
public ActionResult Index()
{
    return View();
}
 
public ActionResult Search()
{
    return null;
}
 
public ActionResult CreateIndex()
{
    return null;
}
 
public ActionResult LoadIndex()
{
    return null;
}
 
public ActionResult DeleteIndex()
{
    return null;
}

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.

function IndexAction(strAction) {
 
    var strUrl = "";
 
    switch (strAction) {
        case 'createindex':
            strUrl = '/DancingGoatMvc9/en-us/AzureSearch/CreateIndex';
            break;
        case 'loadindex':
            strUrl = '/DancingGoatMvc9/en-us/AzureSearch/LoadIndex';
            break;
        case 'deleteindex':
            var r = confirm("Are you sure you want to delete the index?");
            if (r == true) {
                strUrl = '/DancingGoatMvc9/en-us/AzureSearch/DeleteIndex';
            }
            else {
                return;
            }
            break;
    }
 
    $.post(strUrl,
        null,
        function (message) {
            $("#message").html(message);
        });
}
 
function Search(filter) {
    //Search the index
};

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.

class AzureSearchHelper
{
    private static SearchServiceClient _searchClient;
    private static SearchIndexClient _indexClient;
    private static string _indexName;
 
    public static string errorMessage;
 
    static AzureSearchHelper()
    {
        try
        {
            string searchServiceName = ValidationHelper.GetString(ConfigurationManager.AppSettings["AzureSearchName"], "");
            string apiKey = ValidationHelper.GetString(ConfigurationManager.AppSettings["AzureSearchAPIKey"], "");
            _indexName = ValidationHelper.GetString(ConfigurationManager.AppSettings["AzureSearchIndexName"], "");
 
            // Create an HTTP reference to the catalog index
            _searchClient = new SearchServiceClient(searchServiceName, new SearchCredentials(apiKey));
            _indexClient = _searchClient.Indexes.GetClient(_indexName);
        }
        catch (Exception e)
        {
            errorMessage = e.Message.ToString();
        }
    }

    #region IndexActions
    public string CreateIndex()
    {
        return "Index created!";
    }
 
    public string LoadIndex()
    {
        return "Index loaded!";
    }
 
    public string DeleteIndex()
    {
        return "Index deleted!";
    }
    #endregion
 
    #region Search Actions 
    public DocumentSearchResponse Search(string searchText)
    {
        // Execute search
        try
        {
            return null;
        }
        catch (Exception ex)
        {
            Console.WriteLine("Error querying index: {0}\r\n", ex.Message.ToString());
        }
        return null;
    }
    #endregion
}

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.