SearchPage.md

Add search to a Razor page using Visual Studio Code

The following tutorial is based on "Get started with ASP.NET Core Razor Pages in Visual Studio Code" from docs.microsoft.com.

Prerequisites

• .NET 7 SDK
• Visual Studio Code
• Tutorial 1- Create a Razor Page application
• Tutorial 2- Add a Model
• Tutorial 3- Update Page

Adding Search to a page

In this tutorial, you're going to add search to the Index Page. By the end of this tutorial, you'll be able to search by genre and name.

Open Pages/Movies/Index.cshtml.cs and replace the OnGetAsync method with the following code:

public async Task OnGetAsync(string searchString)
{
    var movies = from m in _context.Movie
                 select m;

    if (!String.IsNullOrEmpty(searchString))
    {
        movies = movies.Where(s => s.Title.Contains(searchString));
    }

    Movie = await movies.ToListAsync();
}

Test search string

• Run your application by typing dotnet run on the terminal and open the Movies Page (http://localhost:{port}/Movies).
• Append the query string to the end ?searchString=[Film Title] (for example, http://localhost:{port}/Movies?searchString=panther)

Add a Search Box

Search by Title

1. Open the Index.cshtml file and add the <form> element as shown in the following code:

   <h1>Index</h1>
   
   <p>
       <a asp-page="Create">Create New</a>
   </p>
   <form>
       <p>
           Movie Title: <input type="text" name="SearchString">
           <input type="submit" value="Filter"/>
       </p>
   </form>

2. Run your application by typing dotnet run on the terminal and open the Movies Page (http://localhost:{port}/Movies).

3. Enter a film title in the search box.

   

Search by Genre

1. Open the Pages/Movies/Index.cshtml.cs file and add the following code:

   public class IndexModel : PageModel
   {
       private readonly RazorPagesMovie.Data.RazorPagesMovieContext _context;
   
       public IndexModel(RazorPagesMovie.Data.RazorPagesMovieContext context)
       {
           _context = context;
       }
   
       public IList<Movie> Movie { get;set; } = default!;
       public SelectList Genres;
       public string MovieGenre { get; set; }

2. Update the OnGetAsync method on that same file:

   public async Task OnGetAsync(string movieGenre,string searchString)
   {
       IQueryable<string> genreQuery = from m in _context.Movie
                               orderby m.Genre
                               select m.Genre;
   
       var movies = from m in _context.Movie
                   select m;
   
       if (!String.IsNullOrEmpty(searchString))
       {
           movies = movies.Where(s => s.Title.Contains(searchString));
       }
   
       if (!String.IsNullOrEmpty(movieGenre))
       {
           movies = movies.Where(x => x.Genre == movieGenre);
       }
       Genres = new SelectList(await genreQuery.Distinct().ToListAsync());
       Movie = await movies.ToListAsync();
   }

3. Open the Pages/Movies/Index.cshtml file and update the form element code:

   <form>
       <p>
           <select asp-for="MovieGenre" asp-items="Model.Genres">
               <option value="">All</option>
           </select>
           
           Movie Title: <input type="text" name="SearchString">
           <input type="submit" value="Filter"/>
       </p>
   </form>

4. Run your application by typing dotnet run on the terminal and open the Movies Page (http://localhost:{port}/Movies).

5. Enter a film genre in the drop down control.

   

Mission accomplished!

You've built your first Razor Page application!