Server Side Approach for Executing Common Search Scenario in Web Application

Introduction

A common scenario that is required in an application is to search a data model against a certain search value. Due to the nature of the http protocol (being stateless):

1. The submit of the search result will render the page again.
2. The search expression entered will be lost.

One common solution to this problem is to create an asynchronous http request using jquery to just redraw the part which will hold the search result.

Example

1. Create a new ASP.NET MVC Core application in Visual Studio 2019 as follows:

2. Add a model under the models folder with name ShopInfoModel, place the following code in the model

 public class ShopInfoModel
{

    public int ID { get; set; }


    public string Name { get; set; }


    public string Address { get; set; }


    public int Pincode { get; set; }

}

3. In the controllers folder replace code of home controller with code below

    public class HomeController : Controller
    {
        public HomeController()
        {
           
        }

        public IActionResult IndexDisplaySearchWithAjaxRequest()
        {
            return View();
        }
        public IActionResult Index()
        {
            return View(new ShopInfoSearchModel { shops = new List<ShopInfoModel>() });
        }

        [HttpGet]
        public IActionResult Search(string name)
        {
            /*For simplicity this is a dummy list for test*/
            List<ShopInfoModel> shops = new List<ShopInfoModel>
            {
               new ShopInfoModel{Name="Model1",Pincode=1},
               new ShopInfoModel{Name="Model2",Pincode=2},
            };

             shops = shops.Where(w => w.Name.Contains(name)).ToList();

            return Json(shops);
        }

    [HttpPost]
        public IActionResult Search(ShopInfoSearchModel searchModel)
        {
            /*For simplicity this is a dummy list for test*/
            List<ShopInfoModel> shops = new List<ShopInfoModel>
            {
               new ShopInfoModel{Name="Model1",Pincode=1},
               new ShopInfoModel{Name="Model2",Pincode=2},
            }; 
            
            searchModel.shops = shops.Where(w => w.Name.Contains(searchModel.SearchText)).ToList();

            return View("Index", searchModel);
        }
    }

...

4. Under views\home folder add a view named IndexDisplaySearchWithAjaxRequest. Place the following code in the view as follows

@{

    ViewData["Title"] = "Home Page";
}

    <table>
        <tr>
            <td><input type="text" id="txtsearch" /></td>
           
            <td><button type="button" id="btnsearch">Search</button></td>
        </tr>

       
    </table>

@section Scripts
{
<script>
    
        $(document).ready(function () {
            $("#btnsearch").click(function()
             {
                $.ajax({
                    url: '@Url.Action("Search", "Home")',
                    data: { "name": $("#txtsearch").val()},
                    success: function (data)
                    {
                        var table = $("<table />");
                        for (var i = 0; i < data.length; i++) {
                            var row = $('<tr><td>' + data[i].name
                                + '</td><td>' + data[i].address + '</td><td>' + data[i].pincode + '</td></tr>');
                            //--->foreach column we will add a concat operation <---

                            $('table').append(row);
                        }
                    }
                });
                }
                )

        })
</script>
}

...

5. Run the application, add Home/IndexDisplaySearchWithAjaxRequest to the URL in the address and press enter

Now we come to the heart of the article. The solution in this article presents a server side approach (i.e., returning the result absolutely from the controller to the view). This will reduce the amount of time needed to:

1. create table rows by creating a string in jquery, which hold the table row and the row cells
2. repeat a concat operation for every table cell

As appear in step 4 above

Adding the Search Model

1. Add a new model under models folder. Name it ShopInfoSearchModel.cs
2. Add the following code in the class
   C#

   //
    public class ShopInfoSearchModel
       {
           //this model is bound to the view containing the search form 
         public List<ShopInfoModel> shops { get; set; }//list of search result reocrds
   
           public string SearchText { get; set; }
       }
   }
   
   ...

Modifying Home Controller

1. Add a new model under models folder. Name it ShopInfoSearchModel.cs

   Replace code of index method in the home controller with the following code

   C#

    public IActionResult Index()
           {
               return View(new ShopInfoSearchModel { shops = new List<ShopInfoModel>() });
           }
   
   ...

2. Add the following method in the home controller
   C#

     [HttpPost]
       public IActionResult Search(ShopInfoSearchModel searchModel)
       {
           /*For simplicity this is a dummy list for test*/
           List<ShopInfoModel> shops = new List<ShopInfoModel>
           {
              new ShopInfoModel{Name="Model1",Pincode=1},
              new ShopInfoModel{Name="Model2",Pincode=2},
           };
   
           searchModel.shops = shops.Where(w => w.Name.Contains(searchModel.SearchText)).ToList();
   
           return View("Index", searchModel);
       }
   }
   ...
   

Modify Home View

Replace code in the home/index.cshtm with the following

     @{
   
    ViewData["Title"] = "Home Page";
}

@using (Html.BeginForm("Search", "Home", FormMethod.Post))
{
    <table>
        <tr>
            <td>@Html.TextBoxFor(f => f.SearchText)</td>
            <td><button type="submit">Search</button></td>
         
        </tr>

        @foreach (var item in Model.shops)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.ID)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Address)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Pincode)
                </td>
              
            </tr>
        }
        </table>


    }

    ...

When running the application, search against the model will be executed by clicking the search button and will give the same result as the ajax request approach

History

• 27^th May, 2021: Initial version