单击面板会导致异步回发,但单击子项会导致整页回发

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了单击面板会导致异步回发,但单击子项会导致整页回发相关的知识,希望对你有一定的参考价值。

我有以下ASCX控件:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="CalendarDay.ascx.cs" 
    Inherits="MVP.Calendar.CalendarDay" %>

<asp:Panel ID="DayWrapper" runat="server" 
    CssClass="day col p-2 border border-left-0 border-top-0 text-truncate">
    <div class="date d-flex align-items-center justify-content-center <%= CurrentDayTag %>">
        <%= DayText %>
    </div>
    <div class="row pl-3 pr-3 d-none d-sm-block">
        <p class="info"><%= InfoText %></p>
        <a class="d-block rounded small align-self-start" title="Test 1"><%= PriceText %></a>
    </div>
</asp:Panel>

这是代码隐藏的一部分:

public partial class CalendarDay : UserControl, IPostBackEventHandler
{
    protected override void OnPreRender(EventArgs e)
    {
        base.OnPreRender(e);

        DayWrapper.CssClass += DayBackgroundTag;
        DayWrapper.Attributes["onclick"] = "javascript:__doPostBack('" + UniqueID + "', '')";
    }

    void IPostBackEventHandler.RaisePostBackEvent(string eventArgument)
    {
        OnDayClicked();
    }
}

这是呈现的DOM:

<div id="MainContent_CalDate_WeekRepeater_DayRepeater_3_CalendarDay_1_DayWrapper_1"
    class="day col p-2 border border-left-0 border-top-0 text-truncate day--fully-available"
    onclick="javascript:__doPostBack('ctl00$MainContent$CalDate$WeekRepeater$ctl03$DayRepeater$ctl01$CalendarDay', '')">
    <div class="date d-flex align-items-center justify-content-center ">17</div>
    <div class="row pl-3 pr-3 d-none d-sm-block">
        <p class="info"></p>
        <a class="d-block rounded small align-self-start" title="Test 1">10€</a>
    </div>
</div>

这个ASCX控件位于一个相当复杂的层次结构中,但最终,所有这些都在UpdatePanel中。

在渲染的html上,如果我点击17或10€文本,我会得到一个完整的页面回发,但如果我点击顶部div中的任何其他地方,我会从我的UpdatePanel获得一个AJAX调用。这两个调用都正确地触发了RaisePostBackEvent函数。

我希望并且希望每次都能收到AJAX电话。

为什么会发生这种情况,我该如何解决?

答案

您可能需要注册控件以进行异步回发。尝试改变这个;

DayWrapper.Attributes["onclick"] = "javascript:__doPostBack('" + UniqueID + "', '')";

对此:

DayWrapper.Attributes["onclick"] = Page.ClientScript.GetPostBackEventReference(new PostBackOptions(this));
ScriptManager.GetCurrent(Page).RegisterAsyncPostBackControl(this);

这里的主要区别是对RegisterAsyncPostBackControl的调用,它告诉ScriptManager该控件确实应该用于异步回发。我也在改变生成回发链接的方式。这实际上可能不是必需的,但它似乎比手动生成JavaScript更清晰。

以上是关于单击面板会导致异步回发,但单击子项会导致整页回发的主要内容,如果未能解决你的问题,请参考以下文章

UpdatePanel 中 ListView 中的 LinkBut​​ton 导致完全回发

在执行异步回发页面时会丢失 gridviewscroll 脚本?

转发器会导致整个页面的回发,即使它位于更新面板内

单击按钮时如何防止下拉列表在更新面板中回发或更新

关闭子模态窗体后父页回发的问题

从 JavaScript 添加 asp.net 下拉列表项会导致页面回发错误