Quantcast
Channel: AjaxControlToolkit Work Item Rss Feed
Viewing all articles
Browse latest Browse all 4356

Commented Issue: AjaxFileUpload and HtmlEditorExtender not calling ImageUploadComplete Event [27303]

$
0
0
DEV ENV: VS 2008 SP1, .NET 3.5
AjaxControlTooklit.dll (Version 3.5.60919.0)

ISSUE

HtmlEditorExtender and AjaxFileUpload do not work well when created and added to the page dynamically. Special steps and workarounds are required to get the Upload Image File to work properly.

BACKGROUND

I dynamically create HtmlEditorExtender(s) on my page for a number of different reasons, and it generally works fine. However, I tried to implement the new ImageUpload functionality and had to overcome a number of issues to get the events to properly cascade from client to server and to event handler.

The issues are generally related to creating the HtmlEditorExtender controls dynamically (e.g., HtmlEditorExtender hee = new HtmlEditorExtender();... Panel1.Controls.Add(hee)). To get it to work, I had to do all of the following:

[1] After "Upload" is clicked on the client side, the server starts the entire Master-Page-UserControl cycle which causes a number of non-HEE, application issues because none of the Form variables are posted in the POST of the file data. I overcame this by ensuring that the entire application stack, except the responsible UserConrol, returns before processing any of the Page_Init, Page_Load, Page_etc. events.

[2] I had to add special handling code for the POST of the file from the AjaxFileUpload control. To check if this was a POST of an HttpFile from the HtmlEditorExtender/AjaxFileUpload, I had to check the Request.QueryString["contextkey"] and Request.QueryString["guid"] parameters for data in the Page_Init handler for the UserControl.

[3] If the HtmlEditorExtender caused the HTTP Post then I had to dynamically create "stub" controls for the HtmlEditorExtender and the TargetControl textbox and add them to the Parent container. If I didn't add these then the AjaxFileUpload would not have anything to call for the ImageUploadComplete or would lack necessary data.

[4] I had to ensure that the Visible property of all the parents of the HtmlEditorExtender were true. It appears that the OnImageUploadComplete event chain is invoked in the HtmlEditorExtender's Page_PreRender handler. Thus, if it or its parents had Visible=false then ASP.NET would not call the HtmleEditorExtender's Page_PreRender which contained the call to the OnImageUploadComplete event chain.

WORKAROUND

In summary, if you are trying to use the HtmlEditorExtender's ImageUpload on a dynamically created control, you'll generally need to do the following (summarized for brevity):

On AddControls_Click {
TextBox tb = new TextBox();
tb.ID = "foo";
Panel1.Controls.Add(tb);

HtmlEditorExtender hee = new HtmlEditorExtender()
hee.ID = "bar";
hee.TargetControlID = "foo";
hee.Toolbar.Add(new InsertImage())
Panel1.Controls.Add(hee);
}

On Page_Init (processing the HTTP POST of the file data) {
if(Request.QueryString["contextkey"] && Request.QueryString["guid"])
// add controls again (see above)
hee.ImageUploadComplete += [your event handler here]

// Make sure all parent/parent/.../parent controls have Visible=true
// so that the AjaxFileUpload's Page_PreRender will be called and
// therefore call your [your event handler here]
}

SUMMARY

Please include dynamically created controls and features as part of the development and unit testing.

Comments: UPDATE If you're having issues with the HtmlEditorExtender's ImageUploadComplete event then you may want to create the Ajax Response manually. Here's what I did: [1] In Web.Config: add runAllManagedModulesForAllRequests="true" attribute to configuration/system.webServer/modules element. [2] In global.axax, and Application_BeginRequest, check for the following to be true: (a) Request.Method == "POST", (b) Request.QueryString["contextkey"], Request.QueryString["guid"]

Viewing all articles
Browse latest Browse all 4356

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>