Post
Ask Question

Using Elastic Search With ASP.NET MVC

In this article, we are going to learn how to use elastic search with ASP.NET MVC in step by step way.

Link to download Solution.

Elastic search                   

We are already in the fifth part of this article. Till now, we have covered a lot in elastic search starting from how to configure elastic search to how to insert data into elastic search, further using Kibana for visualizing data, and at last, we have learned about Logstash and how to insert a bulk of data from MSSQL and MYSQL into elastic search. Now, it’s time to learn how we can query elastic search documents from ASP.NET MVC because at last, we need to show data to end-users in a fast way as possible.

What we are going to search

In this demo, we are going to create a search on “humanresource” index which we have inserted in your last article.

If you are a beginner and you do not have an idea what is elastic search but you want to know it, then the below links will help you to kick start with elastic search.

Links to Kickstart Learning Elastic Search

Prerequisites

  1. Running Elastic Search instance
  2. Visual Studio 2015
  3. NuGet packages

Create ASP.NET MVC Application

Let’s create a simple ASP.NET MVC application with the name “WebElasticSearch”.

Elastic search

 

After entering the name, it will show another window for project selection. There, just choose “MVC” Template and change Authentication to “No Authentication” and click OK to create the project.

Project Structure

Elastic search

Next, we are going to install NuGet packages.            

Installing NuGet Packages

We are going to install 2 NuGet packages.

  1. Net
  2. Nest

Elastic search

Elastic search

After installing the NuGet package, next, we are going to add a new connection folder.

Creating Connector folder and adding ConnectionToEs class

Elastic search

After creating the folder, next, we are going to add ConnectionToEs class.

In this class, we are going to create a connection to elastic search instance. As you can see in the below code, we have provided elastic search URI http://localhost:9200/".

Code Snippet 

  1. using Elasticsearch.Net;  
  2. using Nest;  
  3. using System;  
  4. using System.Collections.Generic;  
  5. using System.Linq;  
  6. using System.Web;  
  7.   
  8. namespace WebElasticSearch.Connector  
  9. {  
  10.     public class ConnectionToEs  
  11.     {  
  12.         #region Connection string to connect with Elasticsearch  
  13.   
  14.         public ElasticClient EsClient()  
  15.         {  
  16.             var nodes = new Uri[]  
  17.             {  
  18.                 new Uri("http://localhost:9200/"),  
  19.             };  
  20.   
  21.             var connectionPool = new StaticConnectionPool(nodes);  
  22.             var connectionSettings = new ConnectionSettings(connectionPool).DisableDirectStreaming();  
  23.             var elasticClient = new ElasticClient(connectionSettings);  
  24.   
  25.             return elasticClient;  
  26.         }  
  27.  
  28.         #endregion Connection string to connect with Elasticsearch  
  29.     }  
  30. }  

After creating the connection class, next, we are going to add a Controller and create View for search.

Add Controller “AllSearch”

Adding a controller with name “AllSearch”.

Elastic search

After adding the Controller, next, we are going to add an action method and in the constructor, we are going to instantiate the connection object.

Adding Action Method

In this part, we are going to add Action method “Search” and create an instance of the ConnectionToEs class.

Code Snippet

  1. using System.Web.Mvc;  
  2. using WebElasticSearch.Connector;  
  3.   
  4. namespace WebElasticSearch.Controllers  
  5. {  
  6.     public class AllSearchController : Controller  
  7.     {  
  8.         private readonly ConnectionToEs _connectionToEs;  
  9.         public AllSearchController()  
  10.         {  
  11.             _connectionToEs = new ConnectionToEs();  
  12.         }  
  13.   
  14.         [HttpGet]  
  15.         public ActionResult Search()  
  16.         {  
  17.             return View("Search");  
  18.         }  
  19.     }  
  20. }  

After adding “Search” Action Method, we are going to add a View for that action method.

Elastic search
Now, we are going to design the View. 

Designing View

In this part, we are going to design the View with 2 textboxes.

  1. jobtitle
  2. nationalidnumber

Below is document of “humanresource” index in which, first we are going to create a search on both these parameters.

Elastic search
Elastic search

 

After designing the search View, next, we are going to add a class “humanresource” and properties similar to “humanresource” index and type “doc”.

Adding Class similar to “Humanresource” Index and type “Doc”

  1. public class Humanresources  
  2. {  
  3.  public string nationalidnumber { get; set; }  
  4.  public string LoginID { get; set; }  
  5.  public string OrganizationNode { get; set; }  
  6.  public int? OrganizationLevel { get; set; }  
  7.  public string jobtitle { get; set; }  
  8.  public string BirthDate { get; set; }  
  9.  public string MaritalStatus { get; set; }  
  10.  public string Gender { get; set; }  
  11.  public DateTime? HireDate { get; set; }  
  12.  public bool? SalariedFlag { get; set; }  
  13.  public int? VacationHours { get; set; }  
  14.  public int? SickLeaveHours { get; set; }  
  15.  public bool? CurrentFlag { get; set; }  
  16.  public string rowguid { get; set; }  
  17.  public DateTime? ModifiedDate { get; set; }  }

After adding humanresource class next we are going to add “DataSearch” Action Method which will take both this parameter as input and provide response in json.

Adding DataSearch Action Method

The request to elastic search we are going to send using “Nest” Client.

In this action Method the first thing we have done is to connect to elastic search using connectionEs class, then we have provided index “humanresources” and type “doc”, next we can provide size of document as output I have provided as 50, at last comes query in this we are using “match” query for that we are passing field jobtitle and in query we are going to pass value which we have searched. 

Code Snippet

  1. public JsonResult DataSearch(string jobtitle, string nationalIDNumber)  
  2.     {  
  3.         var responsedata = _connectionToEs.EsClient().Search<Humanresources>(s => s  
  4.                                 .Index("humanresources")  
  5.                                 .Type("doc")  
  6.                                 .Size(50)  
  7.                                 .Query(q => q  
  8.                                     .Match(m => m  
  9.                                         .Field(f => f.jobtitle)  
  10.                                         .Query(jobtitle)  
  11.                                     )  
  12.                                 )  
  13.                             );  
  14.   
  15.         var datasend = (from hits in responsedata.Hits  
  16.                         select hits.Source).ToList();  
  17.   
  18.         return Json(new { datasend, responsedata.Took }, behavior: JsonRequestBehavior.AllowGet);  
  19.     }  

After creating Action Method and setting up search with Nest, next we are going to call this Action Method using AJAX and then display this result on View. Since we get the response as JSON, I am going to use a client-side grid from DevExpress.

Calling Datasearch Action Method using Ajax and Displaying Response in Grid

Code Snippet

  1. <script>  
  2.     $(document).ready(function () {  
  3.   
  4.         $("#btnsubmit").on("click", function () {  
  5.   
  6.             if ($("#txtjobTitle").val() === "" && $("#txtnationalIDNumber").val() === "") {  
  7.                 alert("Provide Details to Search !");  
  8.             }  
  9.             else {  
  10.   
  11.                 var obj = {};  
  12.                 obj.jobTitle = $.trim($("#txtjobTitle").val());  
  13.                 obj.nationalIDNumber = $.trim($("#txtnationalIDNumber").val());  
  14.   
  15.                 var apiUrl = "@Url.Action("DataSearch", "AllSearch")";  
  16.   
  17.                 $.ajax({  
  18.                     type: "POST",  
  19.                     contentType: 'application/json',  
  20.                     url: apiUrl,  
  21.                     dataType: "json",  
  22.                     data: JSON.stringify(obj),  
  23.                     crossDomain: true,  
  24.                     success: function (data) {  
  25.                         var response = data;  
  26.   
  27.                         if (data.datasend.length <= 0) {  
  28.                             alert("No Data Found!!");  
  29.                         } else {  
  30.   
  31.                             var timetook = data.Took;  
  32.                             $('div.total-title').text(timetook + " millisecond");  
  33.   
  34.                             $("#gridContainer").dxDataGrid({  
  35.                                 dataSource: data.datasend,  
  36.                                 showColumnLines: false,  
  37.                                 showRowLines: true,  
  38.                                 rowAlternationEnabled: true,  
  39.                                 showBorders: true,  
  40.                                 paging: {  
  41.                                     pageSize: 50  
  42.                                 },  
  43.                                 scrolling: {  
  44.                                     mode: "infinite" // or "virtual" | "infinite"  
  45.                                 },  
  46.                                 pager: {  
  47.                                     showPageSizeSelector: false,  
  48.                                     allowedPageSizes: [5, 10, 20],  
  49.                                     showInfo: true  
  50.                                 },  
  51.                                 columns: [  
  52.                                     {  
  53.                                         caption: "JobTitle",  
  54.                                         width: 350,  
  55.                                         fixed: true,  
  56.                                         dataField: "jobtitle"  
  57.                                     },  
  58.                                     {  
  59.                                         caption: "NationalIDNumber",  
  60.                                         width: 300,  
  61.                                         fixed: true,  
  62.                                         dataField: "nationalidnumber"  
  63.                                     },  
  64.                                      "MaritalStatus",  
  65.                                      "Gender",  
  66.                                      "SalariedFlag",  
  67.                                      "VacationHours",  
  68.                                      "SickLeaveHours",  
  69.                                      "CurrentFlag"  
  70.                                 ]  
  71.                             });  
  72.   
  73.                         }  
  74.                     },  
  75.                     error: function (xhr, err) {  
  76.                         alert("readyState: " + xhr.readyState + "\nstatus: " + xhr.status);  
  77.                         alert("responseText: " + xhr.responseText);  
  78.                     }  
  79.   
  80.                 });  
  81.   
  82.             }  
  83.   
  84.         });  
  85.   
  86.     });  
  87.   
  88. </script>  

Markup of Grid

  1. <div class="panel panel-default">  
  2.     <div class="panel-heading">Output</div>  
  3.     <div class="panel-body">  
  4.         <div class="row">  
  5.             <div class="col-lg-12">  
  6.                 <div id="gridContainer"></div>  
  7.             </div>  
  8.         </div>  
  9.     </div>  
  10. </div>   

We have set up everything. Let’s run the code and see the output.

Output

Elastic search

Let’s see in Debug Mode how it works.

Searching Values

Elastic search

Getting Response

Elastic search

Single Document View

Elastic search

Let us now make the search conditional, i.e., the user can use any combination to search.

Elastic search

If the user searches data by Jobtitle only, then he will get response according to jobtitle. If a user does search with nationalidnumber, then he will get response according to it. Finally, the combination of both (Jobtitle+ nationalidnumber) can also be used to search, then the user will get response according to it.

Code Snippet 

  1. public JsonResult DataSearch(string jobtitle, string nationalIDNumber)  
  2.       {  
  3.   
  4.           if (!string.IsNullOrEmpty(jobtitle) && !string.IsNullOrEmpty(nationalIDNumber))  
  5.           {  
  6.               var responsedata = _connectionToEs.EsClient().Search<Humanresources>(s => s  
  7.                                .Index("humanresources")  
  8.                                .Type("doc")  
  9.                                .Size(50)  
  10.                                .Query(q => q  
  11.                                    .Match(m => m  
  12.                                        .Field(f => f.jobtitle)  
  13.                                        .Query(jobtitle)  
  14.                                    )  
  15.                                    && q  
  16.                                    .Match(m => m  
  17.                                        .Field(f => f.nationalidnumber)  
  18.                                        .Query(nationalIDNumber)  
  19.                                ))  
  20.                            );  
  21.   
  22.               var datasend = (from hits in responsedata.Hits  
  23.                               select hits.Source).ToList();  
  24.   
  25.               return Json(new { datasend, responsedata.Took }, behavior: JsonRequestBehavior.AllowGet);  
  26.   
  27.           }  
  28.           else if (!string.IsNullOrEmpty(jobtitle))  
  29.           {  
  30.               var responsedata = _connectionToEs.EsClient().Search<Humanresources>(s => s  
  31.                               .Index("humanresources")  
  32.                               .Type("doc")  
  33.                               .Size(50)  
  34.                               .Query(q => q  
  35.                                   .Match(m => m  
  36.                                       .Field(f => f.jobtitle)  
  37.                                       .Query(jobtitle)  
  38.                                   )));  
  39.   
  40.               var datasend = (from hits in responsedata.Hits  
  41.                               select hits.Source).ToList();  
  42.   
  43.               return Json(new { datasend, responsedata.Took }, behavior: JsonRequestBehavior.AllowGet);  
  44.           }  
  45.           else if (!string.IsNullOrEmpty(nationalIDNumber))  
  46.           {  
  47.               var responsedata = _connectionToEs.EsClient().Search<Humanresources>(s => s  
  48.                               .Index("humanresources")  
  49.                               .Type("doc")  
  50.                               .Size(50)  
  51.                               .Query(q => q  
  52.                                   .Match(m => m  
  53.                                       .Field(f => f.nationalidnumber)  
  54.                                       .Query(nationalIDNumber)  
  55.                                   )));  
  56.               var datasend = (from hits in responsedata.Hits  
  57.                               select hits.Source).ToList();  
  58.   
  59.               return Json(new { datasend, responsedata.Took }, behavior: JsonRequestBehavior.AllowGet);  
  60.           }  
  61.           return Json(data: null, behavior: JsonRequestBehavior.AllowGet);  
  62.   
  63.       }  

Output

Elastic search

These are simple examples which will help you to start using elastic search with ASP.NET Application. There are lots of filters and ways to write query in Elastic using “Nest” in ASP.NET. 

Finally, we have learned how to simply query elastic search using “Nest” Client and display data in grid.


Similar Articles