Thumb

Part-10: eCommerce Product Search using Store Procedure Entity Framework | ASP.NET MVC

Part-0 (introduction ): E-Commerce introduction using asp.net mvc Part-1: Ecommerce website design using Bootstrap | Building an Ecommerce website | ASP.NET MVC Part-2: Ecommerce website design using HTML, CSS, Bootstrap, JavaScript | ASP.NET MVC Part-3: Ecommerce DataBase design in SQL Server | ASP.NET MVC | JQUERY Ajax Json Part-4: Ecommerce website Entity Framework data model integration | ASP.NET MVC | JQUERY Ajax Json Part-5: Repository pattern in eCommerce project | ASP NET MVC | C# Part-6: Ecommerce Dashboard or admin using Bootstrap CSS | ASP.NET MVC Part-7: eCommerce Add and Edit Category into Admin Panel using ASP.NET MVC | Jquery Part-8: eCommerce Add and Edit Product into Admin Panel using ASP.NET MVC | Jquery Part-9: eCommerce Products Load and File upload ASP.NET MVC | Razor Dropdown Part-10: eCommerce Product Search using Store Procedure Entity Framework | ASP.NET MVC Part-11: eCommerce Paging Filtering with Entity Framework using ASP.NET MVC | Razor Paging Part-12: eCommerce Product Add to Shopping Cart in ASP.NET MVC | Dynamic Shopping Cart ASP.NET Part-13: eCommerce Product Remove from Shopping Cart in ASP.NET MVC | Dynamic Shopping Cart ASP.NET Part-14: eCommerce Manage Duplicate Entry Shopping Cart in ASP.NET MVC | Dynamic Shopping Cart Part-15: eCommerce Checkout manage in ASP.NET MVC | Razor | Jquery Part-16: eCommerce PayPal payment gateway integration in ASP.NET MVC|Free payment gateway Part-18(Final): eCommerce PayPal Payment complete using ASP.NET MVC | Payment Gateway in asp.net Part-17: eCommerce PayPal Payment Logic implementation in ASP.NET MVC | using C#

9/19/2019 12:00:00 AM

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.

About Teacher

Image

Reza Karim

Software Engineer

More about him