Learn

We start by expanding our sample data to include all known continents and countries. This is done by replacing the DBInitializer code with DBInitializerFull. This will make any filtering and searching we do more interesting.

Now that we have over 200 countries in the list, we need to add some code to search and filter. We do this by adding a input text box for a search string. A button can post back a form with this string. To make this work, the SearchString must use the [BindProperty] annotation with special qualifier of SupportsGet. This basically tells the OnGetAsync() method that a SearchString may exist when the page is ready to load. That way the SearchString could be added as a query parameter in a bookmarked URL:

[BindProperty(SupportsGet = true)]
public string SearchString { get; set; }

OnGetAsync() then uses a conditional statement to add the SearchString value to a new LINQ query. The var countries is first assigned a LINQ statement that returns all rows by default. If a SearchString is present, the query is modified to include a where clause that filters only by Name.

var countries = from c in _context.Countries
  select c;

if (!string.IsNullOrEmpty(SearchString))
{
  countries = countries.Where(c => c.Name.Contains(SearchString));
}

The LINQ query is not turned into a SQL database query until the ToListAsync() method is called:

Countries = await countries.ToListAsync();

This is an important concept in LINQ. Any number of modifications to a query are allowed until the final evaluation to a list.

Instructions

Country.db was deleted for you and filled with a larger data set. Open Data/DBInitializerFull.cs and inspect the code. This does exactly what the first DBInitializer did but with all the countries. This has a different class name so all we needed to do was change the class method call in Program.cs.

Test it out by selecting countries from the top nav bar. Note the list is now close to 200 rows.

(You don’t need to write code here, just click Run. Additionally, you can close Data/DBInitializerFull.cs and Program.cs in the editor.)

Open the file Pages/Countries/Index.cshtml.cs. Add a using statement at the top that enables LINQ statements:

System.Linq

Add a public property called SearchString to store the target text. This comes back in the <form> GET request, so bind to that explicitly.

Using LINQ, select all countries, check if the search string is not empty, then filter the selection to only those countries which contain the search string in their name:

The first query should be stored in a var called countries. It should select all countries.
Add an if clause that checks that the search string is not empty. If true, use where to filter countries to only those that have the search string in their Name.

Change the line that retrieves the records to use the LINQ query.

Note that the database SQL statement is not formulated until the ToListAsync() chain method is applied. The LINQ query can be manipulated up until that point and any changes made to the LINQ query are factored in the generated SQL.

Open the file Pages/Countries/Index.cshtml. Change the heading to make room for the search section (add a <div> wrapper). Add a <form> that can post back the search string. All this goes inside the jumbotron below the heading <div>. Note that the <input> tags are styled similar to the rest of the page for consistency:

<div class="jumbotron p-3">
  <div class="d-flex align-items-center">
    <h1 class="display-4 flex-grow-1">
      Country List
    </h1>
    <a class="btn btn-primary btn-sm" asp-page="./Edit">
      Create
    </a>
  </div>
  <form class="form-group">
    <label asp-for="SearchString" class="control-label">
      Name:
    </label>
    <input class="p-2" type="text" asp-for="SearchString" />
    <input type="submit" value="Search" class="btn btn-primary btn-sm" />
  </form>
</div>

Run the site and view the results in the browser. Select Countries from the top nav bar. Enter a search string and click the search button. Partial searches are supported. Try a few. Clear the search box and click search again to see all records.

Sign up to start coding

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?