Add a Search Box in Web API

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.

• Start Visual Studio 2012.
• From the start window Select "Installed" -> "Visual C#" -> "Web".
• Select "ASP.NET MVC4 Web Application" and click on the "Ok"button.
  
  
  
  
• From the "MVC4 Project" window select "Web API".
  
  
  
  
• Click on the "OK" button.

Step 2

Create a Model Class using the following procedure:

• In the "Solution Explorer".
• Right-click on the Model Folder.
• Select "Add" -> "Class".
• Select "Installed" -> "Visual C#" and select class.
  
  
  
  
• Click on the "Add" button

Add the following code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace SearchAPI.Models
{
    public class TopicModel
    {
        private string moviename;
        public string MovieName
        {
            get { return moviename; }
            set { moviename = value; }
        }
        private int year;
        public int Year
        {
            get { return year; }
            set { year = value; }
        }
    }
}

Step 3

Now select the "HomeController".

• In the "Solution Explorer".
• Expand the Controller folder.
• Select the "HomeController".
  
  
  

Add the following Code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using SearchAPI.Models;
namespace SearchAPI.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index(string value)
        {
             List<TopicModel> HorrorMovie = new List<TopicModel>
             {
                 new TopicModel(){ MovieName="Atma", Year=2013},
                 new TopicModel(){ MovieName="HorrerStory", Year=2013},
                 new TopicModel(){ MovieName="1920", Year=2008},
                 new TopicModel(){ MovieName="Veerana", Year=1988},
                 new TopicModel(){ MovieName="Darna Mana hai", Year=2003},
                 new TopicModel(){ MovieName="Raaz", Year=2002},
                 new TopicModel(){ MovieName="Razz3", Year=2012},
                 new TopicModel(){ MovieName="Haunted", Year=2011},
                  new TopicModel(){ MovieName="Bhoot", Year=2003},
             };
            var title = HorrorMovie.Where(x => x.Year == (Convert.ToInt32(value)) || value == null).ToList();
            if (Request.IsAjaxRequest())
            {
                return PartialView("Detail", title);
            }
            return View(title);
        }
    }
}

Step 4

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

• In the "Solution Explorer".

• Expand "Views" folder.

• Select "Home" -> "index.cshtml".
  
  
  

Add the following Code:

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

Step 5

Add an another View:

• In the HomeController.

• Right-click on the "Index" Action method.

• Select "Add View" and change the name to "Detail".
  
  
  

• Click on the "Add" button.

Add the following code:

@{
    ViewBag.Title = "Detail";
}
<h2> List of Horror Movie</h2>
@model IEnumerable<SearchAPI.Models.TopicModel>
<table>
    <tr>
        <th>Movie Name</th>
        <th>Released Year</th>
    </tr>
@foreach (var m in Model) {
    <tr>
        <td>
            @Html.Encode(m.MovieName)
        </td>
         <td>
            @Html.Encode(m.Year)
        </td>
    </tr>
}
</table>

Step 6

Execute the application.

Provide a year for searching the data.