可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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>

回答1:

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.

回答2:

Where did you add your reference to jquery, because if it breaks on if (typeof(jQuery)=='undefined') then it's most definitely not finding jquery on that part of the page.

Did you have a look in your source client side to make sure that the jquery reference is there and that the webgrid script/javascript is used/referenced after jquery library is referenced.

回答3:

Should

Return New WebGrid(source:=source,.....

read

Return New WebGrid(source: source,.....

ie drop the "=" ? (Sorry its been a long time since I used VB)

Also, do you see the controller action name and parameters for the partial view in the url address? It could be something to do with how you are posting your form back to the server, I have had this same error when attempting to post form data programatically using javascript rather than a user pressing a submit button. I needed my grid to populate accordingly to page refresh, menu selection and to dropdown selection events and was having difficulty getting it to work. When I received the error what I received was my partial page complete with filled out webgrid, but none of the rest of the page.

Although I never resolved the issue, I did manage to get round it. My solution involved this:

Edit the view to this

@model MyProject.Models.GridResultsModel
 ...

<div id="updatetarget">
    @Html.Partial("_GridResults", Model)
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $('#updatetarget').load("_GridResults")        
    });
</script>

my inspiration came from this post: Multiple Checkbox selection using Webgrid in MVC 3 (select All/Deselect All), Sorting and Paging

hope this helps