CSS Friendly Control Adapters

Re: CSS Adapters cause multiple PostBacks in IE

Antilles128 — Fri, 08 Feb 2008 05:24:31 GMT

Okay, I converted the code from C# to VB.NET (courtesy the code translators over at developerfusion.co.uk), and it's fixed the submittal problem; however, I'm running into two new issues:

1. The form submits, only once, and creates the user in the database. However, it postbacks to the CreateUserWizard form, with the username of the newly registered used populated in the UserName field. I'm wondering if something got lost in the translation from C# to VB.NET that would normally take care of this.

2. I have a second step to my wizard, where the user can edit a profile and save it. However, it seems that the wizard skips over this, and as I said above, postbacks to the empty form (excluding the UserName). Is this an error in my code, or something else in the adapter?

Code for CreateUserWizard:

<asp:CreateUserWizard CssSelectorClass="mchcreate" runat="server" ID="CreateUserWizard1" AutoGeneratePassword="False"

ContinueDestinationPageUrl="~/Default.aspx" FinishDestinationPageUrl="~/Default.aspx">

<MailDefinition BodyFileName="~/RegistrationMail.txt" From="webmaster@motorcyclehound.com"

Subject="MotorcycleHound.Com: New User Registration ">

</MailDefinition>

<asp:CreateUserWizardStep ID="CreateUserWizardStep1" runat="server">

</asp:CreateUserWizardStep>

<asp:WizardStep ID="WizardStep1" runat="server" Title="Set preferences">

Set-up your profile</div>

All settings in this section are optional. The address information is required

only if you want to order products from our e-store. However, we ask you to fill

in these details in all cases, because they help us know our target audience,

and improve the site and its contents accordingly. Thank you for your

cooperation!

<p>

</p>

<mb:UserProfile ID="UserProfile1" runat="server" />

</asp:WizardStep>

<asp:CompleteWizardStep ID="CompleteWizardStep1" runat="server">

</asp:CompleteWizardStep>

</WizardSteps>

</asp:CreateUserWizard>

EDIT: I take that back, I removed the initial fix and just replaced the two lines as suggested above, now the control throws a "Unable to cast object of type 'System.Web.UI.WebControls.WizardStep' to type 'System.Web.UI.WebControls.TemplatedWizardStep'." error in the adapter. Any ideas?

Re: CSS Adapters cause multiple PostBacks in IE

dracflamloc — Wed, 21 Nov 2007 15:23:22 GMT

Dean I had this problem and I realized that with the latest CSS adapters (as of this post date), you don't need the underscore fix anymore. Instead of grabbing the whole Create function as recommended previously, just put the 2 lines in the appropriate place:

bool clientSubmit = (wizard.CreateUserButtonType == ButtonType.Link);
PostBackOptions options = new PostBackOptions(btn, "", "", false, false, false, clientSubmit, true, wizard.ID);

I have not tested the Cancel button of the control since I use my own.

Re: CSS Adapters cause multiple PostBacks in IE

deanmeyers — Tue, 18 Sep 2007 19:32:07 GMT

I have tried implementing your change into my project http://www.bridgelabs.info and it does not work. Know the control doesn't create the user and the error message no longer displays. It just returns to the create user screen.

Did this actually work for anyone else...

Thanks

Dean

Re: CSS Adapters cause multiple PostBacks in IE

dmose — Tue, 21 Aug 2007 04:55:41 GMT

As a folowup, I just realized the problem - but I'm baffled why IE and Firefox behave differently.

Here is the rendred button output:

 <input type="submit" name="ctl00$ContentPlaceHolder1$btnSubmitComment" value="Submit" onclick="if (typeof(Page_ClientValidate) == 'function') { if (Page_ClientValidate('vldCommentGroup') == false) { return false; }} WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$btnSubmitComment", "", true, "vldCommentGroup", "", false, true));this.disabled='true';this.value='Submit';WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$btnSubmitComment", "", true, "vldCommentGroup", "", false, false))" id="ctl00_ContentPlaceHolder1_btnSubmitComment" />

Obviously the issue is the WebForm_DoPostBackWithOptions is being added twice ....

Can anyone think of a workaround?

Re: CSS Adapters cause multiple PostBacks in IE

dmose — Tue, 21 Aug 2007 04:46:46 GMT

I'm having an odd isse with Double-Sumit...only it only occurs in Firefox.

I have a static method that returns a string which I attach to the 'onclick' attribute of the button on its Load event. This script will disable the button when clicked, only if the page validators pass.

The script works, but for some reason Firefox wants to double post data. The one caveat is the button is inside an updatepanel and there is an asycronous postback trigger defined. Here is the code (sorry for the mess):

<asp:UpdatePanel id="updComments" runat="server" ChildrenAsTriggers="false" UpdateMode="conditional" >
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="btnSubmitComment" EventName="Click" />
                </Triggers>
                <ContentTemplate >
                <div id="dvComments" style="clear: both;width: 640px; border: none 1px red; ">
                    <div id="dvCommentHeader_General"><h3>comments / all labels</h3></div>
                    <div id="dvCommentHeader_Specific" style="display: none;"><h3>comments / label specific</h3></div> 
                    <div id="dvCommentThread" runat="server" style="border: none 1px blue; ">
                    </div>                   
                        <div id="dvCommentInput" style="margin-top: 20px;">
                            <div id="dvCommentText" style="float: left; width: 300px; border: none 1px blue; ">
                                <h4>Leave a Comment</h4>
                                <div id="dvCommentTextValid" runat="server" style="border: none 1px black; ">
                                    <asp:TextBox ID="txtComment" 
                                    MaxLength="200" runat="server" 
                                    Columns="35" Rows="7" 
                                    TextMode="Multiline" 
                                    Wrap="true"
                                    Style="overflow: hidden; " 
                                    onkeyup="MonitorTxtComment(this);" onfocus="new ResizingTextArea(this);"
                                     />     
                                     <br />
                                    <uc3:PopText id="ucPopText" runat="server" TargetControlID="txtComment" DefaultMode="Append" />
                                    <br />
                                    <asp:Button ID="btnSubmitComment" runat="server" Text="Submit" 
                                    OnClick="btnSubmitComment_Click" OnLoad="btnSubmitComment_Load" ValidationGroup="vldCommentGroup" />                   
                                     <asp:RequiredFieldValidator ID="vldReqTxtComment" ValidationGroup="vldCommentGroup" 
                                     EnableClientScript="true"
                                     runat="server" 
                                     ControlToValidate="txtComment" 
                                     ErrorMessage="'margin-top: 15px;'>A comment is required</div>" CssClass="ValidationCss"/>                               
                                     <asp:RegularExpressionValidator id="vldRegExTxtComment" runat="server" 
                                    ControlToValidate="txtComment" ValidationGroup="vldCommentGroup" 
                                     ValidationExpression="^[\s\S]{0,200}$" 
                                     ErrorMessage="'margin-top: -15px;'>Comment length limited to 200 chracters</div>"
                                     EnableClientScript="true" CssClass="ValidationCss"
                                     >
                                      </div>
                                <div id="dvCommentTextInvalid" runat="server" style="border: none 1px blue;">
                                    <span class="ContrastText" style="font-weight: bold; font-size: 1.5em;">Want to leave a comment?</span>
                                    <br />
                                    <br />
                                    <asp:linkbutton ID="btnSignUp" runat="server" Text="Sign Up" OnClick="btnSignUp_Click" PostBackUrl="~/viewImage.aspx" /> (new members)
                                    <br /><br />or 
                                    <br /><br />
                                    <asp:linkbutton ID="btnSignIn" runat="server" Text="Sign In" OnClick="btnSignIn_Click" /> (existing members)
                                </div>
                            </div>
                            <div id="dvBrand" style="float: left; width: 320px; border: none 1px red; margin-left: 10px;">
                                 <h4>Brand this Label</h4>
                                 <uc1:BrandCloud id="TagCloud1" runat="server" ShowAutoSuggest="true" ShowResetButton="true" ShowRealOrFake="true" />
                            </div>
                        </div>
                        <div id="dvClear2" style="clear: both;"></div>
                </div>
                </ContentTemplate>
            </asp:UpdatePanel>

Here is the script call:

1     protected void btnSubmitComment_Load(object sender, EventArgs e)
2        {
3            btnSubmitComment.Attributes.Add("onclick", Utils.GetLockButtonJscript(Page, btnSubmitComment, btnSubmitComment.Text, new ArrayList(), ""));
4        }

And the method:

1    /// <summary>
2    /// Generates auto-disable butotn
3    /// </summary>
4    /// <param name="p">Page Instance</param>
5    /// <param name="btn">Button Instance</param>
6    /// <param name="disabledText">Text to display on button when clicked</param>
7    /// <param name="aCol">Optional: Collection of controls on page to disable as well</param>
8    /// <param name="customScript">Optional: Custom script to run before disabling the button</param>
9    /// <returns></returns>
10       public static string GetLockButtonJscript(Page p, Button btn, string disabledText, ArrayList aCol, string customScript)
11       {
12               disabledText = disabledText == "" ? "Processing..." : disabledText;
13               disabledText = disabledText.Replace("'", "");
14              
15               StringBuilder sb = new StringBuilder();
16               if (btn.CausesValidation && p.Validators.Count>0)
17               {
18                   sb.Append("if (typeof(Page_ClientValidate) == 'function') { ");
19                   sb.Append("if (Page_ClientValidate('"+btn.ValidationGroup+"') == false) { return false; }} ");
20               }
21               if (!String.IsNullOrEmpty(customScript))
22               {
23                   sb.Append(customScript);
24               }
25               PostBackOptions opt = new PostBackOptions(btn, "", "", false, false, false, true, true, btn.ValidationGroup);
26               sb.Append(p.ClientScript.GetPostBackEventReference(opt));
27               sb.Append(";");
28               sb.Append("this.disabled='true';this.value='" + disabledText + "';");
29               foreach (Control c in aCol)
30               {
31                   if (c is Button)
32                   {
33                       sb.Append("" + c.UniqueID + ".disabled='true';");
34                   }
35               }
36              
37               return sb.ToString();
38           
39       }

I've read that setting the 4th boolean variable on PostBackOptions to FALSE would potentially fix double-postback..but it doesn't - the page doesnt post back at all when in an updatepanel.

I suspect the updatepanel is submitting the data twice because of the register trigger?

Any suggestions?

Re: CSS Adapters cause multiple PostBacks in IE

bdemarzo — Fri, 20 Jul 2007 20:38:49 GMT

I'm adding these fixes to the CodePlex site. I think they've been thoroughly hashed out enough.

Thanks again to Tana for uncovering this fix!

Re: CSS Adapters cause multiple PostBacks in IE

danadanny — Mon, 09 Jul 2007 08:29:41 GMT

ticanaer:

...

In the ChangePasswordAdapter.cs file locate the WriteSubmitPanel method. In this method locate the following line of code:

...

Hi Tana,

thanks for your reply. I don't have a ChangePasswordAdapter.cs file. Do I have to create one? I don't remember using a control adapter. All I did was dropped a ChangPassword control onto a .ascx and wrote validation/update routines.

Thanks.

Re: CSS Adapters cause multiple PostBacks in IE

ticanaer — Sat, 07 Jul 2007 07:09:14 GMT

Sorry I pasted the wrong code in my last reply - the correct patch is as follows:

bool clientSubmit = (changePwd.ChangePasswordButtonType == ButtonType.Link);
PostBackOptions options = new PostBackOptions(btn, "", "", false, false, false, clientSubmit, true, changePwd.UniqueID);

The previous post didn't actually use the clientSubmit variable

Cheers,

Tana

Re: CSS Adapters cause multiple PostBacks in IE

ticanaer — Sat, 07 Jul 2007 06:51:53 GMT

Hi there,

It sounds like the double postback problem - give the following a go:

In the ChangePasswordAdapter.cs file locate the WriteSubmitPanel method. In this method locate the following line of code:

PostBackOptions options = new PostBackOptions(btn, "", "", false, false, false, true, true, changePwd.UniqueID);

and replace it with these lines:

bool clientSubmit = (changePwd.ChangePasswordButtonType == ButtonType.Link);
PostBackOptions options = new PostBackOptions(btn, "", "", false, false, false, true, true, changePwd.UniqueID);

Give it a go and let us know how you get on. I tried it locally and it worked for me anyway .

Cheers,

Tana

Re: CSS Adapters cause multiple PostBacks in IE

danadanny — Fri, 06 Jul 2007 12:18:44 GMT

Hi Tana,

I have difficulty getting ChangePassword control to work properly, ie, user enters correct current password and valid new password, new password is updated in DB but control shows error.

How can I go about implementing the above-mentioned code? Where should I place them?

Thanks

Re: CSS Adapters cause multiple PostBacks in IE

ticanaer — Sun, 20 May 2007 11:06:41 GMT

Hi there,

Have you tried debugging the code when you click the create button? How about giving us some more info, like:

- Is the form posting back to server (i.e. it's not getting stopped by javascript validation)?

- If you examine the Request.Form items collection do you see the values that you entered on the screen?

- If you examine the properties on the CreateUser control after the page load event fires are they populated with the values that you entered?

It might be worth posting a snippet of your code up so that we can have a look at it too - assuming it doesn't contain any sensitive information that is.

Cheers,

Tana

Re: CSS Adapters cause multiple PostBacks in IE

hanifv — Thu, 17 May 2007 18:45:01 GMT

Hello. I am using CSS Adapter for one of my site and I am facing the same problem with CreateUser Adaptor. I am using VB.NET so i translated the WriteCreateUserButtonPanel method that you posted and replaced it in my code. But now the user is not getting creating. Can anyone help me ? It would be great if someone could update the adaptor and make it available for others to download.

Thanks

Re: CSS Adapters cause multiple PostBacks in IE

bdemarzo — Tue, 01 May 2007 14:53:23 GMT

I'm a heavy Subversion user (and reader of Ayende's blog, for that matter) so I have most diff tools installed. I use TortoiseMerge most often (quick and easy) but have others installed.

Probably best to send over your patch file and I'll toss it into my local install (which isn't on the PC I'm at right now) so I can compare our changes and make sure we cover both bases. Once I do it I'll check it in and we can compare notes.

Re: CSS Adapters cause multiple PostBacks in IE

steve harman — Tue, 01 May 2007 14:48:33 GMT

>> Patch format? I don't think CodePlex has one.

Right... it's actually TFS that lacks built-in patch generation and application (which is yet another reason it is a bad choice for an OSS code repostiory/management tool), but that's for another thread, another time... like the one Ayende has been having as of late.

Anyhow, I didn't know if you used WinMerge (my fav) or some other graphical diff tool that is able to generate and apply patches. If so I could send you the patch that way. But if you've already applied the changes locally, then I suppose there is no point in me duplicating your work when you could just them directly into the repository... unless you'd rather do it that way?

Re: CSS Adapters cause multiple PostBacks in IE

bdemarzo — Tue, 01 May 2007 14:35:01 GMT

Patch format? I don't think CodePlex has one. Just send me the updated files and I'll apply them and look at diffs locally.

Actually I've already added the patched code referenced above in a local version -- I just haven't checked in the changes. I guess it's time to do so to get more feedback on them.