AJAX 更新面板不起作用。请帮我找出我错在哪里......？答案

【问题标题】：AJAX Update Panel Doesn't Work. Please help me finding where am I wrong...?AJAX 更新面板不起作用。请帮我找出我错在哪里......？
【发布时间】：2012-09-03 02:32:55
【问题描述】：

-------------Gridviews DataBound 事件 ------

protected void grdShowCallingList_DataBound(object sender, EventArgs e)
{
    if (grdShowCallingList.Rows.Count > 0)
    {
      foreach (GridViewRow row in grdShowCallingList.Rows)
        {
           LinkButton lnkCallHistorySummary = (LinkButton)row.FindControl("lnkCallHistorySummary");
            lnkCallHistorySummary.OnClientClick = "return getCallHistroySummary('" + lblPersonID.Text + "','" + lblDomainID.Text + "');";
        }
    }
}

-------------Javascript事件调用触发器--------

function getCallHistroySummary(PID,DID)
{
document.getElementById("ctl00_cphContent_hfCHS").value = PID + "|" + DID;
document.getElementById("ctl00_cphContent_btnTrgCHS1").click();
return false;

}
function btnTrgCHS1Click() {
document.getElementById("ctl00_cphContent_btnTrgCHS_server").click();
return false;
}

-------------要触发的按钮-------------

//------------Modal Popup Starts-------------
<div ID="pnlCallSumHistory" runat="server"  style="overflow: scroll; width: 710px; height: 400px;">
<asp:Button ID="btnTrgCHS_server" runat="server" OnClick="btnTrgCHS_Click" style="display:none;" />

<asp:UpdatePanel ID="updatePnlCallHistory" runat="server">
<ContentTemplate>
<asp:Literal ID="ltrCallHistory" runat="server"></asp:Literal>

</ContentTemplate>
<Triggers >
<asp:AsyncPostBackTrigger ControlID="btnTrgCHS_server" EventName="Click" />
</Triggers>
</asp:UpdatePanel>

</div>
//------------Modal Popup Panel Ends-------------
<asp:Button ID="btnTrgCHS1" runat="server"  style="display:none;"         onclientclick="btnTrgCHS1Click();"  />

我无法触发与 btnTrgCHS_server 相关的触发事件点击事件...

【问题讨论】：

btnTrgCHS_server 按钮在哪里
@sharad 抱歉，这里不包括在内。我现在已经在代码中添加了它。它被放置在将用作模式弹出窗口的面板之外。
您在为您的模态弹出窗口使用 jQuery 对话框吗？他们有一些臭名昭著的问题。
不，它的 AJAX ModalPopupExtender

标签： javascript asp.net ajax gridview updatepanel

【解决方案1】：

看起来您的btnTrgCHS_server 是嵌套在GridView 中的控件，它没有触发的原因是UpdatePanel 将在页面上执行FindControl() 以查找btnTrgCHS_server。 FindControl() 方法不会查看嵌套控件。

最简单的做法是将另一个UpdatePanel 包裹在GridView 周围，如下所示：

  <asp:UpdatePanel ID="updPanelGridView" ChildrenAsTriggers="true" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
      <asp:GridView ID="gvTest" runat="server" />
    </ContentTemplate>
  </asp:UpdatePanel>

  <%-- other code etc --%>

  <asp:UpdatePanel ID="updatePnlCallHistory" UpdateMode="Always" runat="server">
    <ContentTemplate>
      <asp:Literal ID="ltrCallHistory" runat="server"></asp:Literal>
    </ContentTemplate>
  </asp:UpdatePanel>

ChildrenAsTriggers 表示面板内的任何表单提交都会导致 AJAX 回发。

Always 的 UpdateMode 需要设置在 Literal 周围的 UpdatePanel 上，以便在 updPanelGridView 触发 AJAX 回发时更新。

唯一要记住的是，这将始终更新updPanelGridView。

我也不确定您的 GridView 中究竟是什么，所以它可能会导致冲突。

如果发生这种情况，您可以尝试将 GridView 中的 Button 包装在 UpdatePanel 中 - 这可能会减少问题

注意 - 这也很可能导致 btnTrgCHS1 的 ID 发生变化，因此您可能需要将调用 click() 事件的 JavaScript 更新为新 ID。

编辑

通过查看有关其他答案的更新问题/讨论，我想我知道问题所在。您需要修改两件事：

1 - 将 Triggers 部分中的 ControlID 更改为指向按钮本身 - 而不是您希望调用的服务器方法。

即

<Triggers >
<asp:AsyncPostBackTrigger ControlID="btnTrgCHS" EventName="Click" />
</Triggers>

2 - 更改按钮以包含OnClick - 您尚未定义单击按钮时应调用的服务器端方法。这意味着 AJAX 在回发时不知道使用哪种方法。

即

<asp:Button ID="btnTrgCHS1" OnClick="btnTrgCHS1_server" runat="server"  style="display:none;"         onclientclick="btnTrgCHS1Click();"  />

【讨论】：

它不在gridview中，但它在它定义的Modal弹出窗口中。链接按钮lnkCallHistorySummary 在gridview 中，同样与javascript 的getCallHistroySummary 事件绑定以单击更新面板btnTrgCHS_server 的触发器，该面板再次出现在gridview 和模式弹出窗口之外。
您的意思是按钮在ModalPopup 控件内吗？在这种情况下，同样的理论仍然适用 - Trigger 部分找不到嵌套在另一个控件中的控件。
不，我使用的逻辑是，我必须对 gridview 行的多个结果使用相同的弹出窗口。更新面板所在的面板已经被 Ajax Modal Popup Extender 包裹起来。当有人点击 gridview 的链接时，会调用一个 javascript 方法并传递 2 个参数。这两个参数将用于从服务器获取数据并将结果传递给更新面板。这是通过同时从 javascript 中单击 btnTrgCHS_server 来完成的，该 JavaScript 存在于 ₹ModalPopup₹ 之外。但是，问题来了，触发器根本没有触发。
我想我可能已经解决了这个问题 - 我已经在最后更新了我的答案并提供了额外的建议 - 你认为这可能是原因吗？
@Cyberpks - 这解决了您的问题吗？如果是这样，最好将问题标记为已回答。如果没有，其他人可以通过自己发布答案并将其标记为已回答来了解您是如何解决问题的：)

【解决方案2】：

不要对动态生成的 ID 进行硬编码。这些将随着您添加容器控件而改变。

改用ClientID 属性来获取asp.net 生成的客户端ID。

function getCallHistroySummary(PID,DID){
  document.getElementById("<%=hfCHS.ClientID%>").value = PID + "|" + DID;
  document.getElementById("<%=btnTrgCHS_server.ClientID%>").click();
  return false;
}

您的 ClientID 似乎确实有误。更正它们并检查

【讨论】：

你能解释一下吗？我必须使用与您提供的相同的 javascript，还是需要其他东西？我收到 Javascript 错误 ->*TypeError: document.getElementById("") is null.*
CliendID 在 aspx 页面中的控件上可用。此代码必须位于具有控件 hfCHS 和 btnTrgCHS_server 的 aspx 页面上
我觉得ClientID一定是静态属性，应该由服务器自己管理。请不要介意，但是，就我而言，这与此无关。我可以看到正在调用 javascript 函数，因为我可以从中调用警报框，并且我还使用 firebug 对其进行了交叉检查，控件具有相同的 ID，我使用过，但我的问题是我可以不要从 javascript 中触发 btnTrgCHS_server Click 事件...

【解决方案3】：

如果是这种情况，您需要使用 javascript 中的 __doPostback() 手动触发回发。

然后在 Page_Load() 中找到回发的元素。如果按钮的 ID 是您要查找的 ID，则使用空参数调用事件。这应该可以解决您的问题..

btnTrgCHS1Click(null,null)

并且事件应该是 OnClick 而不是 onClientClick()

【讨论】：