Create an ASP.NET MVC Data-based Web App Pt 5 - Create a Search box

Now we need to add some filtering so the user can search for a specific Fabric. We need to add a parameter to our Index action to accept a user's search term.

Step 1: Add the following to the Index action on your controller

public ActionResult Index(string searchTerm = null)
{

}

Step 2: Add a Where clause to our query to search for the given search term. Under "OrderByDescending" clause, add the following line of code:

.Where(f => searchTerm == null || f.Name.StartsWith(searchTerm))

Do a Build and Run the application.

Now you can use the query string parameter and do a search in the address bar such as:

"http://localhost:53163/Fabric/?searchTerm=T"

And it will find and display all the fabrics' names that start with the letter T.

Step 3: Add a search text box on Index View of your controller...
Above, the Create New link add the form tag like the following:

<form method="get">
    <input type="search" name="searchTerm" />
    <input type="submit" value="Search By Name" />
</form>

Build and Run the application.

You should see a text box with the "Search By Name" submit button next to it. Try typing a letter in the box and click Search. It filters the list by the search term.

*Tip - Use a "method=get" request for search terms because the form puts the query string in the URL, so you can copy and paste the URL into an email and revisit the search results. If you use "method=post" the query string is hidden in the HTTP body and not in the URL. You would use a GET request for something that is sensitive to be stored in the database because that data would be publicly visible.

 

Add comment

Loading