Header with Filter is not getting added in webgrid in MVC

Question

User1360833881 posted

I have implemented the webgrid using the below article
https://www.aspsnippets.com/Articles/Column-Wise-Search-and-Filter-in-WebGrid-using-TextBox-in-ASPNet-MVC.aspx

Data is loading in grid, but Header with Filter is not getting added.
Because on load of this page, I am getting below  Javascript errors.
1. 0x800a1391 - javascript runtime error 'jquery' is undefined
2. 0x800a1391 - JavaScript runtime error: '$' is undefined

Kindly check my code and correct me, where I am doing wrong. Thanks.

public ActionResult REDFLoggerDetails()
        {
            try
            {
                var objApplicationInputBL = new REDF_BL();
                RequestResponse objRequestResponse = new RequestResponse();
                objRequestResponse.RequestResponseInfo = objApplicationInputBL.GetRequestResponse();
                return View(objRequestResponse.RequestResponseInfo);

            }
            catch (Exception)
            {
                
                throw;
            }
            
        }

@{
    ViewBag.Title = "REDFLoggerDetails";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@model IEnumerable<REDF_DataContracts.RequestResponse>
<h2>REDFLoggerDetails</h2>

@{
    WebGrid webGrid = new WebGrid(source: Model, canPage: true, canSort: true);
}
 
  
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="~/Scripts/quicksearch.js"></script>

   
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
 
        .Grid
        {
            border: 1px solid #ccc;
            border-collapse: collapse;
        }
 
        .Grid th
        {
            background-color: #F7F7F7;
            font-weight: bold;
        }
 
        .Grid th, .Grid td
        {
            padding: 5px;
            border: 1px solid #ccc;
        }
 
        .Grid, .Grid table td
        {
            border: 0px solid #ccc;
        }
 
        .Grid th a, .Grid th a:visited
        {
            color: #333;
        }
    </style>

    @webGrid.GetHtml(
        htmlAttributes: new { @id = "WebGrid", @class = "Grid" },
        columns: webGrid.Columns(
                 webGrid.Column("ServiceType", "Service Name"),
                 webGrid.Column("NID", "Legal ID"),
                 webGrid.Column("ResponseCodeValue", "Response Code"),
                 webGrid.Column("ResponseResult", "Response Result"),
                 webGrid.Column("UserID", "User Name"),
                 webGrid.Column("CreatedDate", "Date")))
 
    <script type="text/javascript">
        $(function () {
            //Add Header Row with TextBoxes.
            var row = $("<TR />");
            $("#WebGrid TR").eq(0).find("TH").each(function () {
                row.append("<th><input type = 'text' /></th>");
            });
            $("#WebGrid TR").eq(0).after(row);
 
            //Applying the QuickSearch Plugin to each TextBox.
            $("#WebGrid TR").eq(1).find("INPUT").each(function (i) {
                $(this).quicksearch("#WebGrid tr:not(:has(th))", {
                    'testQuery': function (query, txt, row) {
                        return $(row).children(":eq(" + i + ")").text().toLowerCase().indexOf(query[0].toLowerCase()) != -1;
                    }
                });
            });
        });
    </script>