Download Project  (Full Project)

Step-1

In this Part I will show how to write search product code.  First open the visual studio and open your existing project. There is two type of search one is basic Search which is search only one field and another is Advance Search which is search at a time multiple filed. Now in this section we work with Advance search. Advance Search are include in individual product and include category. Given bellow controller source code:Here we are going to some changes in our existing Index Method to pass parameter of search value. Controller code given bellow:

using Newtonsoft.Json;
using OnlineShoppingStore.DAL;
using OnlineShoppingStore.Models;
using OnlineShoppingStore.Models.Home;
using OnlineShoppingStore.Repository;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace OnlineShoppingStore.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index(string search)
        {
            HomeIndexViewModel model = new HomeIndexViewModel();
            return View(model.CreateModel());
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }
       
    }
}

Step-2

Here we are going to some changes in our existing HomeIndexViewModel.cs to pass parameter of search value and get list data by store procedure. Now Model Class Modify:

public class HomeIndexViewModel
        {
            public GenericUnitOfWork _unitOfWork = new GenericUnitOfWork();
            public IEnumerable<Tbl_Product> ListOfProducts { get; set; }
            public HomeIndexViewModel CreateModel()
            {

                SqlParameter[] pram = new SqlParameter[] {
                   new SqlParameter("@search",search)
                   };
                IEnumerable<Tbl_Product> data =                  context.Database.SqlQuery<Tbl_Product>("GetBySearch",parm).ToList();
                return new HomeIndexViewModel
                {
                    ListOfProducts = data;
                };
            }
        }

Step-3

Here we are going to create a procedure to pass parameter of search value and get list data by store procedure. Working Controller: no controller needed. Update: GetBySearch. Given bellow the Code:

CREATE PROCEDURE GetBySearch
	@search nvarchar(max)=null
AS
BEGIN
	SELECT *from [dbo].[Tbl_Product] P 
	left join [dbo].[Tbl_Category] C on p.CategoryId=c.CategoryId
	where 
	P.ProductName LIKE CASE WHEN @search is not null then  '%'+@search+'%' else P.ProductName end
	OR 
	C.CategoryName LIKE CASE WHEN @search is not null then  '%'+@search+'%' else C.CategoryName end
END

Step-4

Here we are going to some changes in our existing Index.cshtml to Post search value to method. In this view we can search product name, price catagory. Given bellow the View Code:

@model OnlineShoppingStore.Models.Home.HomeIndexViewModel
@{
    ViewBag.Title = "Home Page";
}

<div id="themeSlider" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#themeSlider" data-slide-to="0" class="active"></li>
        <li data-target="#themeSlider" data-slide-to="1"></li>
        <li data-target="#themeSlider" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <div class="imgOverlay"></div>
            <img style="height:320px;width:100%" src="../Images/4_03_21_2017_08_23_17.jpg" alt="First slide">
            <div class="carousel-caption">
                <h3>New</h3>
              
            </div>
        </div>
        <div class="item">
            <div class="imgOverlay"></div>
            <img style="height:320px;width:100%" src="../Images/3_03_21_2017_08_19_28.jpg" alt="Second slide">
            <div class="carousel-caption">
                <h3>My Phone</h3>
              
            </div>
        </div>
        <div class="item">
            <div class="imgOverlay"></div>
            <img style="height:320px;width:100%" src="../Images/2_03_21_2017_08_15_59.jpg" alt="Third slide">
            <div class="carousel-caption">
                <h3>Latest</h3>
                
            </div>
        </div>
    </div>
    <a class="left carousel-control" href="#themeSlider" data-slide="prev">
        <span class="fa fa-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#themeSlider" data-slide="next">
        <span class="fa fa-chevron-right"></span>
    </a>
   
</div>
<div class="olContent f1"><h2 style="color:black">Search Product/Category</h2></div>
<div class="olSearch fr">
    <input type="text" placeholder="Enter Keyword" name="searchKey" class="inputComn houseText form-control" />
    <div class="searchIcon">
        <button type="button" class="searchBtn">
            <img src="~/Images/searchIcon.png" />
        </button>
    </div>


</div>

<div class="row">
    <div class="col-md-12">
        <div class="page-header">
            <h2>Our Producrs <small>trends products</small></h2>
        </div> 
    </div>
</div>

<div class="row product-container">
    @foreach (var item in Model.ListOfProducts)
    {
        <div class="col-md-3 col-sm-3 col-xs-6" style="margin-bottom:8px">
            <div class="thumbnail product-item" style="height:300px">

                <img class="img-responsive" title="Click to View Product detail"
                     style="cursor:pointer;height:160px;width:100%"
                     src="~/ProductImg/@item.ProductImage" />

                <div class="caption">
                    <h5>@item.ProductName</h5>
                    <p>@item.Price ৳.</p>
                    <p>
                        @if (item.Quantity > 0)
                        {
                            <p>Available</p>

                        }
                        else
                        {
                            <p>Not Available</p>
                        }
                    </p>
                    <div class="product-item-badge">
                        @if (item.IsFeatured==true)
                        {
                            <p>New</p>

                        }
                        else
                        {
                            <p>Old</p>
                        }
                    </div>
                </div>
            </div>
        </div>
    }

</div>

Step-5

Now run the project.