Introduction

This article describes how to add a search box in the Web API. Here we search the data by the year.

The following is the procedure for creating the application.

Step 1

Create a Web API application.

Step 2

Create a Model Class using the following procedure:

Add the following code:

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. namespace SearchAPI.Models
  6. {
  7. public class TopicModel
  8. {
  9. private string moviename;
  10. public string MovieName
  11. {
  12. get { return moviename; }
  13. set { moviename = value; }
  14. }
  15. private int year;
  16. public int Year
  17. {
  18. get { return year; }
  19. set { year = value; }
  20. }
  21. }
  22. }

Step 3

Now select the "HomeController".

Add the following Code:

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.Mvc;
  6. using SearchAPI.Models;
  7. namespace SearchAPI.Controllers
  8. {
  9. public class HomeController : Controller
  10. {
  11. public ActionResult Index(string value)
  12. {
  13. List<TopicModel> HorrorMovie = new List<TopicModel>
  14. {
  15. new TopicModel(){ MovieName="Atma", Year=2013},
  16. new TopicModel(){ MovieName="HorrerStory", Year=2013},
  17. new TopicModel(){ MovieName="1920", Year=2008},
  18. new TopicModel(){ MovieName="Veerana", Year=1988},
  19. new TopicModel(){ MovieName="Darna Mana hai", Year=2003},
  20. new TopicModel(){ MovieName="Raaz", Year=2002},
  21. new TopicModel(){ MovieName="Razz3", Year=2012},
  22. new TopicModel(){ MovieName="Haunted", Year=2011},
  23. new TopicModel(){ MovieName="Bhoot", Year=2003},
  24. };
  25. var title = HorrorMovie.Where(x => x.Year == (Convert.ToInt32(value)) || value == null).ToList();
  26. if (Request.IsAjaxRequest())
  27. {
  28. return PartialView("Detail", title);
  29. }
  30. return View(title);
  31. }
  32. }
  33. }

Step 4

Now write some HTML code in the "index.cshtml" file. This file exists:

Add the following Code:

  1. @model IEnumerable<SearchAPI.Models.TopicModel>
  2. <h3>
  3. Search movie by year</h3>
  4. @using (Ajax.BeginForm("Index", "Home", new AjaxOptions { HttpMethod = "GET", UpdateTargetId ="AllMovie" }))
  5. {
  6. <input id="SearchBox" type="text" name="value" />
  7. <input id="submit" type="submit" name="Search"/>
  8. }
  9. <div id="AllMovie">
  10. @Html.Partial("Detail", Model)
  11. </div>

Step 5

Add an another View:

Add the following code:

  1. @{
  2. ViewBag.Title = "Detail";
  3. }
  4. <h2> List of Horror Movie</h2>
  5. @model IEnumerable<SearchAPI.Models.TopicModel>
  6. <table>
  7. <tr>
  8. <th>Movie Name</th>
  9. <th>Released Year</th>
  10. </tr>
  11. @foreach (var m in Model) {
  12. <tr>
  13. <td>
  14. @Html.Encode(m.MovieName)
  15. </td>
  16. <td>
  17. @Html.Encode(m.Year)
  18. </td>
  19. </tr>
  20. }
  21. </table>

Step 6

Execute the application.

Execute Index.cshtml view

Provide a year for searching the data.

Invoke Detail View