ASP.Net UpdatePanel not Updating, Partial Postback fires

  •  04-02-2013, 8:43 PM

    ASP.Net UpdatePanel not Updating, Partial Postback fires





    So I've been stuck on this problem for quite a few hours now, searched forums, tried everything people suggest, but i just can't make it work.


    I have a (rather large) web form. Somewhere on the form is an updatePanel which contains a CuteSoft Ajax Uploader control. That control calls a function in my code behind when a file is uploaded - this works fine. In that function I make some changes to the content in the updatePanel (add thumbnails etc), however the changes never reflect on the front end.


    Here's the form (with irrelevant bits chopped out):


        <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="VehicleSubmissionWizard.ascx.cs"
        Inherits="MaxAdmin.UserControls.VehicleSubmissionWizard" %>
    ...
    <div id="template3" style="display: none;">
        <div class="top-section">
            <div id="column-left">
                ...
            <div id="column-right">
                ...
        <form runat="server" id="form1" action="">
        <%--Panel 1--%>
        <asp:Panel runat="server" ID="pnlSubmissionWizard1">
            ...
        </asp:Panel>
        <%--/Panel 1--%>
        <%--Panel 2--%>
        <asp:Panel runat="server" ID="pnlSubmissionWizard2">
            ...
                <h2>
                    Vehicle images</h2>
                <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"
                    AjaxFrameworkMode="Enabled" ClientIDMode="Static" EnableViewState="true" LoadScriptsBeforeUI="true"
                    ScriptMode="Auto" ViewStateMode="Enabled">
                </asp:ScriptManager>
                <asp:UpdatePanel runat="server" EnableViewState="false" ID="upImageUpload" UpdateMode="Conditional">
                    <Triggers>
                        <%--                    <asp:AsyncPostBackTrigger ControlID="Uploader" 
                               EventName="FileUploaded" />
                        --%>
                    </Triggers>
                    <ContentTemplate>
                        <input id="hdnImages" class="imagesUpload" type="hidden" />
                        <asp:HiddenField ID="hdn" runat="server" />
                        <CuteWebUI:Uploader ID="Uploader" runat="server" EnableViewState="false" MaxFilesLimit="3"
                            MaxFilesLimitMsg="Please upload a maximum of 3 photos" InsertButtonStyle-Width="280px"
                            MultipleFilesUpload="true" InsertText="Upload Photos [Max 3 Photos at up to 4mb each]"
                            OnFileUploaded="Uploader_FileUploaded" OnUploadCompleted="Uploader_Complete">
                            <ValidateOption MaxSizeKB="4096" AllowedFileExtensions="jpg,gif,png" />
                        </CuteWebUI:Uploader>
                        <div id="attachmentsDiv">
                            <CuteWebUI:UploadAttachments EnableViewState="false" runat="server" ID="Attachments"
                                MaxFilesLimit="3" Visible="false">
                                <ValidateOption MaxSizeKB="4096" AllowedFileExtensions="jpg,gif,png" />
                            </CuteWebUI:UploadAttachments>
                        </div>
                        <br />
                        <asp:Panel ID="pnlImageDetails_1" runat="server" CssClass="display_none" Style="float: left;
                            margin-bottom: 0">
                            <div class="uploadedImage" style="clear: both; float: left; margin: 5px 20px 5px 75px;">
                                <div style="text-align: center">
                                    <asp:Image ID="imgUploadedImage1" runat="server" />
                                </div>
                                <div style="text-align: center">
                                    <asp:LinkButton ID="btnRemoveImage_1" runat="server" OnCommand="RemoveImage_Click"
                                        CommandName="1" Text="Remove Image" CssClass="RemoveLinkButton" Style="margin-left: 15px;" />
                                </div>
                            </div>
                        </asp:Panel>
                        <asp:Panel ID="pnlImageDetails_2" runat="server" CssClass="display_none" Style="float: left;">
                            <div class="uploadedImage" style="clear: both; float: left; margin: 5px 20px 5px 20px;">
                                <div style="text-align: center">
                                    <asp:Image ID="imgUploadedImage2" runat="server" />
                                </div>
                                <div style="text-align: center">
                                    <asp:LinkButton ID="btnRemoveImage_2" runat="server" OnCommand="RemoveImage_Click"
                                        CommandName="2" Text="Remove Image" CssClass="RemoveLinkButton" Style="margin-left: 15px;" />
                                </div>
                            </div>
                        </asp:Panel>
                        <asp:Panel ID="pnlImageDetails_3" runat="server" CssClass="display_none" Style="float: left;">
                            <div class="uploadedImage" style="clear: both; float: left; margin: 5px 20px 5px 20px;">
                                <div style="text-align: center">
                                    <asp:Image ID="imgUploadedImage3" runat="server" />
                                </div>
                                <div style="text-align: center">
                                    <asp:LinkButton ID="btnRemoveImage_3" runat="server" OnCommand="RemoveImage_Click"
                                        CommandName="3" Text="Remove Image" CssClass="RemoveLinkButton" Style="margin-left: 15px;" />
                                </div>
                            </div>
                        </asp:Panel>
                        <script language="javascript" type="text/javascript">
                            var Image_Count = $('#<%= hdn.ClientID %>').val(); 
                        </script>
                    </ContentTemplate>
                </asp:UpdatePanel>
                ...
        </asp:Panel>
        <%-- / Panel 2--%>
        <%--Panel 3--%>
        <asp:Panel runat="server" ID="pnlSubmissionWizard3">
            ...
        </asp:Panel>
        <%-- / Panel 3--%>
        <%-- Panel 4--%>
        <asp:Panel Visible="false" runat="server" ID="pnlSubmissionWizard4">
            ...
        </asp:Panel>
        <%-- / Panel 4--%>
        </form>
        ...
    </div>


    The Codebehind looks like this:


    ...


            protected override void OnInit(EventArgs e)
            {
                base.OnInit(e);


                //Uploader.FileUploaded += new CuteWebUI.UploaderEventHandler(Uploader_FileUploaded);
                Uploader.FileUploaded += Uploader_FileUploaded;
                Uploader.UploadCompleted += Uploader_Complete;
                Attachments.AttachmentRemoveClicked += Attachments_AttachmentRemoveClicked;
                Attachments.InsertButton.Style["display"] = "none";
                ((HiddenField)FindControl("hdn")).Value = "0";
            }


    ...


            protected void Uploader_FileUploaded(object sender, CuteWebUI.UploaderEventArgs args)
            {
                ...


                    using (System.IO.Stream stream = args.OpenStream())
                    {
                        // Check if file already exists - seems to do each image twice for some reason...
                        foreach (var ph in Photos)
                            if (String.Equals(ph.FileName, args.FileName))
                                return;


                        ...


                        // Show image thumbnail
                        ShowUploadedPhotoDetails(p, ImageCount);
                    }
                }
                catch (Exception ex)
                {
                   ...
                }
            }


        private void ShowUploadedPhotoDetails(Photo photo, int imageNo)
        {
            if (imageNo <= 3)
            {
                var imagePanel = (Panel)FindControl(String.Concat("pnlImageDetails_", imageNo));
                imagePanel.CssClass = "display_block";
                imagePanel.Visible = true;


                var uploadedImage = (System.Web.UI.WebControls.Image)FindControl(String.Concat("imgUploadedImage", imageNo));
                uploadedImage.ImageUrl = photo.ImageUrlThumb;
                uploadedImage.Visible = true;
                uploadedImage.CssClass = "CSS_CLASS";
            }
        }


            protected void Uploader_Complete(object sender, CuteWebUI.UploaderEventArgs[] args)
            {
                Uploader uploader = (Uploader)sender;
                uploader.InsertButton.Enabled = (Photos.Count < 3);


                // Force updatePanel to update
                upImageUpload.Update();
            }


    So both the above functions fire when an image is uploaded. The image data is coming through fine. Debugging the values assigned to the controls (eg: ImageUrl, CssClass, etc) shows that they're getting assigned to the controls correctly.. however the values never get refreshed on the front end.


    Any ideas what I've missed?


    Thanks heaps Greg

    Filed under:
View Complete Thread