【问题标题】:Button in UpdatePanel triggers event, but the page doesn't updateUpdatePanel 中的按钮触发事件,但页面不更新
【发布时间】:2013-05-22 14:49:33
【问题描述】:

这是标记:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <div class="well well-large">
            <form class="navbar-form pull-left">
                <asp:FileUpload ID="test" runat="server" CssClass="input-small" />
                <br />
                <asp:Button ID="btnUpload" runat="server" Text="Upload" CssClass="btn" OnClick="btnUpload_Click" />
            </form>
        </div>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="btnUpload" EventName="Click" />
    </Triggers>
</asp:UpdatePanel>

<asp:Panel runat="server" ID="panAlert" Visible="false">
    <div class="alert alert-success" id="divAlert" runat="server">
        <button id="Button1" runat="server" type="button" class="close" data-dismiss="alert">&times;</button>
        You shouldn't see this message!
    </div>
    <asp:Panel runat="server" ID="panMarquee" Visible="true">
        <div id="Div1" runat="server" class="progress progress-success progress-striped">
            <div id="ProgressBar" runat="server" class="bar" style="width: 100%"></div>
        </div>
    </asp:Panel>
</asp:Panel>

当点击 btnUpload 按钮时,服务器代码应该确定 FileUpload 控件是否有文件。如果是这样,它会将 Panel 控件的可见性更改为 true。它在 UpdatePanel 之外也能正常工作。

这是服务器代码:

protected void btnUpload_Click(object sender, EventArgs e)
    {
        this.SetMessage(Message.Success);
        try
        {
            if (this.test.HasFile)
            {
                string filename = Path.GetFileName(GetUB04Doc.FileName);
                //test.SaveAs(Server.MapPath("~/") + filename);
                this.SetMessage(Message.Success);
            }
        }
        catch (Exception ex)
        {
            //TODO: Do something with th exception
            this.SetMessage(Message.Fail);
        }
        finally
        {
            //this.GetUB04Doc.Dispose();
        }
    }
private enum Message { Success, Fail }
    private void SetMessage(Message msg)
    {
        if (msg == Message.Success)
        {
            this.divAlert.InnerText = "Well done! The document appears to have uploaded successfully. Please wait...";
            this.divAlert.Attributes.Add("class", "alert alert-success");
        }
        else
        {
            this.divAlert.InnerText = "Oh snap! Something broke. Please contact IT right away.";
            this.divAlert.Attributes.Add("class", "alert alert-error");
        }

        this.panAlert.Visible = true;
    }

我也尝试将 Panel 放入 ContentTemplate 部分,但结果相同。

关于我在这里做错了什么有什么想法吗?

【问题讨论】:

  • 我不想告诉你,但FileUpload 控件在UpdatePanels 中无法正常工作!有一些变通方法,例如使用 MS Ajax Toolkit 中的AsyncFileUpload。
  • 为什么要更新 Panel 而不是 Json 和 Jquery 来发布数据?
  • @Belogix 谢谢。我将切换到 AJAX 控件。

标签: c# asp.net updatepanel postback code-behind


【解决方案1】:

您应该在另一个UpdatePanel 中将要从异步回发修改的区域包围起来,并将UpdateMode 设置为Conditional。然后从代码隐藏中手动更新另一个:

<asp:UpdatePanel ID="panAlertUpdatePanel" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
    <asp:Panel runat="server" ID="panAlert" Visible="false">
        <!-- ....

代码隐藏:

// ...
this.panAlert.Visible = true;
panAlertUpdatePanel.Update()

旁注:正如@Belogix 已经评论的那样,您应该在UpdatePanel 中使用AsyncFileUpload 控件,因为异步回发不支持常规FileUpload 控件。

MSDN:

与 UpdatePanel 控件不兼容的控件:

  • ...
  • FileUpload 和 HtmlInputFile 控制它们何时用于上传文件作为异步回发的一部分。
  • ...

在 UpdatePanel 中使用 FileUpload 或 HtmlInputFile 控件 控件,将提交文件的回发控件设置为 面板的 PostBackTrigger 控件。文件上传和 HtmlInputFile 控件只能用于回发场景。

【讨论】:

【解决方案2】:

您需要像这样输入PostBackTrigger 而不是AsyncPostBackTrigger。 &lt;asp:PostBackTrigger ControlID="btnUpload" /&gt;

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多