不能让过去＆QUOT;＆的WebGrid QUOT;一个jQuery脚本引用，以便能够在＆QUOT Ajax的支持是必需的;助手＆QUOT; [英] Can't get past "A jquery script reference is required in order to enable Ajax support in the "WebGrid" helper"
问题描述
我有一个类似如下用户：
ASP.NET MVC 3.0的WebGrid - 支持AJAX
和这里：
<一href=\"http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/22be0501-1b0b-496a-9d0c-f9f5138996ac\" rel=\"nofollow\">http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/22be0501-1b0b-496a-9d0c-f9f5138996ac
I am having a similar as the user here: ASP.NET MVC 3.0 WebGrid - Ajax Enabled and here: http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/22be0501-1b0b-496a-9d0c-f9f5138996ac
但没有任何的建议，由这些线程在这里帮助。
However none of the suggestions from those threads is helping here.
的细节：当我在本地调试我的Windows 7 / IIS 8机器上运行，我收到一个ajax回发后消息一个jQuery脚本参考，以启用的WebGrid帮手Ajax的支持是必需的尝试更新。同样的code然而，这并不导致FF或服务器上使用IE对一个版本的同一code运行时（IIS 6）有问题。为了使它更加混乱，当我第一次的写的这个code，我从未有过这个问题 - 它最近才开始投掷误差
The specifics: When running in my local debugger on my Windows 7/IIS 8 machine, I am getting the 'A jQuery script reference is required in order to enable Ajax support in the "WebGrid" helper' message after an ajax postback trying to update. The same code however does not result in a problem in FF or when using IE against a version of the same code running on a server (IIS 6). To make it more confusing, when I first wrote this code, I never had this problem - it has only recently started throwing error.
当错误发生时，正确的内容更新整个页面之前，屏幕上闪烁重定向到只是局部视图，并引发在屏幕上弹出。这就像它工作正常，但东西然后复位，并导致其停止使用AJAX。
When the error occurs, the 'correct' updated content flashes on the screen before the whole page redirects to just the partial view and throws the popup on screen. It's like it works correctly but something then resets it and causes it to stop using ajax.
要尝试解决我取代的jQuery通过的code的完整版本和步骤.min版本。在调试jQuery的行为不同，并触发一个ajaxStop，是因为在全球阿贾克斯计数器的值。当我对运行在同一个IE浏览器相同的code的服务器版本外部脚本调试程序，这似乎并没有发生（尽管我仍然有服务器上的最小版本，所以无法清楚地看到） 。正是这种ajaxStop这似乎是强迫的WebGrid认为jQuery是没有加载的页面上，并没有让AJAX行为棒 - 迫使只是局部视图的一个新的页面加载
To try to troubleshoot I replaced the .min versions of jquery with the full versions and step through the code. In the debugger the jQuery behaves differently and triggers an "ajaxStop" because of the value in the global ajax counter. When I run the external script debugger against the server version of the same code in the same IE browser, this does not appear to occur (though I still have the 'min' version on the server so can't see exactly). It is this ajaxStop which appears to be forcing the webgrid to think that jQuery isn't loaded on the page and doesn't let the ajax behavior 'stick' - forcing a new page load of just the partial view.
我的页面是不是超简单：主要看有包含若干div的局部视图 - divSearch包含这是一个调用了ajax回传寻找局部视图，并divList包含了需要更新的基于搜索结果的网格。通过搜索局部视图称为控制器方法呈现的搜索结果转换成字符串'新'的内容，并将其发送回为一个JsonResult，然后将其分配给通过jQuery的divList的HTML的一部分。 （我用这种技术在应用的几个地方，我已经验证字符串被发送回的是的的局部视图正确的内容）。
My page is not ultra simple: the main View has several divs containing partial views - divSearch contains the search partial view which is the one calling the ajax postback, and divList contains the grid that needs to be updated based on the search results. The controller method called by the search partial view renders the 'new' contents for the search results into a string and sends them back as part of a JsonResult, which is then assigned to the divList's html via jQuery. (I use this technique in several places in the app, and I've verified that the string being sent back is the correct content for the partial view).
jQuery的（和其他所有的js包括）是在布局页面的顶部和之前的任何的局部视图渲染。
The jQuery (and all the other js includes) are at the top of the layout page and render before any of the partial views.
主视图：
@model WebUI.Areas.Admin.Models.Client.ManageClientsModel
@{
ViewBag.Title = "ManageClients";
Layout = "~/Views/Shared/_AdminLayout.cshtml";
}
<style type="text/css">
.inv
{
visibility: hidden;
}
.vis
{
visibility: visible;
}
</style>
<h2>ManageClients</h2>
<div id="divSearch">
@Html.Partial("_ClientSearch", Model.ClientList)
</div>
<div id="divList">
@Html.Partial("_ClientList", Model.ClientList)
</div>
<br/>
<div id="newSection">
<div id="divEdit"> <button class="toggleNew">
Add Client
</button>
</div>
div class="inv" id="divNew"> @Html.Partial("_Create", Model.ClientVM ) </div>
</div>
<script type="text/javascript">
$(function () {
$(".toggleNew").click(function () {
$("#divNew").toggleClass("inv");
return false;
});
});
</script>
客户端搜索部分：
Client Search partial:
@using Core.Entities
@model WebUI.Areas.Admin.Models.Client.ClientListViewModel
<div id="clientSearch">
<form action="@Url.Action("JsonSearch","Client", new { area = "Admin"})"
onsubmit="return formSearchSubmit(this);" >
<div class="divReturnErrors"></div>
@if(TempData["SearchName"] == null)
{
TempData["SearchName"] = Model.SearchName;
}
<br/>
@Html.LabelFor(model => model.SearchName, "Search for client name:")
@Html.EditorFor(model => model.SearchName)
<input type="submit" value="Search" name="btnSearch" />
</form>
</div>
<script type="text/javascript">
function formSearchSubmit(formToSubmit) {
//this line submits the form data to the JsonSearch method
$.post($(formToSubmit).attr("action"),
{ SearchName: $(formToSubmit).find("#SearchName").val() },
function (data) { //this is the callback from JsonSearch
// that handles the results.
if (data["IsSuccess"] == undefined || data["IsSuccess"] == false)
$('div.divReturnErrors').html(data["Errors"]);
//put errors in divReturnErrors
else { //if it succeeds we stuff the string containing the
//partial view into the _ClientList control's div to
//replace previous grid.
$("#divList").html(data["PartialViewHtml"]);
}
}, "json");
return false;
}
</script>
客户端列表局部视图
Client List partial view
@model WebUI.Areas.Admin.Models.Client.ClientListViewModel
<h2>Clients</h2>
@helper TrueFalseToYesNo(bool val) {
if (val)
{
<span>Yes</span>
}
else
{
<span>No</span>
}
}
<div id="clientListing">
@{
if(Model.SearchName != null)
{
TempData["SearchName"] = Model.SearchName;
}
var grid = new WebGrid<NeedleFinder.Core.Entities.Client>(null, rowsPerPage: 10,
canSort: false, defaultSort: "ClientName",
ajaxUpdateContainerId:"clientListing");
grid.Bind(Model.Clients, rowCount: Model.TotalRows, autoSortAndPage: false);
@grid.GetHtml(htmlAttributes: new {id= "clientListing"},
tableStyle: "table90",
alternatingRowStyle: "duncanTableAltRows",
headerStyle: "duncanTableHeaders",
columns: grid.Columns(
grid.Column(columnName: "Client ID", style: "logcolumn",
format: item =>
@Ajax.ActionLink(((object)item.ClientID).ToString(),
Model.LinkAction, new { id = item.ClientID }, new AjaxOptions {
HttpMethod = "GET", UpdateTargetId = "divEdit", InsertionMode =
InsertionMode.Replace })),
grid.Column(columnName: "ClientName", style: "logcolumn"),
grid.Column(columnName: "Abbreviation", style: "logcolumn"),
//grid.Column(columnName: "IsActive", style: "logcolumn")
grid.Column(columnName: "IsActive", style: "logcolumn",
format: item => @TrueFalseToYesNo(item.IsActive))
)
)
}
</div>
在'错误'发生在这一行：
$（＃divList）HTML（数据[PartialViewHtml]）;
从客户端搜索的局部视图AJAX回调函数。这条线跳进了jQuery，虽然在那里呼唤ajaxStop。
The 'error' is occurring in this line: $("#divList").html(data["PartialViewHtml"]); from the Client Search partial view ajax callback function. This line jumps into the jQuery and while in there is calling ajaxStop.
请注意我已经纳入从其他线程的建议（jQuery包含在上面，把的WebGrid与同名的ajaxUpdateContainer目标的div，具有相同的名称添加一个id属性到的WebGrid以及该建议加载中明确的document.ready部分似乎并不适用于我，因为我想填充该div基于投入，而不是只是普通的加载默认的'得到'的局部视图的版本的字符串。
Please note I have already incorporated the suggestions from the other thread (jQuery includes at the top, putting the webgrid in a div with the same name as the ajaxUpdateContainer target, adding an id property to the webgrid with the same name as well. The suggestion to load the partial explicitly in document.ready does not seem applicable to me since I am trying to populate this div with a string based on inputs rather than just plain load the default 'get' version of the partial view.
下面是页面呈现的HTML首次加载时（当你做了ajax后反正它不更新）：（道歉为靠不住的格式，但增加4缩进到每一行并没有真正干净工作）
Here is the rendered html for the page when it first loads (it doesn't update when you do the ajax post anyway): (Apologies for the wonky formatting but adding 4 indents to each line didn't really work cleanly)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ManageClients</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="/Content/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.8.18.js" type="text/javascript"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
<script src="/Scripts/modernizr-1.7.js" type="text/javascript"></script>
<script src="/Scripts/jQuery.Validate.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>
</head>
<script type="text/javascript">
$(document).ready(function () {
$('.dateEditor').datepicker({ dateFormat: "mm/dd/yy" });
});
//This function should be called in your ajax post return are staying on same page
after success and/or you do have server side errors that couldn't have been found
//if there were still client side errors, otherwise you will still have the previous
validation errors.
function ClearValidationErrors() {
var container = $('form').find('[data-valmsg-summary="true"]');
var list = container.find('ul');
if (list && list.length) {
list.empty();
container.addClass('validation-summary-valid').removeClass('validation-summary-
errors');
}
}
</script>
<body>
<style type="text/css">
#topbar
{
background-color: Black;
margin: 0px;
padding: 5px;
}
#adminmenu_nav a
{
float: left;
width: 150px;
}
.logcolumn
{
padding-left: 10px;
padding-right: 10px;
border: 1px solid #BBBBBB;
}
</style>
<script>
$(function () {
$("#adminmenu_nav a").button();
$("#optionsPanel input").button();
$(".asButton input").button();
});
</script>
<div id="topbar">
<img style="margin-left:20px" src="/Content/Images/Logos/NFWhite.png"
alt="NeedleFinder" />
</div>
<div>
<div id="adminmenu_nav" style="float: left">
<table>
<tr><td><a href="/Admin/Client/ManageClients">Clients</a></td></tr>
<tr><td>Cases</td></tr>
<tr><td><a href="/Admin/User/ManageUsers">Users</a></td></tr>
<tr><td>Roles</td></tr>
<tr><td><a href="/Admin/Logging/Summary">Logs</a></td></tr>
</table>
</div>
<div style="overflow: hidden">
<span class="validation-summary-errors"></span>
<style type="text/css">
.inv
{
visibility: hidden;
}
.vis
{
visibility: visible;
}
</style>
<h2>ManageClients</h2>
<div id="divSearch">
<div id="clientSearch">
<form action="/Admin/Client/JsonSearch" onsubmit="return formSearchSubmit(this);" >
<div class="divReturnErrors"></div>
<br/>
<label for="SearchName">Search for client name:</label>
<input class="text-box single-line" id="SearchName" name="SearchName"
type="text" value="" />
<input type="submit" value="Search" name="btnSearch" />
</form>
</div>
<script type="text/javascript">
function formSearchSubmit(formToSubmit) {
//this line submits the form data to the JsonSearch method
$.post($(formToSubmit).attr("action"),
{ SearchName: $(formToSubmit).find("#SearchName").val() },
function (data) {
if (data["IsSuccess"] == undefined || data["IsSuccess"] == false)
$('div.divReturnErrors').html(data["Errors"]);
else
{
$("#divList").html(data["PartialViewHtml"]);
}
}, "json");
return false;
}
</script>
</div>
<div id="divList">
<h2>Clients</h2>
<div id="clientListing">
<script type="text/javascript">if (typeof(jQuery)=='undefined') alert("A jQuery script
reference is required in order to enable Ajax support in the \"WebGrid\" helper.");
</script><table class="table90" id="clientListing"><thead><tr
class="duncanTableHeaders"><th scope="col">Client ID</th><th
scope="col">ClientName</th><th scope="col">Abbreviation</th><th
scope="col">IsActive</th></tr></thead><tfoot><tr><td colspan="4">1 <a href="#"
onclick="$('#clientListing').load('/Admin/Client/ManageClients?page=2&
amp;__=634750282355486955 #clientListing');">2</a> <a href="#"
onclick="$('#clientListing').load('/Admin/Client/ManageClients?page=3&
amp;__=634750282355506956 #clientListing');">3</a> <a href="#"
onclick="$('#clientListing').load('/Admin/Client/ManageClients?page=4&
amp;__=634750282355516957 #clientListing');">4</a> <a href="#"
onclick="$('#clientListing').load('/Admin/Client/ManageClients?page=5&
amp;__=634750282355536958 #clientListing');">5</a> <a href="#"
onclick="$('#clientListing').load('/Admin/Client/ManageClients?page=2&
amp;__=634750282355546959 #clientListing');">></a> </td></tr></tfoot><tbody>
<tr><td class="logcolumn"><a data-ajax="true" data-ajax-method="GET" data-ajax-
mode="replace" data-ajax-update="#divEdit" href="/Admin/Client/_Edit/2042">2042</a>
</td><td class="logcolumn">ABC Legal</td><td class="logcolumn">ABC123</td><td
class="logcolumn"> <span>Yes</span>
</td></tr><tr class="duncanTableAltRows"><td class="logcolumn"><a data-ajax="true"
data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#divEdit"
href="/Admin/Client/_Edit/2044">2044</a></td><td class="logcolumn">ABC Legal
3</td><td class="logcolumn">ABC125</td><td class="logcolumn">
<span>Yes</span>
</td></tr><tr><td class="logcolumn"><a data-ajax="true" data-ajax-method="GET"
data-ajax-mode="replace" data-ajax-update="#divEdit" href="/Admin/Client/_Edit
/2045">2045</a></td><td class="logcolumn">ABC Legal 4b</td><td
class="logcolumn">ABC4bb</td><td class="logcolumn"> <span>Yes</span>
</td></tr><tr class="duncanTableAltRows"><td class="logcolumn"><a data-ajax="true"
data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#divEdit"
href="/Admin/Client/_Edit/2047">2047</a></td><td class="logcolumn">ABC Legal
6</td><td class="logcolumn">ABC6</td><td class="logcolumn"> <span>No</span>
</td></tr><tr><td class="logcolumn"><a data-ajax="true" data-ajax-method="GET"
data-ajax-mode="replace" data-ajax-update="#divEdit" href="/Admin/Client/_Edit
/2048">2048</a></td><td class="logcolumn">ABC Legal 7</td><td
class="logcolumn">ABC7</td><td class="logcolumn"> <span>Yes</span>
</td></tr><tr class="duncanTableAltRows"><td class="logcolumn"><a data-ajax="true"
data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#divEdit"
href="/Admin/Client/_Edit/2049">2049</a></td><td class="logcolumn">ABC Legal
8a</td><td class="logcolumn">ABC8a</td><td class="logcolumn">
<span>Yes</span>
</td></tr><tr><td class="logcolumn"><a data-ajax="true" data-ajax-method="GET"
data-ajax-mode="replace" data-ajax-update="#divEdit" href="/Admin/Client/_Edit
/2050">2050</a></td><td class="logcolumn">ABC Legal 9</td><td
class="logcolumn">ABC9</td><td class="logcolumn"> <span>Yes</span>
</td></tr><tr class="duncanTableAltRows"><td class="logcolumn"><a data-ajax="true"
data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#divEdit"
href="/Admin/Client/_Edit/2043">2043</a></td><td class="logcolumn">ABC
Legal2</td><td class="logcolumn">ABC124</td><td class="logcolumn">
<span>Yes</span>
</td></tr><tr><td class="logcolumn"><a data-ajax="true" data-ajax-method="GET"
data-ajax-mode="replace" data-ajax-update="#divEdit" href="/Admin/Client/_Edit
/2046">2046</a></td><td class="logcolumn">ABC Legal5</td><td
class="logcolumn">ABC5</td><td class="logcolumn"> <span>Yes</span>
</td></tr><tr class="duncanTableAltRows"><td class="logcolumn"><a data-ajax="true"
data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#divEdit"
href="/Admin/Client/_Edit/2051">2051</a></td><td class="logcolumn">ACE Legal
1</td><td class="logcolumn">ACE1</td><td class="logcolumn">
<span>Yes</span>
</td></tr></tbody></table></div>
</div>
<br/>
<div id="newSection">
<div id="divEdit"> <button class="toggleNew">
Add Client
</button></div><!-- placeholder for _Edit., will replace button when editing//-->
<div class="inv" id="divNew">
<form action="/Admin/Client/JsonCreate" onsubmit="return formCreateSubmit(this);">
<div>
<div class="titleText">Add Client</div>
<div class="divClientSideVal">
<div class="validation-summary-valid" data-valmsg-summary="true"><ul><li
style="display:none"></li>
</ul></div>
</div>
<div class="divCreateErrors"></div>
<fieldset>
<table>
<tr>
<td>
<label for="CurrentClient_ClientName">Name</label>
</td>
<td><input data-val="true" data-val-length="Client Name must be 50
characters or fewer" data-val-length-max="50" data-val-
required="Client Name is required."
id="CurrentClient_ClientName" name="CurrentClient.ClientName"
style="width: 120px;" type="text" value="" />
</td>
<td><span class="field-validation-valid" data-valmsg-
for="CurrentClient.ClientName" data-valmsg-replace="false">*</span></td>
</tr>
<tr>
<td>
<label for="CurrentClient_Abbreviation">Abbreviation</label>
</td>
<td><input data-val="true" data-val-length="Abbreviation must be 6
characters or fewer" data-val-length-max="6" data-val-
required="Abbreviation is required." id="CurrentClient_Abbreviation"
name="CurrentClient.Abbreviation" style="width: 120px;" type="text"
value="" />
</td>
<td><span class="field-validation-valid" data-valmsg-
for="CurrentClient.ClientName" data-valmsg-replace="false">*</span></td>
</tr>
<tr>
<td>
<label for="CurrentClient_IsActive">Is Active:</label>
</td>
<td>
<input data-val="true" data-val-required="The IsActive field is
required." id="CurrentClient_IsActive" name="CurrentClient.IsActive"
type="checkbox" value="true" /><input name="CurrentClient.IsActive"
type="hidden" value="false" />
</td>
</tr>
<tr>
<td>Enable for installations:</td>
<td>
<select Multiple="multiple" id="SelectedInstallations"
multiple="multiple" name="SelectedInstallations" style="width:
120px;">
<option value="1">Dev</option>
<option value="2">FakeDev</option>
</select>
</td>
</tr>
</table></fieldset>
<p>
<input type="submit" value="Create" name="btnCreate" />
</p>
</div>
</form>
<script type="text/javascript">
function formCreateSubmit(formToSubmit) {
var installations = "";
$('#SelectedInstallations option').each(function (i) {
if (this.selected == true) {
if (installations.length > 0) {
installations += ",";
}
installations += this.value;
}
});
//this line submits the form data to the JsonCreate method
$.post($(formToSubmit).attr("action"),
{ ClientName: $(formToSubmit).find("#CurrentClient_ClientName").val(),
Abbreviation:
$(formToSubmit).find("#CurrentClient_Abbreviation").val(),
IsActive:
$(formToSubmit).find("#CurrentClient_IsActive").is(':checked'),
SelectedInstallations: installations,
Action: "Create"
},
function (data) {
if (data["IsSuccess"] == undefined || data["IsSuccess"] == false)
{
if (data["Errors"] != undefined &&
data["Errors"].length > 0)
{
ClearValidationErrors();
('div.divCreateErrors').html(data["Errors"]);
} else {
$('div.divCreateErrors').html("");
}
} else {
window.location = "/Admin/Client/ManageClients";
}
}, "json");
return false;
}
</script> </div><!-- placeholder for _Create //-->
</div>
<script type="text/javascript">
$(function () {
$(".toggleNew").click(function () {
$("#divNew").toggleClass("inv");
return false;
});
});
</script>
</div>
</div>
<div class="InternalMenu"><a href="/Admin/Logging">Logging</a> - <a href="/Admin
/Client/ManageClients">Client</a></div>
</body>
</html>
任何建议将是极大的pciated因为我难倒什么原因造成的问题pretty AP $ P $。
Any suggestions would be greatly appreciated as I'm pretty stumped as to what is causing the problem.
推荐答案
确定 - 我想通了这个问题，所以我的身影将报告
Ok - I figured out the problem, so figure I will report back.
问题是实际上更比MVC的jQuery有关，但它与我是如何把我的搜索形式共同的问题。
The issue was actually more MVC than jQuery related but it was a problem with how I had put my search form together.
我有我的搜索按键设置与类型=提交，也有一个onsubmit的事件处理程序做了ajax回发。什么正在发生的是，阿贾克斯回发在做什么它应该，但是，当它完成，提交被触发弄，并在控制器搜索表单的回报只是一个PartialViewResult获取的处理程序 - >等等这被替换画面内容作为正常负荷。该错误被抛出，因为局部视图没有布局与包括。
I had my search button set with type=submit and also had an onsubmit eventhandler doing the ajax postback. What was occurring was that the ajax postback was doing exactly what it was supposed to but when it completed, the submit was triggering a "get" and the "get" handler in the controller for the search form returns just a PartialViewResult --> so this was replacing the screen contents as a normal load. The error was being thrown because the partial view did not have the layout with the includes.
所以修复是
一）改变按钮类型为键
b）由窗体声明中删除的onsubmit
c）增加一个id =frmSearch的形式（易选择性）
d）与函数的参数（这是一个按钮，而不是形式）修改formSearchSubmit从$（＃frmSearch）采取的行动。行动代替。
So the fix was to a) change the button type to "button" b) remove the "onsubmit" from the form declaration c) add an id="frmSearch" to the form (for easy selectivity) d) modify the formSearchSubmit to take the action from $("#frmSearch").action instead of from the function argument (which is a button, not the form).
之后，它正确地递交了ajax职位和处理返回更新W / O触发窗体的另一个提交。
After that, it submitted the ajax post correctly and handled the return update w/o triggering another submit of the form.
这篇关于不能让过去＆QUOT;＆的WebGrid QUOT;一个jQuery脚本引用，以便能够在＆QUOT Ajax的支持是必需的;助手＆QUOT;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
