Wednesday 10 March 2021

Paging & Search Functionality In Asp.Net MVC

 Step1: In SQL server create database ProductsDB. In this database create one table Product  with following columns


Step2: Create Asp.Net MVC Project named as SearchInMVC and select ‘Empty’ ‘MVC’ template as shown in fig below
Step3: Right click on Models folder & add AdoNet Data Model in which select ‘DB first approach from database’ 

Note: Before adding controller build your solution once

Step4 : Add following code in HomeController

 public class HomeController : Controller
    {
        ProductDbEntities db = new ProductDbEntities();
        public ActionResult Index(string searchBy, string search, int? page)
        {

            if (searchBy == "ProductName")
            {
                return View(db.Products.Where(x => x.ProductName.StartsWith(search) || search == null).ToList().ToPagedList(page ?? 1,3));
            }
            else if (searchBy == "Rating")
            {
                return View(db.Products.Where(x => x.Rating.ToString().StartsWith(search) || search == null).ToList().ToPagedList(page ?? 1, 3));
            }
            else
            {
                return View(db.Products.Where(x => x.Price.ToString().StartsWith(search) || search == null).ToList().ToPagedList(page ?? 1, 3));
            }
            
        }

Step6: Add following code in Index.cshtml

@using PagedList;
@using PagedList.Mvc;
@model IPagedList<MVCDemo.Models.Product>
@{
    ViewBag.Title = "Home Page";
}

<div style="padding:5px">
    <p>
        @using (Html.BeginForm("Index", "Home", FormMethod.Get))
        {
            <b>SearchBy:</b> @Html.RadioButton("searchBy", "ProductName") <text> ProductName</text>
            @Html.RadioButton("searchBy", "Rating")<text> Rating </text>
            @Html.RadioButton("searchBy", "Price")<text> Price</text> <br />
            @Html.TextBox("search") <input class="btn btn-success" type="submit" value="Search" />
        }
    </p>

    <div class="jumbotron">
        <h1>Amazon Shopping</h1>


        <div class="container" style="font-family:Arial, Helvetica, sans-serif">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>Product</th>
                        <th>Company</th>
                        <th>Price</th>
                        <th>Ratings</th>
                        <th>Sales(Quantity)</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @if (Model.Count() == 0)
                    {
                        <tr>
                            <td>Records Not found</td>
                        </tr>
                    }
                    else
                    {
                        foreach (var item in Model)
                        {
                            <tr>
                                <td>@item.ProductName</td>
                                <td>@item.CompanyName</td>
                                <td>@item.Price</td>
                                <td>@item.Rating</td>
                                <td>@item.Sales</td>
                                <td>
                                    <a href="#"><i class="glyphicon glyphicon-pencil"></i></a>&nbsp;&nbsp;
                                    <a href="#"><i class="glyphicon glyphicon-remove"></i></a>
                                </td>
                            </tr>
                        }
                    }

                </tbody>

            </table>
            @Html.PagedListPager(Model,Page => Url.Action("Index",new { Page }), new PagedListRenderOptions()
       { Display = PagedListDisplayMode.IfNeeded, DisplayPageCountAndCurrentLocation = true, DisplayItemSliceAndTotal = true})

        </div>
    </div>
</div>

Now Run the project and see the output which looks like below



PostedBy:pankaj_bhakre

No comments:

Post a Comment