如何在AsyncFileUploader的OnUploadedComplete事件上更新UpdatePanel？

Question

I need to upload an avatar to server in 3 steps using Ajax:

1. Choose file to upload.
2. Choose crop zone using jquery.Jcrop.js.
3. Create avatar and save it to DB.

I have created a user control to implement it. So user clicks the upload button and there is a modalPopUpExtender shows dialog box where users have to choose the file to upload (using AjaxToolKit File async uploader), after the file is uploaded the second PopUp extender has to show the uploaded image in another dialog box to let the user choose the rectangle to crop. And the last step (button click "Create") is to crop image and show it in the parent page. I'm successful with first step. But I can't make the uploaded image to be displayed in the second dialog box.

So here is my complete ascx file and its code behind:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Avatar.ascx.cs" Inherits="KR.Trivital.Web.UI.Controls.Avatar" %>
<script type="text/javascript">
    window.onload = function () { $addHandler($get('ctl00_CntAvatarBox_ImgButtAvatarImage'), 'click', showOverlay); }

     function showOverlay() {
           var bid = $find('mpeBehaviorID');
           bid.show();
       }

       function uploadComplete(sender, args) {
           var bid = $find('mpeBehaviorID');
           bid.hide();
           var bid2 = $find('ModalPopupExtender1BehaviorID');
           bid2.show();

       }
</script> 

    <asp:UpdatePanel runat="server" ID="UpdPan">
            <ContentTemplate>



        <asp:Image runat="server" ID="ImgAvatarImage" Visible="false" />
        <asp:ImageButton  runat="server" ID="ImgButtAvatarImage" Visible="false" OnClientClick="return false;" />

        <asp:Panel ID="panPopupUpload" runat="server" CssClass="popUpDetails" Width="550" Style="display: none">
            <h2 class="popPanelH2"><asp:Literal runat="server" ID="ltrUploadHeader" Text="Загрузка аватара" /></h2>
            <div style="background-color: Gray; padding: 20px;">
                <asp:Button ID="btnShowPopupUpload" runat="server" Style="display: none" />
                <asp:Button ID="btnCancelPopupUpload" runat="server" Style="display: none" />
                <ajaxToolkit:ModalPopupExtender ID="mdlPopupUpload" runat="server" TargetControlID="btnShowPopupUpload"
                    PopupControlID="panPopupUpload" CancelControlID="btnCancelPopupUpload" BackgroundCssClass="modalBackground"
                    BehaviorID="mpeBehaviorID" />

                    <ajaxToolkit:AsyncFileUpload runat="server" ID="AsncUpload1" OnUploadedComplete="AsncUpload1_UploadedComplete" 
                    OnClientUploadComplete="uploadComplete" />


            </div>
        </asp:Panel>
        <asp:Panel ID="panPopupCropper" runat="server" CssClass="popUpDetails" Width="550" Style="display: none">
            <h2 class="popPanelH2"><asp:Literal runat="server" ID="Literal1" Text="Выбор обрезного формата" /></h2>
            <div style="background-color: Gray; padding: 20px;">
                <asp:Button ID="Button1" runat="server" Style="display: none" />
                <asp:Button ID="Button2" runat="server" Style="display: none" />
                <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Button1"
                    PopupControlID="panPopupCropper" CancelControlID="Button2" BackgroundCssClass="modalBackground"
                    BehaviorID="ModalPopupExtender1BehaviorID" />

                    <img runat="server" id="Img1" alt="" />


            </div>
        </asp:Panel>

        </ContentTemplate>
        </asp:UpdatePanel>

codebehind:

using System;
using KR.Trivital.Web.Core;
using KR.Trivital.Business.Users;
using System.Web;
using System.Drawing.Drawing2D;
using System.IO;
using System.Web.UI.WebControls;
using System.Text;
using System.Web.UI;

namespace KR.Trivital.Web.UI.Controls
{
    public partial class Avatar : SharedBaseControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            this.Visible = Page.User.Identity.IsAuthenticated;

            var avatar = UserAvatarBO.Get(CurrentUserId);
            if (avatar != null)
            {
                ImgAvatarImage.ImageUrl = avatar.ImagePath;
                ImgAvatarImage.Visible = true;
            }
            else
            {
                ImgButtAvatarImage.Visible = true;
            }


        }

        protected void lnkButtUpload_Click(object sender, EventArgs e)
        { 
            // Показать панель загрузки
            mdlPopupUpload.Show();

        }

        private AvatarUploader InitializeAvatarUploader()
        {
            var uploader = new AvatarUploader();

            uploader.SmoothingMode = SmoothingMode.HighQuality;
            uploader.OffSetMode = PixelOffsetMode.HighQuality;
            uploader.ResizingInterpolationMode = InterpolationMode.HighQualityBicubic;
            uploader.ThumbMaxHeight = SiteConfig.UserAvatarsSettings.AvatarHeight;
            uploader.ThumbMaxWidth = SiteConfig.UserAvatarsSettings.AvatarWidth;
            uploader.IntermidiaMaxHeight = SiteConfig.UserAvatarsSettings.UploadHeight;
            uploader.IntermidiaMaxWidth = SiteConfig.UserAvatarsSettings.UploadWidth;
            uploader.JpgQuality = SiteConfig.UserAvatarsSettings.AvatarQuality;
            uploader.UploadFolder = SiteConfig.UserAvatarsSettings.UploadFolder + "/" + this.Page.User.Identity.Name;

            return uploader;
        }

        protected void AsncUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
        {
            var uploader = InitializeAvatarUploader();
            string returnPath = "";
            uploader.UploadImage(AsncUpload1.FileContent, AsncUpload1.FileName, ref returnPath);



            Img1.Src = "~/" + returnPath;
        }


    }
}

Answer 1

This is a "creative solution", but it does work.
It uses the AsyncFileUpload's OnClientUploadComplete you're already using and a Control on your page that will trigger an update on your UpdatePanel (eg a Button; can have display:false if you like).

function uploadComplete(sender, args) {
    // Your code
    __doPostBack('<%= UpdatePanelUpdatingControl.UniqueID %>', '');
}