TechnoTips : Part 37 - Implementing search functionality using jquery and partial view in Asp.net mvc

#Expected Output

#Controller Code(TestController.cs)

using MVCTutorial.Models;
using System;
using System.Collections.Generic;
using System.Globalization;
using System.IO;
using System.Linq;
using System.Net;
using System.Threading;
using System.Web;
using System.Web.Mvc;

namespace MVCTutorial.Controllers
{
    public class TestController : Controller
    {

        public ActionResult Index()
        {
            MVCTutorialEntities db = new MVCTutorialEntities();

            List<EmployeeViewModel> list = db.Employees.Select(x => new EmployeeViewModel { Name = x.Name, EmployeeId = x.EmployeeId, DepartmentName = x.Department.DepartmentName, Address = x.Address }).ToList();

            ViewBag.EmployeeList = list;

            return View();
        }

        public ActionResult GetSearchRecord(string SearchText)
        {

            MVCTutorialEntities db = new MVCTutorialEntities();


            List<EmployeeViewModel> list = db.Employees.Where(x => x.Name.Contains(SearchText) || x.Department.DepartmentName.Contains(SearchText)).Select(x => new EmployeeViewModel { Name = x.Name, EmployeeId = x.EmployeeId, DepartmentName = x.Department.DepartmentName, Address = x.Address }).ToList();

            return PartialView("SearchPartial", list);


        }

    }
}

#Model (EmployeeViewModel.cs)

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;

namespace MVCTutorial.Models
{
    public class EmployeeViewModel
    {
        public int EmployeeId { get; set; }
        public string Name { get; set; }
        public Nullable<int> DepartmentId { get; set; }
        public string Address { get; set; }
        public Nullable<bool> IsDeleted { get; set; }
        //Extra attribute
        public string DepartmentName { get; set; }
        public bool Remember { get; set; }
        public string SiteName { get; set; }
       
    }
}

# View (Index.cshtml)

@model MVCTutorial.Models.EmployeeViewModel
@{
    ViewBag.Title = "Index";
    // Layout = null;
}

<div class="panel panel-body" style="min-height:256px">

    <div class="col-md-3">

        @*@{ Html.RenderAction("SideMenu", "Test");}*@

    </div>
    <div class="col-md-9">
        @Html.TextBoxFor(m => m.Name, new { @class="form-control",@placeholder="Search here"})
        <img src="~/Content/loading.gif" id="loader" height="20" width="20" style="display:none"/>

        <table class="table table-striped">
            <tr>
                <th>
                    Name
                </th>
                <th>
                    DepartmentName
                </th>
                <th>
                    Address
                </th>
                <th>
                    Action
                </th>
            </tr>
            <tbody id="employeeRow">

                @if (ViewBag.EmployeeList != null)
                {
                    foreach (var item in ViewBag.EmployeeList)
                    {
                        <tr>
                            <td>@item.Name</td>
                            <td>@item.DepartmentName</td>
                            <td>@item.Address</td>
                            <td><a href="#"><i class="glyphicon glyphicon-eye-open"></i>View</a></td>
                        </tr>

                    }

                }

            </tbody>
        </table>

    </div>

</div>

<script>

    $(document).ready(function () {

        $("#Name").keydown(function () {
            $("#loader").show();
            var searchtext = $(this).val();
            debugger
            $.ajax({

                type: "Post",
                url: "/Test/GetSearchRecord?SearchText=" + searchtext,
                contentType: "html",
                success: function (response) {                   
                    $("#loader").hide();

                    $("#employeeRow").html(response);

                }

            })

        })

    })

</script>

# Partial View (SearchPartial.cshtml)

@model IEnumerable<MVCTutorial.Models.EmployeeViewModel>

@if (Model != null)
{
    foreach (var item in Model)
    {
        <tr>
            <td>@item.Name</td>
            <td>@item.DepartmentName</td>
            <td>@item.Address</td>
            <td><a href="#"><i class="glyphicon glyphicon-eye-open"></i>View</a></td>
        </tr>

    }
}

#Database Script (MVCTutorial > Employee Table )

USE [MVCTutorial]
GO
/****** Object:  Table [dbo].[Employee]    Script Date: 19-03-2017 00:02:28 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
SET ANSI_PADDING ON
GO
CREATE TABLE [dbo].[Employee](
 [EmployeeId] [int] IDENTITY(1,1) NOT NULL,
 [Name] [varchar](50) NULL,
 [DepartmentId] [int] NULL,
 [Address] [varchar](150) NULL,
 [IsDeleted] [bit] NULL,
 CONSTRAINT [PK_Employee] PRIMARY KEY CLUSTERED 
(
 [EmployeeId] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

GO
SET ANSI_PADDING OFF
GO
ALTER TABLE [dbo].[Employee]  WITH CHECK ADD  CONSTRAINT [FK_Employee_Department] FOREIGN KEY([DepartmentId])
REFERENCES [dbo].[Department] ([DepartmentId])
GO
ALTER TABLE [dbo].[Employee] CHECK CONSTRAINT [FK_Employee_Department]
GO

All Code Factory

8 comments:

Unknown said...: Thank you very much your tutorials are helping me a lot looking forward for more videos.; March 19, 2017 at 10:52 PM
Unknown said...: I have achieved authentication and authorization using MembershipProvider And RoleProvider.But now Microsoft has come with owin and katana to implement authentication and authorization.I have done lot of research how to implement owin and katana in MVC but i didnt got success can you please upload a videos for owin and katana. What they are and how to implement them in mvc.; March 19, 2017 at 10:58 PM
Ashish said...: Sure will add to my video list; March 25, 2017 at 6:34 AM
Ashish said...: Thanks for taking time to give feedback. If you find these videos are useful then please recommend this to your friends also ..keep learning and sharing; March 25, 2017 at 6:38 AM
Unknown said...: Kindly help us with a video on a blog system.; June 11, 2017 at 3:20 PM
Unknown said...: please upload one video on authentication and authorization in mvc; September 29, 2017 at 12:15 AM
sangita said...: is there any grid example with search box?
if you have please share it; March 5, 2019 at 3:01 AM
Unknown said...: You did and help a lot. Thanks you for your time and sharing the knowledge. I am using asp.net core 2019 but don't know how treat partialview in visual studio 2019. Please share.; December 29, 2022 at 3:23 PM

TechnoTips

Labels

Saturday, March 18, 2017

Part 37 - Implementing search functionality using jquery and partial view in Asp.net mvc

8 comments: