Skip to content

Latest commit

 

History

History
128 lines (104 loc) · 4.11 KB

SearchPage.md

File metadata and controls

128 lines (104 loc) · 4.11 KB
Raw

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

Prerequisites

Adding Search to a page

In this quick tutorial we are going to search to the Index Page. By the end of this tutorial you can search by genre and name.

  • Update the Index page's OnGetAsync method

Add code below to Movies/Index.cshtml

@{
    Layout = "_Layout";
}

Then edit the Movies/Index.cshtml.cs

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
  • Append the query string to the end ?searchString=Wrinkle

Add a Search Box

Search by Title Open the Index.cshtml file and add the<form>

<h2>Index</h2>

<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>
  • run the application http://localhost:5000/movies
  • Enter a film title

Search by genre

  • Add the code below to Pages/Movies/Index.cshtml.cs

Note you will need to add using Microsoft.AspNetCore.Mvc.Rendering;

public class IndexModel : PageModel
{
    private readonly RazorPagesMovie.Models.MovieContext _context;

    public IndexModel(RazorPagesMovie.Models.MovieContext context)
    {
        _context = context;
    }

    public IList<Movie> Movie;
    public SelectList Genres;
    public string MovieGenre { get; set; }
  • Update OnGetAsync method
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();
        }
  • Update Index.cshtml
<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>
  • run the application http://localhost:5000/movies

Mission Accomplished

You've have built your first Razor Page application