Using Partial View to implement Search Bar in ASP.NET MVC3

In this article previous I was introduce about Using Partial View in ASP.NET MVC 3. To day I will introduce step by step how to use Partial View to implement Search Bar in ASP.NET MVC3.

1. Create a new project with Razor View engine and set named MvcApplications.SearchBar

image

2. Create two classes Product.cs and ProductModel.cs under Model folder

public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public double Price { get; set; }
        public string Description { get; set; }
    }

 

public class ProductModel
    {
        public static List Products()
        {
            List productList = new List() {
                new Product {Id = 1, Name = "HTC HD7", Price = 100, Description = "HTC HD7"},
                new Product {Id = 2, Name = "HTC Trophy", Price = 80, Description = "HTC Trophy"},
                new Product {Id = 3, Name = "Samsung Galaxy S1", Price = 100, Description = "Samsung Galaxy S1"},
                new Product {Id = 4, Name = "Samsung Galaxy S2", Price = 110, Description = "Samsung Galaxy S2"},
                new Product {Id = 5, Name = "Samsung Galaxy S3", Price = 120, Description = "Samsung Galaxy S3"},
            };

            return productList;
        }

        public static List FillProduct(string name)
        {
            List productList = new List();
            productList = Products().Where(p => p.Name.Contains(name)).ToList();

            return productList;
        }
    }

3. Create a  SearchController under /Controllers that contains a Resultsaction.  This action will be called when a search request is entered and the user presses Enter or the Search button.  The action accepts a string parameter,searchText, which will contain the string the user searched on.  We can do our search logic in here and present a view containing the search results that match the user’s request.

image

4. Create a new PartialView under /Views/Shared, called _SearchBarPartial.cshtml. This contains a TextBox and a Search button wrapped inside a Form.

image

The form in _SearchBarPartial.cshtml is declared with some additional parameters to tell it that the Post should go to a our Results action in the Searchcontroller.

_SearchBarPartial.cshtml

</pre>
<div class="search-bar">@using (Html.BeginForm("Results", "Search"))
{
 @Html.TextBox("SearchText")
 <input class="search-button1" type="submit" value="Search" />
}</div>
<pre>

6. In the _Layout.cshtml we will call _SearchBarPartial.cshtml

@Html.Partial("_SearchBarPartial")

The _Layout.cshtml


    @ViewBag.Title
<script type="text/javascript" src="@Url.Content("></script>

</pre>
<div class="page">
<div id="header">
<div id="title">
<h1>Search Bar Application</h1>
</div>
<div id="logindisplay">@Html.Partial("_LogOnPartial")</div>
<div id="searchdisplay">@Html.Partial("_SearchBarPartial")</div>
<div id="menucontainer">
<ul id="menu">
	<li>@Html.ActionLink("Home", "Index", "Home")</li>
	<li>@Html.ActionLink("About", "About", "Home")</li>
</ul>
</div>
</div>
<div id="main">@RenderBody()</div>
<div id="footer"></div>
</div>
<pre>

7. The next we will implement action Result in SearchController.

[HttpPost]
public ActionResult Results(string searchText)
{
   var result = ProductModel.FillProduct(searchText);
   return View(result);
}

8. Add Results.cshtml to display result.

image

9. Build and run website

image

Happy coding!

Advertisements
This entry was posted in ASP.NET MVC. Bookmark the permalink.

2 Responses to Using Partial View to implement Search Bar in ASP.NET MVC3

  1. Adele says:

    what a great post! thanks very much for sharing it with us…http://www.divulgaemail.com

  2. Tony Junior says:

    Awesome Tutorial Will Implement This Search Bar In My Updated Version of My Site.
    Thanks

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s