在转发器中的按钮 onclick 事件上使用 javascript 导致更新面板中的完整回发

Posted 2023-02-22

【中文标题】在转发器中的按钮 onclick 事件上使用 javascript 导致更新面板中的完整回发

【英文标题】：using javascript on button onclick event in repeater causing full postback in updatepanel

【发布时间】：2021-11-18 21:27:02

【问题描述】：

我已经在更新面板中测试了中继器内的按钮。如果为按钮添加 asyncpostback <Trigger></Trigger>，则会出现错误。找不到按钮。

好吧，我在中继器中使用了两个链接按钮。我在OnClick="__doPostback(linkbutton1, '');" 上添加了javascript 代码，它在没有fullpostback 的情况下工作。按钮正在单击，我正在显示消息。

它的工作没有问题。没有面临 FullPostBack 问题。

<asp:LinkButton runat="server" ID="linkbutton" OnClientClick="__doPostback(linkbutton1.UniqueID, '');" />

我只想使用函数而不是直接在 OnClick 中编码，问题已经开始了。

示例：

function postback()
__doPostback(linkbutton1.UniqueID, '');

ASP.NET 代码：

<asp:UpdatePanel ID="update_buttons" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
    <ContentTemplate>
      <asp:Repeater  ID="repeaterb" runat="server">
        <ItemTemplate>
          <asp:LinkButton runat="server" ID="linkbutton" OnClientClick="return postback();" />
          <asp:LinkButton runat="server" ID="linkbutton1" OnClick="linkbutton1_Click"/>
        </ItemTemplate>
      </asp:Repeater>
    </ContentTemplate>
</asp:UpdatePanel>

代码隐藏：

Page.ClientScript.RegisterStartupScript(this.GetType(), "postback", "postback()", true);

【参考方案1】：

您在客户端点击中使用 return postback()，但该例程必须返回 true 或 false。如果为 true，则发生服务器端按钮代码和“部分”回发。

请记住，更新面板中的平面简标准 asp.net 按钮确实会导致我们所谓的部分回发（甚至触发页面加载事件）。所以，我看不出使用服务器端 asp.net 按钮和使用 OnClientClick 之间有什么特别的区别，后者也执行回发！！！ - 他们都应该做同样的事情！

请注意通过注入客户端脚本（注册脚本 - 不确定这与这个问题有什么关系？（有点令人困惑））确定有关运行客户端脚本的代码行。您可以让一个按钮同时运行两个客户端代码和服务器端代码组合成一个按钮，如下所示。

因此，对于 OnClientClick 按钮，您将/可以这样做：

<asp:LinkButton runat="server" ID="linkbutton" OnClientClick="postback();return false;" />

所以，如果 OnClientClick 返回 true - 那么更新面板回发将会发生。

如果 OnClientClick 返回 false - 更新面板回发将不会发生。

所以，让我们插入一个测试按钮，然后运行一些服务器端代码：

所以，我们现在有了这个：

  <asp:UpdatePanel ID="update_buttons" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
    <ContentTemplate>
      <asp:Repeater  ID="repeaterb" runat="server">
        <ItemTemplate>

          <asp:TextBox ID="HotelName" runat="server" Text = '<%# Eval("HotelName") %>' ></asp:TextBox>
            <br />
          <asp:LinkButton runat="server" ID="linkbutton" OnClientClick="return postback();" Text="Link button"/>
            <br />
          <asp:LinkButton runat="server" ID="linkbutton1" OnClick="linkbutton1_Click" Text="Link btn 1" />
            <br />

            <asp:Button ID="Button1" runat="server" Text="Server Test button"
                onclick="Button1_Click"/>
            <div style="clear:both;height:15px"></div>
        </ItemTemplate>
      </asp:Repeater>
    </ContentTemplate>
  </asp:UpdatePanel>

所以按钮点击服务端代码可能是这样的：

    protected void Page_Load(object sender, EventArgs e)
    
        if (!IsPostBack)
            LoadMyRepeater();
    

    void LoadMyRepeater()
    
        using (SqlCommand cmdSQL = new SqlCommand("SELECT * from tblHotels WHERE ID = 23",
                                  new SqlConnection(Properties.Settings.Default.TEST3)))
        
            cmdSQL.Connection.Open();
            repeaterb.DataSource = cmdSQL.ExecuteReader();
            repeaterb.DataBind();
        
    
    protected void Button1_Click(object sender, EventArgs e)
    
        Button MyButton = (Button)sender;
        RepeaterItem rRow = (RepeaterItem)MyButton.Parent;

        Debug.WriteLine("Row click Index = " + rRow.ItemIndex.ToString());
        Debug.WriteLine("Hotel Name = " + ((TextBox)rRow.FindControl("HotelName")).Text);

    

所以我们看到了这个：

点击那个按钮，我们得到这个：

输出窗口：

Row click Index = 0
Hotel Name = Ramada Lodge

现在，我们可以为这个简单的按钮添加一个点击点击代码存根。因此，我们可以同时运行客户端代码和服务器端代码来单击一键。

我们甚至可以通过运行 OnClientClick 代码来有条件地运行该按钮代码。

按钮可能变成这样：

      <asp:Button ID="Button1" runat="server" Text="Server Test button"
                onclick="Button1_Click"
                OnClientClick="return myprompt();"/>

和

  <script>
        function myprompt() 
            return confirm("Do you really want to run server code?");

        
    </script>

然后，当您单击该按钮时，您会得到以下信息：

所以，现在如果你点击确定，按钮的服务器端代码就会运行，但是如果你点击取消，那么服务器端代码按钮就不会运行。

但是，请注意提示。如果你使用 jQuery 对话框，toast 消息例程？

这些例程不会等待，您必须稍微更改该代码，因为它异步运行，并且大多数 jquery 对话框和消息框不会等待，因此您不能以这种方式有条件地提示用户（我可以如果您愿意，请发布如何执行此操作）。

所以，不清楚您是否只是想加入，+ 使用标准的 asp.net 按钮，但只调用客户端代码？

如前所述，请确保表达式返回 false。或如前所述，使用：

 OnClientClick="postback();return false;"

我