UpdatePanel与PostBackTrigger的应用实例

这段代码实现的作用是实现从数据库中下载文件，并且将文件打包成zip包。在前台页面上有一些下载选项，由一个RadioButtonList和TextBox组成。TextBox用来填写文件名，RadioButtonList用来设置下载选项，可以选择下载默认图片或者是缩微图。

 

考虑到下载文件需要占用带宽，如果文件很大，比如100M，以目前普通的ADSL下载速度512KB计算，也要花上一段时间的，所以将文件大小控制在一定的范围内还是比较实际的。

 

所以用户点击提交按钮时，首先计算出下载文件的大小，如果超过10M，则弹出对话框提示该用户，是否继续下载。同样，用户在变更下载选项时，也要计算下载文件的大小。个人觉得这不是最好的做法，做好的做法应该在点击提交按钮时再进行计算文件大小的工作，这样可以节省开销，但由于本人能力有限，目前只能在RadioButtonList选项变更时计算下载文件的大小。

 

由于RadioButtonList选项变更时，会进行PostBack，所以使用了UpdatePane，避免页面刷新，不过这样就有问题了，因为提交按钮是需要PostBack的，而不是AsyncPostBack。

 

参考了一些资料，主要是关于UpdatePanel中Trigger的使用，最后加了这么一句代码，就解决了问题。

    <Triggers>
        <asp:PostBackTrigger ControlID="btnDownloadPictures" />
    </Triggers>

这是指定提交按钮要触发PostBack，哪怕该控件是放置在UpdatePanel中。

 

关于UpdatePanel与Trigger的使用，可以参见我之前的2篇帖子，已经写的非常明确。

 

 

前台代码：

<asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional">
    <ContentTemplate>
        <table class="table100" cellpadding="0" cellspacing="0">
            <tr>
                <td class="LabelTdStyle">
                    <asp:Label ID="lblDownloadOptions" runat="server" Text="Download Options:" ></asp:Label>
                </td>
                <td>
                    <asp:RadioButtonList ID="rbtDownloadOptions" runat="server" AutoPostBack="True" OnSelectedIndexChanged="rbtDownloadOptions_SelectedIndexChanged">
                        <asp:ListItem Value="True" Selected="True">Download default pictures.</asp:ListItem>
                        <asp:ListItem Value="False">Download thumbnail pictures.</asp:ListItem>
                    </asp:RadioButtonList>
                </td>
            </tr>
            <tr>
                <td class="LabelTdStyle">
                    <asp:Label ID="lblZIPFileName" runat="server" Text="ZIP File Name:"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="txtZIPFileName" runat="server"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="rfvZIPFileName" runat="server" ErrorMessage="ZIP file name is required."
                        ValidationGroup="vgDownloadPictures" ControlToValidate="txtZIPFileName">*</asp:RequiredFieldValidator>
                    <asp:RegularExpressionValidator ID="revZIPFileName" runat="server" ErrorMessage="The Zip file name can contain only letters, numbers, periods (.), hyphens (-), and underscores (_). <br />4-character minimum; 25-character maximum"
                        ControlToValidate="txtZIPFileName" ValidationGroup="vgDownloadPictures" ValidationExpression="^[/w/-/.]{4,25}$">*</asp:RegularExpressionValidator></td>
            </tr>
            <tr class="tr10">
                <td class="LabelTdStyle">
                    &nbsp;
                </td>
                <td>
                    <asp:ValidationSummary ID="vs" runat="server" ValidationGroup="vgDownloadPictures" />
                </td>
            </tr>
            <tr>
                <td colspan="2" align="right">
                    <asp:Button ID="btnDownloadPictures" runat="server" Text="Download" OnClick="btnDownloadPictures_Click" ValidationGroup="vgDownloadPictures">
                    </asp:Button>
                    <asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClick="btnCancel_Click"></asp:Button>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="right">
                    <asp:Label ID="lblDownloadConfirm" runat="server" Text="Are you sure to continue to download this zip file, it would be more than 10 Megabytes?"></asp:Label>
                    <asp:Label ID="lblNoGiftPicturesToDownload" runat="server" Text="No gift pictures to download."></asp:Label>
                </td>
            </tr>
        </table>
    </ContentTemplate>
    <Triggers>
        <asp:PostBackTrigger ControlID="btnDownloadPictures" />
    </Triggers>
</asp:UpdatePanel>

<script type="text/javascript" language="javascript">
function DownloadConfirm()
{
    if ( typeof( Page_Validators) != "undefined" )
    {
        for(var i=0;i<Page_Validators.length;i++)
        {
            ValidatorValidate(Page_Validators[i]);
            if (!Page_Validators[i].isvalid && Page_Validators[i].validationGroup == 'vgDownloadPictures')
            {
                return true;  
            }
        }
        return window.confirm(document.getElementById("<%=this.lblDownloadConfirm.ClientID %>").innerHTML);
    }
} 
</script>

 

 

后台代码：

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                if (IsGiftPictureSizeExceedMaximumLimitation())
                {
                    this.btnDownloadPictures.Attributes.Add("onclick", "javascript:if(!DownloadConfirm()) return false;");
                }
            }
        }

        protected void rbtDownloadOptions_SelectedIndexChanged(object sender, EventArgs e)
        {
            if (IsGiftPictureSizeExceedMaximumLimitation())
            {
                this.btnDownloadPictures.Attributes.Add("onclick", "javascript:if(!DownloadConfirm()) return false;");
            }
            else
            {
                this.btnDownloadPictures.Attributes.Remove("onclick");
            }
        }