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

aspnetcore/tutorials/razor-pages/razor-pages-start/sample/RazorPagesMovie/Pages/Movies/Index.cshtml

@@ -17,7 +17,7 @@
             <option value="">All</option>
         </select>
 
-        Title: <input type="text" name="SearchString">
+        Title: <input asp-for="SearchString">
         <input type="submit" value="Filter" />
     </p>
 </form>

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> 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

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> Movie { get; set; }
+        public string SearchString { get; set; }
         public SelectList Genres { get; set; }
         public string MovieGenre { get; set; }
         #endregion

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 `<form>` 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)]