如何使用$（本）MVC3 Ajax.ActionLink OnBegin，的onComplete事件里 [英] How to use $(this) inside MVC3 Ajax.ActionLink OnBegin,OnComplete Events
问题描述
我的控制器创造了这样一个链接列表
My Controller creates a list of links like this
<ul id="MainMenu">
@foreach (var item in Model.MenuItems)
{
<li>@Ajax.ActionLink(item.Caption,
item.ActionName,
item.ControllerName,
new AjaxOptions
{
UpdateTargetId = "pageBody",
OnBegin = "BeginUpdatePage",
OnComplete = "EndUpdatePage",
OnFailure = "FailUpdatePage"
})
</li>
}
</ul>
我有一些JavaScript这样的
I have some javascript like this
function BeginUpdatePage() {
$("#MainMenu li").removeClass('selected');
$(this).parent().addClass('selected');
$("#pageBody").fadeTo('slow', 0.5);
}
function EndUpdatePage() {
$("#pageBody").fadeTo('slow', 1);
}
function FailUpdatePage() {
alert('There has been an error loading this page please try again.');
}
在BeginUpdatePage功能线1和3执行罚款，但第2行$（本）.parent（）addClass（'选择'）;。不visiably做什么...（我宣布我的CSS的类）。
in the BeginUpdatePage function line 1 and 3 execute fine, but line 2 "$(this).parent().addClass('selected');" does not visiably do anything... (I have declared that class in my css).
我已经看过jQuery的文档（ Jquery.ajax（））它说，这被点击的元素。我也检查了，这是在默认情况下，我的项目jquery.unobtrusive-ajax.js。该文件还通过本在执行时，我的功能。
I have looked at Jquery docs (Jquery.ajax()) it says that "this" is the element that was clicked. I have also checked in "jquery.unobtrusive-ajax.js" that was in my project by default. This file also passes "this" when executing my function.
"result = getFunction(element.getAttribute("data-ajax-begin"), ["xhr"]).apply(this,arguments);"
我在做什么错在这里......我见过的其他例子
我要如何才能到达单击的，里面我的开始，功能齐全的元素。
How can I get to the element that was clicked, inside my Begin, complete functions.
推荐答案
谢谢你们所有的建议，达林，虽然您的解决方案完美的作品，我想尝试并使用内置的Ajax工具。
Thanks guys for all your suggestions, Darin, although your solution works perfectly, I wanted to try and use the built in Ajax utilities.
我已经（找到了工作，在寻找 Jquery.Ajax后各地）文档也检查jquery.unobtrusive-ajax.js这更是一个比哈克正确使用，即时通讯不知道谁把jquery.unobtrusive-ajax.js的文件一起，但如果有人知道如何给他们发邮件，也许给他们发送链接到这个网页： - ）
I have found a work around after looking at Jquery.Ajax() Docs and also inspecting "jquery.unobtrusive-ajax.js" this is more of a Hack than proper use, im not sure who put the "jquery.unobtrusive-ajax.js" file together but if anybody knows how to email them, maybe send them a link to this page :-)
这是jquery.unobtrusive-ajax.js的有趣的部分
在这个函数功能asyncRequest（元素，选项）
this is the interesting part of "jquery.unobtrusive-ajax.js" in this function "function asyncRequest(element, options) "
$.extend(options, {
type: element.getAttribute("data-ajax-method") || undefined,
url: element.getAttribute("data-ajax-url") || undefined,
beforeSend: function (xhr) {
var result;
asyncOnBeforeSend(xhr, method);
result = getFunction(element.getAttribute("data-ajax-begin"), ["xhr"]).apply(this, arguments);
if (result !== false) {
loading.show(duration);
}
return result;
},
complete: function () {
loading.hide(duration);
getFunction(element.getAttribute("data-ajax-complete"), ["xhr", "status"]).apply(this, arguments);
},
success: function (data, status, xhr) {
asyncOnSuccess(element, data, xhr.getResponseHeader("Content-Type") || "text/html");
getFunction(element.getAttribute("data-ajax-success"), ["data", "status", "xhr"]).apply(this, arguments);
},
error: getFunction(element.getAttribute("data-ajax-failure"), ["xhr", "status", "error"])
});
在此code调用的<一个href=\"http://odeto$c$c.com/blogs/scott/archive/2007/07/05/function-apply-and-function-call-in-javascript.aspx\"相对=nofollow>申请方法每一步beforeSend，完整，错误，它通过两个perams，本和论据...
When this code calls the apply method on each step beforeSend, Complete, error, it passes in two perams, "this" and "arguments"...
至极的作品创造，而是在语境中的本，是被点击的XHR（XMLHtt prequest）不是元素......还通过检查函数的头，你可以看到，它通过XHR对象为第一peram。那么，为什么我们需要它调用上下文呢？
Wich works create, but in the context "this" is the XHR (XMLHttpRequest) not the element that was clicked... also by inspecting the function headers you can see that it passes the XHR object as the first peram. So why do we need it to be the calling context as well?
我的解决方案...改变jquery.unobtrusive-ajax.js和jquery.unobtrusive的Ajax-min.js文件...
My solution... change the "jquery.unobtrusive-ajax.js" and "jquery.unobtrusive-ajax-min.js" files...
而不是通过本（XHR）的适用方法，让发送实际的元素，而不是！
rather than pass "this" (XHR) on the apply method, lets send the actual element instead!
所以整个函数现在看起来是这样的：
So the whole function now looks like this:
function asyncRequest(element, options) {
var confirm, loading, method, duration;
confirm = element.getAttribute("data-ajax-confirm");
if (confirm && !window.confirm(confirm)) {
return;
}
loading = $(element.getAttribute("data-ajax-loading"));
duration = element.getAttribute("data-ajax-loading-duration") || 0;
$.extend(options, {
type: element.getAttribute("data-ajax-method") || undefined,
url: element.getAttribute("data-ajax-url") || undefined,
beforeSend: function (xhr) {
var result;
asyncOnBeforeSend(xhr, method);
result = getFunction(element.getAttribute("data-ajax-begin"), ["xhr"]).apply(element, arguments);
if (result !== false) {
loading.show(duration);
}
return result;
},
complete: function () {
loading.hide(duration);
getFunction(element.getAttribute("data-ajax-complete"), ["xhr", "status"]).apply(element, arguments);
},
success: function (data, status, xhr) {
asyncOnSuccess(element, data, xhr.getResponseHeader("Content-Type") || "text/html");
getFunction(element.getAttribute("data-ajax-success"), ["data", "status", "xhr"]).apply(element, arguments);
},
error: getFunction(element.getAttribute("data-ajax-failure"), ["xhr", "status", "error"])
});
options.data.push({ name: "X-Requested-With", value: "XMLHttpRequest" });
method = options.type.toUpperCase();
if (!isMethodProxySafe(method)) {
options.type = "POST";
options.data.push({ name: "X-HTTP-Method-Override", value: method });
}
$.ajax(options);
}
现在，当你创建你的函数来处理这些事件，你可以用本，以获得实际的元素。
Now when you create your functions to handle these events you can use "this" to get the actual element.
例如：
function BeginUpdatePage(xhr) {
$("#MainMenu li").removeClass('selected');
$(this).parent().addClass('selected');
$("#pageBody").fadeTo('slow', 0.5);
}
function EndUpdatePage(xhr,status) {
$("#pageBody").fadeTo('slow', 1);
}
function FailUpdatePage(data,status,xhr) {
alert('There has been an error loading this page please try again.');
}
现在对于一些人来说我更容易只是去与达林的解决方案，只写你自己的jQuery来处理click事件，嘿，你可能有过这一切更好的控制，
Now for some people it my be easier to just go with Darin's solution, to just write you own Jquery to handle the click event, hey you probably have better control over it all,
但是我认为建在东西信徒应该工作了。而不必惹它。
所以我希望无论是有人能证明我错了，居然有这样做的更好的办法，或者谁把这个脚本一起的球员可以改变它。
but Im a believer that the built in stuff should work too. without having to mess with it. So I hope either somebody can prove me wrong, and there is actually a better way of doing this, or the guys who put this script together could change it.
，除非他们有很好的理由做这种方式？欢迎解释： - ）
unless they have good reason for doing it this way? explanations welcome :-)
再次感谢大家谁了这个问题的好建议
我希望这有助于人们对未来。
Thanks again everybody who had good suggestions for this question I hope this helps people in the future.
这篇关于如何使用$（本）MVC3 Ajax.ActionLink OnBegin，的onComplete事件里的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
