Jumping into MVC Development With Kentico - Part 2



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

Porting Over the Azure Search Integration

In my previous Azure Search Integration, I used the UriRequest library to interact with the Azure Search REST service. While this worked fine, it did not take advantage of a great SDK tool that Microsoft has for the platform. With the new project being in MVC, I could take advantage of some functionality that the development model offers. With this new SDK, my calls would be much cleaner, and I could standardize a lot of the communication.

To accomplish this, I did the following:

1. In my new code, I brought in the Azure Search SDK NuGet package, which contained all of the functions I would need.

Azure Search SDK

2. In my AzureSearchHelper.cs class, I added methods for creating the index, loading the data, searching the index, and deleting the index. Note that this code is using the Azure Search SDK, as well as the QuoteMVCProvider generated class.

I alos created another Helper Class called Quote to help handle the objects within the MVC site.

    Click to view AzureSearchHelper code

Because I used the Azure Search SDK, these calls were very simple to code and implement.

3. In my AzureSearchController file, I referenced the AzureSearchHelper functions in the appropriate actions.

    Click to view AzureSearchController code

The last piece to port over was the layout. Because this implementation would be using MVC, a lot of my backend code got moved to the View.  Because my ActionResults consisted of JSON data, I added JavaScript functions to parse the information and display the search results.

    Click to view View JS code

There was a good bit of testing I had to do to get the JSON to parse correctly. I won’t fill this blog with the details, but you can see in the code that I am using a lot of flags (Highlight, Score, etc.) to determine which data to show where.


After all of that, I was finally ready to test my site. I fired up my MVC application and browsed to the Azure Search page (which I added as a link in the Views/Shared/_Layout.cshtml file). Once on that page, I could test the functionality and confirm my code was working correctly.

Azure Search 1

Azure Search 2

Success! Everything worked, and it looked great in the process. I can say that the MVC implementation was MUCH faster than the web form model, which opened the doors to some other features of the development model (like partial loading, etc.). And because of that, I decided to add Suggestions to the mix using this partial postback feature.

Adding Suggestions

In my previous demo, I had Suggestions working using an AJAX Postback. I know, many of you don’t like that method. While this worked in the original demo, it was also not the cleanest solution. Now that my code was in MVC, I leveraged the separated model to implement it in a better way.

1. I added the Suggest method to the AzureSearchHelper class. This now contained my API call to do the suggestion.

    Click to view AzureSearchhelper View code

2. I added the Suggest action to the AzureSearchController. This would allow me to have a method to call when a suggestion was needed.

    Click to view AzureSearchController Suggest code

3. I added some KeyPress event handlers to the View to capture when a user types a suggestion. When at least three characters are entered, the form would automatically call the Suggest action to get the results.

    Click to view Suggest KeyPress code

4. I added some JavaScript to parse the suggestions from the REST service and display them as links.

    Click to view Suggest JavaScript parsing code

Testing (Again)

With my new Suggest functionality in place, it was back to more testing. I fired up the site again and started typing in the Search box. As I entered my text, I saw the suggestions displaying on my page, just as intended. Not yet satisfied, I added one more piece of functionality to allow the ability to do a “fuzzy” search. Denoted by a flag that gets passed to the REST service, it will return results “similar” to what you entered, a great feature for any Search page.

Azure Search With Suggest 1

Azure Search With Fuzzy Suggest

Wrapping Up

So there you have it! I successfully ported my Azure Search integration to MVC and leveraged the MVC demo project for the foundation. While this blog was a little long, the actual process only took me about a day to complete, mostly due to parsing out the JSON and understanding the objects being returned.

Speaking of which, there are a couple of notes I wanted to share:

  • I updated the “Create Index” method to create the index, add the Suggester, and scoring profiles all in one call.
  • Most of the previous code that was in the web part’s code-behind file has been moved to JavaScript in the View.
  • To get Facets working, I had to return an array of JSON objects from the Search Action in the Controller. This was because the IDE couldn’t seem to understand the “Facets” node of the results. That is why there are two objects being returned.

I forked the Kentico MVC GitHub demo to include the new functionality. You can access the fork here:

Azure Search Demo GitHub

I packaged the files, classes, and quote data into a zip file that you can download below. I've also included an Instructions file to help you set up the environment.

Azure Search MVC Package

This was a great learning experience for me and built my understanding of how to bring custom functionality into a Kentico site with the MVC development model. MVC is certainly a powerful framework that can be leveraged to build scalable applications using the best technology.  I hope it helps you understand the process better. If not, let me know below!

Good luck!

Share this article on   LinkedIn

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 the night goes...