Jquery – ASP.NET MVC 3.0 WebGrid – Ajax Enabled

ajaxasp.net-mvc-3jquerywebgrid

I'm encountering the following problem: "A JQuery script reference is required in order to enable Ajax support in the "WebGrid" helper"

I want to make my WebGrid AJAX enabled. I got this code for the Partial View

@ModelType WebGrid

@Model.GetHtml(tableStyle:="webgrid", headerStyle:="webgrid-header", footerStyle:="webgrid-footer", alternatingRowStyle:="webgrid-alternating-row", selectedRowStyle:="webgrid-selected-row", rowStyle:="webgrid-row-style",
                       columns:=Model.Columns(Model.Column(
                                             columnName:=GemeentePostColumnsEnum.NISCode.ToString()),
                                Model.Column(columnName:=GemeentePostColumnsEnum.GemeenteNaam.ToString()),
                                Model.Column(columnName:=GemeentePostColumnsEnum.DistrictNaam.ToString()),
                                Model.Column(columnName:=GemeentePostColumnsEnum.PostCode.ToString()),
                                Model.Column(columnName:=GemeentePostColumnsEnum.PostNaam.ToString()),
                                Model.Column(
                                    format:=@@<text>@Ajax.ActionLink("Edit", "AddEdit", New With {.NISCode = item.NISCode}, New AjaxOptions With {.UpdateTargetId = "formGemeentePost", .InsertionMode = InsertionMode.Replace, .HttpMethod = "GET", .OnFailure = "failure"})</text>)))

And this code for the controller:

Function SearchForm(searchModel As GemeentePostWebService.GemeentePostCriteria) As PartialViewResult
            searchModel.Taalcode = "nl"


           'Code to fill up Model

                ViewBag.WebGrid = CreateGrid(viewModelList)
                Return PartialView("Partial/_Grid", ViewBag.WebGrid)
            End If
        End Function

        Private Function CreateGrid(source As List(Of GemeentePostModel)) As WebGrid
            Return New WebGrid(source:=source, rowsPerPage:=10, ajaxUpdateContainerId:="grid", defaultSort:=GemeentePostColumnsEnum.GemeenteNaam)
        End Function

When I enter some search values and submit the form, I get the following error:

"A JQuery script reference is required in order to enable Ajax support in the "WebGrid" helper"

With as result: I got the right filtered values, but my div (updatetargetid) isn't filled up.

I already added the jQuery and unobtrusive scripts and included them in my header:

<!DOCTYPE html>
<html>
<head>
    <title>X</title>
    <link href="/X/Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="/X/Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
    <script src="/X/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="/X/Scripts/jquery-ui-1.8.11.js" type="text/javascript"></script>
    <script src="/X/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
</head>

Best Answer

An issue you could be facing is where the reference to the "jquery.unobtrusive-ajax.min.js" file is on your page.

If you're using YSlow or PageSpeed, one of the suggestions is that css gets placed in the head, javascript gets placed at the bottom.

This causes what you're seeing to happen (just had it happen to me as well).

If your reference is at the bottom, on the first load of the page (or a refresh), the javascipt file is not loaded yet before the WebGrid helper tries to start doing it's thing, and you'll get the popup message about the missing reference. If you dismiss it, then paging or sorting actually works, and the message goes away...until you refresh the page again.

You can either move your script reference to the top or you can write a document.ready script to delay processing.

Related Topic