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.
![Select Asp.Net MVC4 Application]()
- From the "MVC4 Project" window select "Web API".
![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.
![Add Model 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".
![Select Controller]()
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:
![Select Index view]()
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:
![Create Partial View]()
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.
![Execute Index.cshtml view]()
Provide a year for searching the data.
![Invoke Detail View]()