【发布时间】：2011-02-01 14:16:39
【问题描述】：
我想首先加载一个 ASP.NET 页面，然后触发一个服务器端事件，该事件反过来更新客户端上的一些 html。该事件与 Anthem.NET imagebutton 控件相关联，因此合乎逻辑的操作过程是触发该控件的事件。但是，如果有另一种方法来触发此服务器端事件并将用户控件的结果 html 返回给客户端，我也会考虑它。我正在使用 ASP.NET 3.5、Anthem.NET 框架和 JQuery 1.4.4。
我已经为此工作了几个小时，并且浏览了几篇似乎有答案的帖子，但似乎没有一个可以解决问题 - 至少不是每个浏览器都适用。
我要触发的按钮：
<anthem:ImageButton runat="server" ID="btnGetRates"
ImageUrl="~/BVModules/Themes/BVC5/Images/Buttons/GetRates.png"
TextDuringCallBack="Retrieving rates...">
</anthem:ImageButton>
在客户端渲染时是这样的：
<span id="Anthem_ctl00_MainContentHolder_EstimateShippingDisplay2_btnGetRates__">
<input type="image"
name="ctl00$MainContentHolder$EstimateShippingDisplay2$btnGetRates"
id="ctl00_MainContentHolder_EstimateShippingDisplay2_btnGetRates"
src="BVModules/Themes/Depot/images/buttons/GetRates.gif"
onclick="javascript:Anthem_FireCallBackEvent(this,event,'ctl00$MainContentHolder$EstimateShippingDisplay2$btnGetRates','',true,'','','Retrieving rates...',true,null,initAccordion,null,true,true);return false;WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$MainContentHolder$EstimateShippingDisplay2$btnGetRates", "", true, "", "", false, false))"
style="border-width:0px;" />
</span>
方法一：
jQuery(document).ready(function() {
setTimeout(getRates, 5000);
});
function getRates() {
jQuery('#ctl00_MainContentHolder_EstimateShippingDisplay2_btnGetRates').click();
}
使用此方法会使按钮文本更新为“正在检索速率...”，但是该调用永远不会到达服务器，它只是无限期挂起（在 IE7 中）。在 Firefox 中，按钮会在一瞬间发生变化，然后又变回来，并且不会触发对服务器的调用。
有趣的是，如果从按钮单击事件而不是从 (document).ready() 调用 getRates() 函数，它将起作用（在 IE 中，但不是 Firefox）。
方法2：
我按照Call ASP.NET function from JavaScript? 中接受的答案中的说明进行操作，但除了不会导致我的服务器端方法触发之外，这种方法还没有解决我希望用户控件的输出 html 出现在方法完成时的客户端。
方法 3：
jQuery(document).ready(function() {
setTimeout(getRates, 5000);
});
function getRates() {
var btn = document.getElementById('ctl00_MainContentHolder_EstimateShippingDisplay2_btnGetRates');
fireEvent(btn,'click');
}
function fireEvent(element,event){
if (document.createEventObject){
var evt = document.createEventObject();
return element.fireEvent('on'+event,evt)
} else {
var evt = document.createEvent("HTMLEvents");
evt.initEvent(event, true, true ); // event type,bubbling,cancelable
return !element.dispatchEvent(evt);
}
}
我发现了这种触发事件的方法here。
这不是使用 jQuery 方法，而是回到 javascript 的基础。此方法在 IE 中完美运行，但我再次遇到 Firefox 问题。由于这是在一个浏览器中工作，我知道我必须接近。
有趣的是，尽管这从某种意义上的工作变成了完全在 IE 中工作，但 Firefox 的行为与方法 #1 完全相同 - 按钮瞬间变为文本“Retrieving Rates.. ." 并且变回来的速度如此之快以至于几乎无法注意到。
另一个线索：
我研究了 Anthem.NET javascript，看看是否能找到关于正在发生的事情的线索。虽然我找到了线索，但我不确定它究竟为什么会导致浏览器行为出现这种差异，或者更具体地说，处理这种不同行为的代码是什么样的。从下面的代码可以看出，IE 的按钮事件的附加方式与其他浏览器不同。如果您想知道，是的，我正在使用验证控件（验证器）。
// Primarily used by Anthem.Manager to add an onsubmit event handler
// when validators are added to a page during a callback.
function Anthem_AddEvent(control, eventType, functionPrefix) {
var ev;
eval("ev = control." + eventType + ";");
if (typeof(ev) == "function") {
ev = ev.toString();
ev = ev.substring(ev.indexOf("{") + 1, ev.lastIndexOf("}"));
}
else {
ev = "";
}
var func;
if (navigator.appName.toLowerCase().indexOf('explorer') > -1) {
func = new Function(functionPrefix + " " + ev);
}
else {
func = new Function("event", functionPrefix + " " + ev);
}
eval("control." + eventType + " = func;");
}
我几乎准备放弃并开始研究一种方法，该方法使用 Web 服务获取我的用户控件的输出 html，然后将其返回给 jQuery，以便可以在客户端表单上替换它，但我想我会检查一下是否有人能给我一个线索，告诉我如何让方法#3 在非 IE 浏览器中工作。
【问题讨论】：
标签： asp.net jquery javascript-events