Saturday, 18 March 2017

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

TechnoGTB March 18, 2017 asp.net mvc tutorial, jquery, JQuery AJAX, Partial view

#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

About TechnoGTB
alistarbot is a blogger resources site is a provider of high quality blogger template with premium looking layout and robust design. The main mission of alistarbot is to provide the best quality blogger templates.