Implement search page in ASP.NET Core

Suggested Videos
Part 24 - ASP.NET Core view components | Text | Slides
Part 25 - Pass parameters to view component in asp.net core | Text | Slides
Part 26 - ASP.NET Core view component tag helper | Text | Slides

In this video we will discuss how to implement search page in asp.net core



We want the search page to look like the following.






How Google search is implemented

When we search for something on Google. It issues a GET request passing the search term in the URL as a query string parameter. The query string parameter name is q (query for short I think).

Just like Google, we also want to implement the search using a GET request so the users can bookmark the URL if they want to. When they click on the book marked URL, they get to the search results straight away without the need to type the search term again.

Search Text Box and Button HTML

<form method="get">

    <div class="input-group">

        <input class="form-control" asp-for="SearchTerm">

        <div class="input-group-append">

            <button class="btn btn-primary" type="submit">Search</button>

        </div>

    </div>

</form>

• We are using Bootstrap 4 for styling the search text box and button.
• On the <form> element, method attribute is set to GET, because we want to implement the SEARCH using a GET request.
• The <input> element is bound to SearchTerm property. We will create this property in the PageModel class in just a bit.
• The button type is set to submit. When this button is clicked the search form is submitted to the server.

SearchTerm property in the PageModel class

This is the property the <input> element in the search form is bound to. With [BindProperty] attribute in place, ASP.NET Core model binding maps the value typed in the search text box to this property. By default, this happens only on a POST request. We want this model binding to happen on a GET request as well. This is the reason we have set SupportsGet = true. Since we are using a GET request to implement the search, the search term is passed to the server in the URL as a query string parameter.

[BindProperty(SupportsGet = true)]
public string SearchTerm { get; set; }

In the OnGet() method, call the EmployeeRepository Search() method passing it the SearchTerm.

public void OnGet()
{
    Employees = employeeRepository.Search(SearchTerm);
}

IEmployeeRepository.cs

public interface IEmployeeRepository
{
    IEnumerable<Employee> Search(string searchTerm);
    // Rest of the code
}

MockEmployeeRepository.cs

public class MockEmployeeRepository : IEmployeeRepository

{

    private List<Employee> _employeeList;

    public MockEmployeeRepository()

    {

        _employeeList = new List<Employee>()

    {

        new Employee() { Id = 1, Name = "Mary", Department = Dept.HR,

            Email = "mary@pragimtech.com", PhotoPath="mary.png" },

        new Employee() { Id = 2, Name = "John", Department = Dept.IT,

            Email = "john@pragimtech.com", PhotoPath="john.png" },

        new Employee() { Id = 3, Name = "Sara", Department = Dept.IT,

            Email = "sara@pragimtech.com", PhotoPath="sara.png" },

        new Employee() { Id = 4, Name = "David", Department = Dept.Payroll,

            Email = "david@pragimtech.com" },

    };

    }

    public IEnumerable<Employee> Search(string searchTerm = null)

    {

        if (string.IsNullOrEmpty(searchTerm))

        {

            return _employeeList;

        }

        return _employeeList.Where(e => e.Name.Contains(searchTerm) ||

                                        e.Email.Contains(searchTerm)).ToList();

    }

    // Rest of the code

}

Index.cshtml - Complete Code

@page

@model RazorPagesTutorial.Pages.Employees.IndexModel

@{

    ViewData["Title"] = "Index";

    ViewData["ShowButtons"] = true;

}

<style>

    .btn {

        width: 75px;

    }

</style>

<vc:head-count department="null"></vc:head-count>

<h1>Employees</h1>

<form method="get">

    <div class="input-group">

        <input class="form-control" asp-for="SearchTerm">

        <div class="input-group-append">

            <button class="btn btn-primary" type="submit">

                Search

            </button>

        </div>

    </div>

</form>

<div class="card-deck">

    @foreach (var employee in Model.Employees)

    {

        <partial name="_DisplayEmployeePartial"

                 model="employee" view-data="ViewData" />

    }

</div>

Index.cshtml.cs - Complete Code

using Microsoft.AspNetCore.Mvc;

using Microsoft.AspNetCore.Mvc.RazorPages;

using RazorPagesTutorial.Models;

using RazorPagesTutorial.Services;

using System.Collections.Generic;

namespace RazorPagesTutorial.Pages.Employees

{

    public class IndexModel : PageModel

    {

        private readonly IEmployeeRepository employeeRepository;

        public IEnumerable<Employee> Employees { get; set; }

        [BindProperty(SupportsGet = true)]

        public string SearchTerm { get; set; }

        public IndexModel(IEmployeeRepository employeeRepository)

        {

            this.employeeRepository = employeeRepository;

        }

        public void OnGet()

        {

            Employees = employeeRepository.Search(SearchTerm);

        }

    }

}