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.

Step 2

Create a Model Class using the following procedure:

Add the following code:

Step 3

Now 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:

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:

Add the following code:

Step 6

Execute the application.

Provide a year for searching the data.