How to Implement Full-Text Search in ASP.NET MVC 6, MVC 5, MVC 4, or MVC 3
This tutorial provides step-by-step instructions on how to implement full-text search of static content in ASP.NET MVC 6, MVC 5, MVC 4 or MVC 3. The content I'm primarily referring to is the text inside of your .cshtml files but this tutorial can also be used to search static .html files. This article does not cover searching data in your database. There are plenty of articles online that deal with searching a database as well as implementing full-text search in a database engine such as SQL Server.
In this tutorial I'll be using a NuGet component called MVC Search 10 (available here). Let's get started!
Create a Visual Studio Project
Start by creating a Visual Studio project. I'll be creating a Visual Studio 2015 project but the steps are nearly identical for all versions of Visual Studio. From the New Project dialog box, select ASP.NET Web Application (fig 1), then select MVC from the next popup and click the OK button. If you're using a legacy version of Visual Studio make sure that the Razor view engine is selected (.ASPX pages are not supported). You may get a popup asking you to configure Micorosoft Azure settings. Just click the Cancel button here.
Installing the MvcSearch10 NuGet Package
Once you've created your Visual Studio project, you'll need to install the MvcSearch10 NuGet package. From the Solution Explorer window right-click on References then select Manage NuGet Packages... (fig 4).
Click Browse and type 'mvc search' in the box. Make sure that 'All' appears in Package Source box. From the results select MvcSearch10 and click Install (fig 5).
What the MVCSearch10 Package Installs
The MVCSearch10 package adds the following to your project: a reference to the MvcSearch10.dll, a stylesheet in the Content folder called mvcSearch.css, several views in a folder named MvcSearch, and appSettings to your web.config file. For now just keep in mind that these items are there.
Next we'll need to make a few changes to our layout. Open Views/Shared/_Layout and add the following just before the </head>:
@RenderSection("Styles", required: false)
Then open the Scripts folder and expand the jquery-ui.1.9.2.custom and the js folders (fig 6). Drag and drop the jquery-ui-1.9.2.custom.min.js file to just above the @RenderSection('Styles') line. Visual Studio will create a <script> element.
Then expand the jquery-ui.1.9.2.custom\css and the base\ folders (fig 7), and drag and drop the jquery-ui.1.9.2.custom.min.css file to just above the previous line. Visual Studio will create a <link> element.
Because we have a reference to jquery-ui, we will need to move the JQuery script reference up. Scroll down to the bottom of the body section and copy the @Scripts.Render("~/bundles/jquery") line, then comment it out and paste it just before the jquery-ui script line. You should have the following four lines at the top of your _layout page.
<link href="/Scripts/jquery-ui-1.9.2.custom/css/base/jquery-ui-1.9.2.custom.min.css" rel="stylesheet" />
@RenderSection("styles", required: false)
The last thing we'll be doing is adding a partial search form for searching directly from the menu bar. Scroll to the nav UL (<ul class="nav navbar-nav">) and add the following line just before the </ul>.
And that's it. We just need to set a few configuration values and we're done.
We'll need to specify your website's virtual root before we can run the project. Start by right-clicking on the project in Solution Explorer and selecting Properties. From the project properties window, click Web and scroll down and locate the Project Url and make a note of it (fig 10). You'll need to enter this in a web.config setting.
Next open your projects web.config file and locate the <appSettings> section. You'll notice new entries that begin with mvcSearch_. If the entries are all in one line you may want to insert Returns to make them easier to work with. Locate the mvcSearch_VirtualRoot entry and enter your project's Url.
You can now run the project. We won't be debugging anything so you can press Ctrl+F5.
When the home page renders you'll notice a search box to the right of the menu items (fig 8). This is the mini-search page. Type "Home" into the box and press enter. This will execute a search. Since we have not yet built our search catalog, a new catalog will be built by crawling the pages in the site (fig 9) and then cached for future searches. As soon as the catalog is built the search results for "Home" are returned.
Additionally, once the catalog is cached Autocomplete searches are available from the mini-search form. To run an Autocomplete search simply type a few characters (at least 3) into the mini-search form. Search results will immediately appear below the mini search form.
Some Additional Information
The Advanced Search Form and more
There's much more like the Advanced Search form, which allows you a bit more control over your search criteria. You can access the Advanced Search form by clicking Go on the mini-search without any search criteria. Alternatively, you can also simply request: /MvcSearch/Search . You can also specify synonyms using the /MvcSearch/AddEditSynonym page. For more information see /Docs/MvcSearch/Index
Lastly, there are lots of configuration settings in web.config that you can tweak to get everything just right. The most important of which are:
- mvcSearch_FileFilter - | separated list of files to index.
- mvcSearch_ignoreFile - | separated list of files to ignore (not index). Supports partial names.
- mvcSearch_ignoreDirs - | separated list of directories to ignore.
- mvcSearch_xmlCatalog - if true creates an XML catalog, false creates a binary catalog.
- mvcSearch_enableAutocomplete - if true executes search as the user types characters.
Best of luck!