Sunday, March 11, 2012

Partial Update completes but displays in wrong place

This is part of the page:
<asp:content id="Content1" contentplaceholderid="Main" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true">
</asp:ScriptManager>
<table align="center" style="width:770px; border-width:0px" cellpadding="0" cellspacing="0">
<tr>
<td colspan="4" align="center" class="contentmain_spanmiddle">
<h3>
Sign up for an account</h3>
</td>
</tr>
<tr>
<td class="contentmain_spanmiddle">
<table style="text-align:center; width:500px; border-width:0px" cellpadding="10" cellspacing="0">
<tr>
<td align="left">
<asp:CreateUserWizard ID="CreateUserWizard1" runat="server"
RequireEmail="true"
DisableCreatedUser="false"
LoginCreatedUser="false"
EmailRegularExpression="\S+@.\S+\.\S+"
CreateUserButtonStyle-CssClass="createUserButtonStyle"
CreateUserButtonText="Register"
ContinueDestinationPageUrl="~/Default.aspx"
OnCreatedUser="CreateUserWizard1_CreatedUser">
<WizardSteps>
<asp:CreateUserWizardStep ID="CreateUserWizardStep1" runat="server">
<ContentTemplate>
<table id="Tab1" cellpadding="3" cellspacing="0" border="0">
<tr>
<td colspan="2">
<b>User Login Information</b>
<hr /></td>
</tr>
<tr>
<td class="loginLabelCell">
<label for="UserName">
User Name:</label> </td>
<td class="loginFieldCell">
<asp:TextBox ID="UserName" runat="server" MaxLength="50" SkinID="loginTextBox">
</asp:TextBox><asp:RequiredFieldValidator ID="UserNameRequired" runat="server"
ControlToValidate="UserName"
ErrorMessage="User Name is required."
ToolTip="User Name is required."
ValidationGroup="CreateUserWizard1">*</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="loginLabelCell">
<label for="Password">
Password:</label> </td>
<td class="loginFieldCell">
<asp:TextBox ID="Password" runat="server" TextMode="Password" MaxLength="20" SkinID="loginTextBox">
</asp:TextBox><asp:RequiredFieldValidator ControlToValidate="Password" ErrorMessage="Password is required."
ID="PasswordRequired" runat="server" ToolTip="Password is required." ValidationGroup="CreateUserWizard1">*</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="loginLabelCell">
<label for="ConfirmPassword">
Confirm Password:</label> </td>
<td class="loginFieldCell">
<asp:TextBox ID="ConfirmPassword" runat="server" TextMode="Password" MaxLength="20" SkinID="loginTextBox">
</asp:TextBox><asp:RequiredFieldValidator ControlToValidate="ConfirmPassword" ErrorMessage="Confirm Password is required."
ID="ConfirmPasswordRequired" runat="server" ToolTip="Confirm Password is required."
ValidationGroup="CreateUserWizard1">*</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="loginLabelCell">
<asp:Image ID="Image1" runat="server" SkinID="spacer" /></td>
<td class="loginFieldCell">
<asp:Label ID="Label1" runat="server"
Text="Please note: The password must contain numbers, letters, non-alphanumeric characters and must be at least 7 characters long."
Width="300px"></asp:Label><br /><br /></td>
</tr>
<tr>
<td colspan="2">
<br />
<br />
<b>User Personal Information</b>
<hr /></td>
</tr>
<tr>
<td class="loginLabelCell">
<label for="FirstName">
First Name:</label> </td>
<td class="loginFieldCell">
<asp:TextBox ID="FirstName" runat="server" MaxLength="50" SkinID="loginTextBox">
</asp:TextBox><asp:RequiredFieldValidator ControlToValidate="FirstName" ErrorMessage="First Name is a required."
ID="RequiredFieldValidator1" runat="server" ToolTip="First Name is a required." ValidationGroup="CreateUserWizard1">*</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="loginLabelCell">
<label for="LastName">
Last Name:</label> </td>
<td class="loginFieldCell">
<asp:TextBox ID="LastName" runat="server" MaxLength="50" SkinID="loginTextBox">
</asp:TextBox><asp:RequiredFieldValidator ControlToValidate="LastName" ErrorMessage="Last Name is required."
ID="RequiredFieldValidator2" runat="server" ToolTip="Last Name is required." ValidationGroup="CreateUserWizard1">*</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="loginLabelCell">
<label for="Address1">
Street Address:</label> </td>
<td class="loginFieldCell">
<asp:TextBox ID="Address1" runat="server" MaxLength="256" SkinID="loginTextBox">
</asp:TextBox><asp:RequiredFieldValidator ControlToValidate="Address1" ErrorMessage="Street Address is required."
ID="RequiredFieldValidator4" runat="server" ToolTip="Street Address is required." ValidationGroup="CreateUserWizard1">*</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="loginLabelCell">
<label for="Address2">
Address 2:</label> </td>
<td class="loginFieldCell">
<asp:TextBox ID="Address2" runat="server" MaxLength="256" SkinID="loginTextBox"></asp:TextBox>
</td>
</tr>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" EnableViewState="true" UpdateMode="Conditional" Visible="true" RenderMode="Inline">
<ContentTemplate>
<tr>
<td class="loginLabelCell">
<label for="drpCountry">
Country:</label> </td>
<td class="loginFieldCell">
<asp:DropDownList ID="drpCountry" runat="server" AutoPostBack="true" SkinId="loginDrpList" OnSelectedIndexChanged="drpCountry_SelectedIndexChanged" />
</td>
</tr>
<tr>
<td class="loginLabelCell">
<label for="City">
City:</label> </td>
<td class="loginFieldCell">
<asp:TextBox ID="City" runat="server" MaxLength="50" SkinID="loginTextBox">
</asp:TextBox><asp:RequiredFieldValidator ControlToValidate="City" ErrorMessage="City is required."
ID="RequiredFieldValidator5" runat="server" ToolTip="City is required." ValidationGroup="CreateUserWizard1">*</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="loginLabelCell">
<asp:label ID="State1" Visible="false" runat="server" AssociatedControlID="drpState" >
Region/Prov./State:</asp:label>
<asp:label ID="State2" Visible="true" runat="server" AssociatedControlID="State">
Region/Prov./State:</asp:label> </td>
<td class="loginFieldCell">
<asp:DropDownList ID="drpState" Visible="false" Enabled="false" runat="server" SkinId="loginDrpList">
</asp:DropDownList>
<asp:TextBox ID="State" Visible="true" Enabled="true" runat="server" MaxLength="50" SkinID="loginTextBox">
</asp:TextBox>
</td>
</tr>
</ContentTemplate>
<Triggers></Triggers>
</asp:UpdatePanel>
<tr>
<td class="loginLabelCell">
<label for="Zip">
Zip/Postal Code:</label> </td>
<td class="loginFieldCell">
<asp:TextBox ID="Zip" runat="server" MaxLength="50" SkinID="loginTextBox">
</asp:TextBox>
<asp:RequiredFieldValidator
ControlToValidate="Zip"
ErrorMessage="Zip/Postal code is required."
ID="RequiredFieldValidator6"
runat="server"
ToolTip="Zip/Postal code is required."
ValidationGroup="CreateUserWizard1">*</asp:RequiredFieldValidator>
</td>
</tr>
etc. The first thing to note is that the part in the update panel does not show in VS2005 design mode, but shows correctly on the form in the browser.
the page_load contains this snippet:
if (this.Page.IsPostBack == false)
{
drpCountry = new DropDownList();
drpCountry = (DropDownList)CreateUserWizardStep1.ContentTemplateContainer.FindControl("drpCountry");
drpCountry.DataSource = Countries.GetCountries();
drpCountry.DataTextField = "CountryName";
drpCountry.DataValueField = "CountryCode";
drpCountry.DataBind();
}
the selection_changed code is:
protected void drpCountry_SelectedIndexChanged(object sender, EventArgs e)
{
DropDownList drpCountry = (DropDownList)CreateUserWizardStep1.ContentTemplateContainer.FindControl("drpCountry");
string CountryCode = Convert.ToString(drpCountry.SelectedValue);
drpState = new DropDownList();
drpState = (DropDownList)CreateUserWizardStep1.ContentTemplateContainer.FindControl("drpState");
drpState.DataSource = Regions.GetRegions(CountryCode);
drpState.DataTextField = "RegionName";
drpState.DataValueField = "RegionCode";
drpState.DataBind();
if (drpState.Items.Count > 0)
{
drpState.Visible = true;
drpState.Enabled = true;
TextBox State = new TextBox();
State = (TextBox)CreateUserWizardStep1.ContentTemplateContainer.FindControl("State");
State.Visible = false;
State.Enabled = false;
Label State1 = new Label();
State1 = (Label)CreateUserWizardStep1.ContentTemplateContainer.FindControl("State1");
State1.Visible = true;
Label State2 = new Label();
State2 = (Label)CreateUserWizardStep1.ContentTemplateContainer.FindControl("State2");
State2.Visible = false;
dropRegion = true;
}
else
{
drpState.Visible = false;
drpState.Enabled = false;
TextBox State = new TextBox();
State = (TextBox)CreateUserWizardStep1.ContentTemplateContainer.FindControl("State");
State.Visible = true;
State.Enabled = true;
Label State1 = new Label();
State1 = (Label)CreateUserWizardStep1.ContentTemplateContainer.FindControl("State1");
State1.Visible = false;
Label State2 = new Label();
State2 = (Label)CreateUserWizardStep1.ContentTemplateContainer.FindControl("State2");
State2.Visible = true;
dropRegion = false;
}
}

When executing, the country, city & state fields appear above the User login information header, but below the Sign up for an account message.


Hi Ddutch,

Based on your source code, it seems that your issue is mainly caused by the UpdatePanel's location.

Please put the UpdatePanel inside the <td> element. just like this <tr></td>your UpdatePanel</td></tr>.

If it doesn't work, please feel free to let me know.

Best regards,

Jonathan


Thanks, but that did not work. However, as the problem is obviously html related (as it worked with firefox), I tried another solution that worked: I divided the table in three parts: table before update panel, table inside update panel and table after updatepanel as follows:

</table>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<table id="Table2" etc>


</table>
</ContentTemplate>
</asp:UpdatePanel>
<table id="Tab3" etc>

Thanks again

Hendrik M.J. Arnoldus

 

No comments:

Post a Comment