The question is: This page allows a person to view an item in more...

The question is: This page allows a person to view an item in more detail.  Can you work out why the search is not working?

The sample code:

using WebMatrix.Data
@{
   var db = Database.Open("AOWebApp");
   var sql = "SELECT TOP 3 * FROM Items AS I " +
                           "WHERE itemName LIKE CONCAT(@0, '%') ";

   var sortOrder = Request.Form["so"];
   if (sortOrder == "pa")
   {
       sql += "ORDER BY itemCost ASC";
   }
   else if (sortOrder == "pd")
   {
       sql += "ORDER BY itemCost DESC";
   }
   else
   {
       sql += "ORDER BY itemName";
   }

   var data = db.Query(sql, Request.Form["searchText"]);
}

<div class="jumbotron py-1">
   <h2 class="text-center">Question 3</h2>
   <p>This page allows a person to view an item in more detail.  Can you work out why the search is not working?</p>
</div>

<form method="get" action="/Home/Question3" class="row justify-content-center">
   <div class="col-2">
       <input type="text" name="searchText" v.."@Request.Form["searchText"]" placeholder="Search Products..." class="form-control" />
   </div>
   <div class="col-2">
       <select name="so" class="form-control">
           <option value="">Order by</option>
           <option value="pa">Price [low - high]</option>
           <option value="pd">Price [high - low]</option>
       </select>
   </div>
   <div class="col-2">
       <button type="submit" class="btn btn-primary">Search</button>
   </div>
</form>

<div class="row justify-content-center mt-5">

   @foreach (var row in data)
   {
       
           <div class="card mb-2 mr-3 col-3">
               <img class="card-img-top" s.."@row.itemImage" &.."@row.itemName image" >
               
               <div class="card-body">
                   <h5 c..;@row.itemName</h5>
                   <p c..;@row.itemCost.ToString("C")</p>

                   @if (@row.itemDescription.Length > 50)
                   {
                       <p c..;@Convert.ToString(@row.itemDescription).Substring(0, 50)...</p>
                   }
                   else
                   {
                       <p c..;@row.itemDescription</p>
                   }

               </div>
           </div>
       
   }

</div>

@section scripts {
   <script>

       var card = document.querySelectorAll('.card');
       for (var i = 0; i < card.length; i++) {
           card[i].addEventListener('click', function () {
               this.querySelector('a').click();
           })
       }
   </script>
}

@*
   ##########################################################################################################

       No peaking until you have at least attempted to solve this question yourself!

    ##########################################################################################################

*@

<div class="row">
   <div class="col">
       <div class="col">
           <button href="#Hint" class="btn btn-primary" data-toggle="collapse">Hint</button>
       </div>

       <div id="Hint" class="collapse col mt-3">

           <p>To obtain a value from a form element, it is important the method is set correctly (Note: there are two methods)...</p>

           <div>
               <button href="#Solution" class="btn btn-danger" data-toggle="collapse">Solution</button>
           </div>

           <div id="Solution" class="collapse col mt-3">
               <p>The method on this page is set to "get" but should be "<b>post</b>"</p>

               <p>You must replace the following line:</br>
                  &..;@Convert.ToString("<form method=\"get\" action=\"/Home/Question3\">") </br>
                   with:</br>
                  &..;@Convert.ToString("<form method=\"post\" action=\"/Home/Question3\">")
               </p>
           </div>
       </div>
   </div>
</div>
@functions {
   public string shortDescription(string str)
   {
       if (!string.IsNullOrWhiteSpace(str) && str.Length > 60)
       {
           str = str.Substring(0, 60) + ". . .";
       }
       return str;
   }
}