ASP.NET MVC 3.0 WebGrid
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>
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.
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.
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
链接地址: http://www.djcxy.com/p/62764.html