Question

我想首先加载一个ASP.NET页面然后触发服务器端事件，然后更新客户端上的一些html。该事件与Anthem.NET图像按钮控件绑定，因此逻辑行动方针是触发该控件的事件。但是，如果有另一种方法来触发此服务器端事件并将生成的用户控件的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(&quot;ctl00$MainContentHolder$EstimateShippingDisplay2$btnGetRates&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" 
        style="border-width:0px;" />
</span>

方法1：

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的方法。

这可以追溯到javascript的基础知识，而不是使用jQuery方法。这种方法在IE中完美运行，但我再次遇到Firefox问题。由于这是在一个浏览器中工作，我知道我必须越来越近。

有趣的是，即使这种工作从排序工作转变为完全在IE中工作，Firefox的行为与方法＃1的行为完全相同 - 按钮瞬间改变为文本“检索率... “并且变化得如此之快，几乎不可能。

另一条线索：

我挖掘了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，以便可以在客户端表单上替换它，但我想我会检查是否有人能给我一个关于如何在非IE浏览器中使用方法＃3的线索。

Answer 1

您已经提供了所需的答案，它位于渲染控件的onclick事件中。

onclick="javascript:Anthem_FireCallBackEvent(this,event,'ctl00$MainContentHolder$EstimateShippingDisplay2$btnGetRates','',true,'','','Retrieving rates...',true,null,initAccordion,null,true,true);

你可以把你的呼叫放在Anthem_FireCallBackEvent的任何地方，但是你需要把它收紧一点：

Anthem_FireCallBackEvent(document.getElementById('<%= btnGetRates.ClientID %>'),event,'<%= btnGetRates.UniqueId%>','',true,'','','Retrieving rates...',true,null,initAccordion,null,true,true);

传递任何你想要的事件，但事件不能为空或你会得到错误。

Answer 2

我有类似的经历。我使用anthem计时器代替jQuery计时器。

在ASP.NET中加载页面时，如何触发Anthem.NET按钮单击事件？

2 个答案: