From 2b5cc52e27dfb83c3e2f037763ca0635b2f10416 Mon Sep 17 00:00:00 2001 From: Dave Brock Date: Wed, 24 Oct 2018 19:27:48 -0500 Subject: [PATCH] Search improvements for RP version (#9120) I moved the new model props at the top, so that we could include the `SearchString` before moving on to other parts of the document. Fixes #8001 --- .../RazorPagesMovie/Pages/Movies/Index.cshtml | 2 +- .../Pages/Movies/Index.cshtml.cs | 3 ++ .../Pages/Movies/Index.cshtml.cs | 1 + aspnetcore/tutorials/razor-pages/search.md | 41 ++++++++++--------- 4 files changed, 27 insertions(+), 20 deletions(-) diff --git a/aspnetcore/tutorials/razor-pages/razor-pages-start/sample/RazorPagesMovie/Pages/Movies/Index.cshtml b/aspnetcore/tutorials/razor-pages/razor-pages-start/sample/RazorPagesMovie/Pages/Movies/Index.cshtml index edfc88c51a..a931ea2dea 100644 --- a/aspnetcore/tutorials/razor-pages/razor-pages-start/sample/RazorPagesMovie/Pages/Movies/Index.cshtml +++ b/aspnetcore/tutorials/razor-pages/razor-pages-start/sample/RazorPagesMovie/Pages/Movies/Index.cshtml @@ -17,7 +17,7 @@ - Title: + Title:

diff --git a/aspnetcore/tutorials/razor-pages/razor-pages-start/sample/RazorPagesMovie/Pages/Movies/Index.cshtml.cs b/aspnetcore/tutorials/razor-pages/razor-pages-start/sample/RazorPagesMovie/Pages/Movies/Index.cshtml.cs index 7a4e02fcc7..54413300e1 100644 --- a/aspnetcore/tutorials/razor-pages/razor-pages-start/sample/RazorPagesMovie/Pages/Movies/Index.cshtml.cs +++ b/aspnetcore/tutorials/razor-pages/razor-pages-start/sample/RazorPagesMovie/Pages/Movies/Index.cshtml.cs @@ -24,6 +24,7 @@ namespace RazorPagesMovie.Pages.Movies } public IList Movie { get; set; } + public string SearchString { get; set; } public SelectList Genres { get; set; } public string MovieGenre { get; set; } #endregion @@ -43,6 +44,7 @@ namespace RazorPagesMovie.Pages.Movies #endregion Movie = await movies.ToListAsync(); + SearchString = searchString; } #endregion #endif @@ -75,6 +77,7 @@ namespace RazorPagesMovie.Pages.Movies Genres = new SelectList(await genreQuery.Distinct().ToListAsync()); #endregion Movie = await movies.ToListAsync(); + SearchString = searchString; } #endregion #endif diff --git a/aspnetcore/tutorials/razor-pages/razor-pages-start/sample/RazorPagesMovie21/Pages/Movies/Index.cshtml.cs b/aspnetcore/tutorials/razor-pages/razor-pages-start/sample/RazorPagesMovie21/Pages/Movies/Index.cshtml.cs index 1bee84e379..8d0c803d31 100644 --- a/aspnetcore/tutorials/razor-pages/razor-pages-start/sample/RazorPagesMovie21/Pages/Movies/Index.cshtml.cs +++ b/aspnetcore/tutorials/razor-pages/razor-pages-start/sample/RazorPagesMovie21/Pages/Movies/Index.cshtml.cs @@ -21,6 +21,7 @@ namespace RazorPagesMovie.Pages.Movies } public IList Movie { get; set; } + public string SearchString { get; set; } public SelectList Genres { get; set; } public string MovieGenre { get; set; } #endregion diff --git a/aspnetcore/tutorials/razor-pages/search.md b/aspnetcore/tutorials/razor-pages/search.md index 743ca517fd..5a6153fc31 100644 --- a/aspnetcore/tutorials/razor-pages/search.md +++ b/aspnetcore/tutorials/razor-pages/search.md @@ -13,6 +13,26 @@ By [Rick Anderson](https://twitter.com/RickAndMSFT) In this document, search capability is added to the Index page that enables searching movies by *genre* or *name*. +Add the following highlighted properties to *Pages/Movies/Index.cshtml.cs*: + +::: moniker range="= aspnetcore-2.0" + +[!code-csharp[](razor-pages-start/sample/RazorPagesMovie/Pages/Movies/Index.cshtml.cs?name=snippet_newProps&highlight=11-999)] + +::: moniker-end + +::: moniker range=">= aspnetcore-2.1" + +[!code-csharp[](razor-pages-start/sample/RazorPagesMovie21/Pages/Movies/Index.cshtml.cs?name=snippet_newProps&highlight=11-999)] + +::: moniker-end + +* `SearchString`: contains the text users enter in the search text box. +* `Genres`: contains the list of genres. This allows the user to select a genre from the list. +* `MovieGenre`: contains the specific genre the user selects (for example, "Western"). + +You'll work with the `Genres` and `MovieGenre` properties later in this document. + Update the Index page's `OnGetAsync` method with the following code: [!code-csharp[](razor-pages-start/sample/RazorPagesMovie/Pages/Movies/Index.cshtml.cs?name=snippet_1stSearch)] @@ -35,6 +55,8 @@ The `s => s.Title.Contains()` code is a [Lambda Expression](/dotnet/csharp/progr **Note:** The [Contains](/dotnet/api/system.data.objects.dataclasses.entitycollection-1.contains) method is run on the database, not in the C# code. The case sensitivity on the query depends on the database and the collation. On SQL Server, `Contains` maps to [SQL LIKE](/sql/t-sql/language-elements/like-transact-sql), which is case insensitive. In SQLite, with the default collation, it's case sensitive. +Lastly, the final line of the `OnGetAsync` method populates the `SearchString` property with the user's search value. With the `SearchString` property populated, the search value is retained in the search box after the search executes. + Navigate to the Movies page and append a query string such as `?searchString=Ghost` to the URL (for example, `http://localhost:5000/Movies?searchString=Ghost`). The filtered movies are displayed. ![Index view](search/_static/ghost.png) @@ -61,25 +83,6 @@ The HTML `
` tag uses the [Form Tag Helper](xref:mvc/views/working-with-for ## Search by genre -Add the following highlighted properties to *Pages/Movies/Index.cshtml.cs*: - -::: moniker range="= aspnetcore-2.0" - -[!code-csharp[](razor-pages-start/sample/RazorPagesMovie/Pages/Movies/Index.cshtml.cs?name=snippet_newProps&highlight=11-999)] - -::: moniker-end - -::: moniker range=">= aspnetcore-2.1" - -[!code-csharp[](razor-pages-start/sample/RazorPagesMovie21/Pages/Movies/Index.cshtml.cs?name=snippet_newProps&highlight=11-999)] - -::: moniker-end - - -The `Genres` property contains the list of genres. This allows the user to select a genre from the list. - -The `MovieGenre` property contains the specific genre the user selects (for example, "Western"). - Update the `OnGetAsync` method with the following code: [!code-csharp[](razor-pages-start/sample/RazorPagesMovie/Pages/Movies/Index.cshtml.cs?name=snippet_SearchGenre)]