Develop Reference

Checkbox inside Update Panel causing full post back

I have registration form for users to fill up. In there, one field is there to which if user checks on the button a text box shoulld be enabled to enter the number. I have used following code :
<asp:UpdatePanel ID="upMSME" runat="server">
<ContentTemplate>
<tr>
<td colspan="2">
<asp:Label ID="lblMSME" runat="server" Text="Whether covered under MSME (Tick whichever is applicable)"></asp:Label>
<asp:CheckBox AutoPostBack="true" Checked="true" ID="chbMSME" runat="server" OnCheckedChanged="chbMSME_CheckedChanged" ClientIDMode="AutoID"/>
</td>
</tr>
<tr id="trMSMENo" runat="server">
<td>
<asp:Label ID="lblMSMENo" runat="server" Text="MSME Number" CssClass="alignTop"></asp:Label>
</td>
<td class="ValueBox">
<asp:TextBox ID="txtMSMENo" runat="server" MaxLength="75"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvMSMENo" runat="server" ForeColor="Red" ErrorMessage="*" ControlToValidate="txtMSMENo" ValidationGroup="vgVendor"></asp:RequiredFieldValidator>
</td>
</tr>
</ContentTemplate>
</asp:UpdatePanel>
However I searched over internet and found that by setting the ClientIDMode="AutoID" the issue is resolved. But in my case after setting the property there is still full postback occurred.
I have another update panel also in this form, does it make any difference?
What am I missing?

ASP.NET, Multiple Val Summary not working; required field val not firing

I have a repeater with editable rows on the aspx page. The row has a textbox and a required field validator associated to it. On 'save' button click on that row, the required field valiator fires, It is tied to a validationsummary at the top of the page.
Now I have this panel below the repeater with a text box and a save button. This panel is 'opened' using the jquery show method on the click on a linkbutton at the top of this panel.
The required field validator is not firing for this texbox. I have a different validation summary for this textbox; as I need to trigger the validations on click on its save button only.
So I have the code like this,
<asp:ValidationSummary ID="validationSummary" ValidationGroup="ValidationGroup1" EnableClientScript="true" runat="server" />
<asp:ValidationSummary ID="validationSummary1" ValidationGroup="ValidationGroup2" EnableClientScript="true" runat="server" />
<asp:Repeater ID="Teams" runat="server" OnItemCommand="ItemCommand" OnItemDataBound="ItemDataBound">
<HeaderTemplate>
<table >
<tr>
<th>
<asp:Label ID="lbTeamNameHeader" runat="server" Text="TeamNameHeader"></asp:Label></th>
<th></th> </tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<asp:TextBox ID="txtTeamName" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "txtTeamName")%>' />
<asp:RequiredFieldValidator ID="reqdFieldValTeamName" ErrorMessage="Field cannot be blank" ValidationGroup="ValidationGroup1" runat="server" Display="None" ControlToValidate="txtTeamName"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="regularExprTeamName" ErrorMessage="Invalid input for the team name" ValidationGroup="ValidationGroup1" Display="None" ControlToValidate="txtTeamName" runat="server" ValidationExpression="^[a-zA-Z0-9]+$"></asp:RegularExpressionValidator>
</td>
<td>
<asp:Panel ID="panelSave" runat="server" Visible="false">
<asp:LinkButton ID="linkbuttonSave" runat="server" CommandName="Save" ValidationGroup="ValidationGroup1" Text="SAVE" />
<asp:LinkButton ID="linkbuttonCancel" runat="server" CommandName="Cancel" Text="CANCEL" />
</asp:Panel>
</td>
</tr>
</ItemTemplate>
<FooterTemplate></table></FooterTemplate>
</asp:Repeater>
<asp:LinkButton ID="linkbuttonAddTeam" runat="server" Text="Add New Team" />
<div id="AddPanelDiv" style="display:none;">
<asp:TextBox ID="txtAddTeam" runat="server" />
<asp:RequiredFieldValidator ID="reqdFieldValAddTeam" ErrorMessage="Field cannot be blank" ValidationGroup="ValidationGroup2" runat="server" Display="None" ControlToValidate="txtAddTeam"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="regularExprValAddTeam" ErrorMessage="Invalid format" ValidationGroup="ValidationGroup2" Display="None" ControlToValidate="txtAddTeam" runat="server" ValidationExpression="^[a-zA-Z0-9]+$"></asp:RegularExpressionValidator>
<asp:LinkButton ID="linkbuttonCancel" runat="server" Text="CANCEL"></asp:LinkButton>
<asp:LinkButton ID="linkbuttonSaveNewTeam" runat="server" OnClick="linkbuttonSaveNewTeam_OnClick" Text="SAVE" CausesValidation="true" />
</div>
Why on earth the validators for the bottom panel fire? On click of that save button, it straightaway goes to the page method onclick.
If I remove the validation group and click on the save in the repeater, it fires! But thats not what I want..

You are missing ValidationGroup="ValidationGroup2" on your second button it looks like.
<asp:LinkButton ID="linkbuttonSaveNewTeam" runat="server" OnClick="linkbuttonSaveNewTeam_OnClick"
Text="SAVE" CausesValidation="true" ValidationGroup="ValidationGroup2" />

Postback via update panel resets TabIndex?

This is the only related post I've found so far on SO, not my exact issue, but close.
If I give focus to the first textbox on my page and then press TAB repeatedly until I reach the last control on my page the tab order works flawlessly, every control is given focus in the correct order.
BUT...
If I am actually filling out the form and I select a value in ANY dropdownlist, when I press TAB after selecting the value focus is given to the first textbox on my page rather than the next control after said dropdownlist.
I created a control that includes a label, a dropdownlist and an imagebutton because this list is used multiple times throughout my application. The control looks like this:
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="OrganizationList.ascx.cs" Inherits="MyApp.Web.Controls.OrganizationList" %>
<%# Register src="UpdateProgress.ascx" tagname="UpdateProgress" tagprefix="uc1" %>
<%# Register src="Address.ascx" tagname="Address" tagprefix="uc2" %>
<asp:UpdatePanel ID="OrganizationUpdatePanel" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<div style="margin: 0px;">
<div class="label"><asp:Label ID="Prompt" runat="server"></asp:Label>:</div>
<div class="field"><asp:DropDownList ID="Organizations" runat="server" Width="205" AutoPostBack="True" DataTextField="Name" DataValueField="Id"></asp:DropDownList> <asp:ImageButton id="AddOrganization" runat="server" ImageAlign="AbsMiddle" ToolTip="Add a new organization" onclick="AddOrganization_Click" /></div>
</div>
<asp:HiddenField ID="DummyButton" runat="server" />
<ajax:ModalPopupExtender ID="AddOrganizationModalPopupExtender" runat="server" BackgroundCssClass="modalBackground" CancelControlID="Cancel" DropShadow="true" PopupControlID="NewOrganization" RepositionMode="RepositionOnWindowResizeAndScroll" TargetControlID="DummyButton"></ajax:ModalPopupExtender>
<asp:Panel ID="NewOrganization" runat="server" CssClass="modalPopUp" Width="500">
<asp:Panel ID="OrganizationModalContent" runat="server" CssClass="modalContent" GroupingText="Add Organization" style="text-align: left; vertical-align: top;" Width="490">
<table border="0" cellpadding="2" cellspacing="0" width="100%">
<tr><td colspan="2"><asp:ValidationSummary ID="OrganizationValidationSummary" runat="server" CssClass="ValidationSummary" ValidationGroup="NewOrg" /></td></tr>
<tr><td class="label"><asp:RequiredFieldValidator ID="NameRequired" runat="server" ControlToValidate="Name" Display="Dynamic" ErrorMessage="Please provide the organization's name." SetFocusOnError="true" ValidationGroup="NewOrg">*</asp:RequiredFieldValidator>Organization Name:</td>
<td><asp:TextBox ID="Name" runat="server" MaxLength="100" Width="200"></asp:TextBox></td></tr>
<tr><td class="label"><asp:RequiredFieldValidator ID="PhoneRequired" runat="server" ControlToValidate="Phone" Display="Dynamic" ErrorMessage="Please provide the organization's phone number." SetFocusOnError="true" ValidationGroup="NewOrg">*</asp:RequiredFieldValidator>Phone:</td>
<td><ajax:MaskedEditExtender ID="PhoneMaskedEditExtender" runat="server" ClearTextOnInvalid="true" InputDirection="LeftToRight" Mask="(999)999-9999" MaskType="Number" MessageValidatorTip="true" PromptCharacter="_" TargetControlID="Phone"></ajax:MaskedEditExtender>
<asp:TextBox ID="Phone" runat="server" MaxLength="10" Width="200"></asp:TextBox></td></tr>
<tr><td class="label">Fax:<br />(optional)</td>
<td><ajax:MaskedEditExtender ID="FaxMaskedEditExtender" runat="server" ClearTextOnInvalid="true" InputDirection="LeftToRight" Mask="(999)999-9999" MaskType="Number" MessageValidatorTip="true" PromptCharacter="_" TargetControlID="Fax"></ajax:MaskedEditExtender>
<asp:TextBox ID="Fax" runat="server" MaxLength="10" Width="200"></asp:TextBox></td></tr>
<tr><td colspan="2"><uc2:Address ID="Address" runat="server" /></td></tr>
<tr><td colspan="2" style="text-align: right;"><asp:HiddenField ID="TypeOfList" runat="server" /><asp:Button ID="Submit" runat="server" CausesValidation="true" Text="Submit" onclick="Submit_Click" ValidationGroup="NewOrg" /><asp:Button ID="Cancel" runat="server" Text="Cancel" /></td></tr>
</table>
</asp:Panel>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
<uc1:UpdateProgress ID="OrganizationUpdateProgress" runat="server" AssociatedUpdatePanelId="OrganizationUpdatePanel" />
Here's the TabIndex property on my control:
public short TabIndex
{
get { return Organizations.TabIndex; }
set { Organizations.TabIndex = value; AddOrganization.TabIndex = (short)(value + 1); }
}
Here's one of the references to the control on the parent page:
<uc3:OrganizationList ID="ReportedBy" runat="server" FieldLabel="Reported By" ListType="ReportedBy" TabIndex="105" />
Not sure what else you might want/need to see.
Browsers: IE8, IE9, IE10, FF 29.0.1
We've had some issues with IE versions above 9, so I added a HTTP Response Header to emulate IE9
My users claim that they primarily TAB to navigate in my app, so this is actually a higher priority bug than I expected. I don't know why the TabIndex is ignored once a value is selected.
Any ideas would be greatly appreciated.
UPDATE:
I do have 1 dropdownlist that is just an out-of-the-box dropdownlist, not a user control. That one works correctly. I can select a value in that list and then press TAB and the focus moves to the next control. So, can anyone help me figure out what is "wrong" with my user control that is causing this bug?

These two posts helped me figure out what I needed to do:
A postback via update panel resets TabIndex?
Accessing ToolKitScriptManager/ScriptManager from custom control
I added a SelectedIndexChanged event handler to my DropDownList in my control and set the focus back to the DropDownList. Here's the code:
protected void Organizations_SelectedIndexChanged(object sender, EventArgs e)
{
DropDownList ddl = (DropDownList)sender;
ScriptManager scriptMgr = ScriptManager.GetCurrent(Page);
scriptMgr.SetFocus(ddl);
}
Here's the control on the .aspx page:
<asp:DropDownList ID="Organizations" runat="server" Width="205" OnSelectedIndexChanged="Organizations_SelectedIndexChanged" AutoPostBack="True" DataTextField="Name" DataValueField="Id"></asp:DropDownList>
2014.05.22 UPDATE:
In my custom control I have an image button (+) named AddOrganization. In testing the fix yesterday we discovered that if a user clicked the '+' to add a new organization...after they saved the organization...the new value would get auto-selected (as expected) but the tabbing would get reset again. So I had to modify my button click event handler:
protected void Submit_Click(object sender, EventArgs e)
{
if (Page.IsValid)
{
// Do stuff...save organization
// update the list
BindOrganizationList();
// select the new value
Organizations.SelectedIndex = Organizations.Items.IndexOf(Organizations.Items.FindByText(OrganizationName.Text.ToUpper().Trim()));
// reset the form
ResetOrganizationForm();
OrganizationUpdatePanel.Update();
// set focus back to the dropdownlist
ScriptManager scriptMgr = ScriptManager.GetCurrent(Page);
scriptMgr.SetFocus(Organizations);
}
else
{
// Display friendly validation messages to user
}
}

Required Validator and compare validators do not work!

I am trying to see the validation part working. I have few required field validators and compare field validators, etc.
<div>
<asp:RequiredFieldValidator ID="rfvCompany" ValidationGroup="groupProfile"
ControlToValidate="txtCompany" runat="server"
ErrorMessage="- Company Name Required" Display="Dynamic" />
</div>
<div>
<asp:RequiredFieldValidator ID="rfvAddress" ValidationGroup="groupProfile"
ControlToValidate="txtAddress" runat="server"
ErrorMessage="- Address 1 Required" Display="Dynamic" />
</div>
This is my save button, validation has to happen when this button is clicked.
<tr>
<td align="center">
<asp:ImageButton ID="btnSave" runat="server" ImageUrl="~/images/green-save.gif"
OnClick="btnSave_Click" TabIndex="22" ValidationGroup="groupProfile" />
</td>
</tr>
The popup that comes when the save button is clicked is this..
<tr>
<td colspan="2" align="left" style="padding-left: 75px; padding-top: 10px;">
Do you wish to update the Location Information as well.
</td>
</tr>
<tr>
<td align="center" colspan="4">
<asp:Button ID="btnYesMerchant" Text ="Yes" runat="server" class="popupButton"
causesvalidation="true" OnClientClick="$find('mdlpop').hide(); return true;"
onclick="btnYessave_Click"/>
<asp:Button ID = "btnNoMerchant" Text ="No" runat ="server" class="popupButton"
causesvalidation="true" OnClientClick="$find('mdlpop').hide(); return true;"
onclick="btnNosave_Click"/>
<asp:Button Id="btnCancel" Text ="Cancel" runat="server" class="popupButton" />
</td>
</tr>
Where am i doing wrong? i am in a serious mess, i guess :(

Ensure you have included the asp:ScriptManager on your page. In addition to that check for javascript errors and (if any) add them to your question.

Here i have assigned the popup to the button, so the popup is being called when the button is clicked. Now i have changed the flow. For the button, i have written a javascript function that will validate and calls the popup to show if validation is passed. This worked. Thank you all..

text box have it,s text from DDl

I have a drop-down list which gathers data from the database and a textbox which contains the text from the drop-down list when I select a value from the drop-down list. I tried to make this work, but no data appears in the textbox when I select a value from the drop-down list and no errors appear either. Can anyone help me?
aspx Code:
<table id="Tbl" runat="server" width="70%" border="1" cellspacing="1" cellpadding="1">
<tr>
<td>
Select
</td>
<td>
<asp:SqlDataSource ID="SDSOption" runat="server" ConnectionString="Data Source=ELARABY-1EACFA3\SQLEXPRESS;Initial Catalog=ElarabyGroup;Integrated Security=True"
ProviderName="System.Data.SqlClient" SelectCommand="SELECT [Id], [option] FROM [Option]">
</asp:SqlDataSource>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DropDownList ID="DropDownList1" runat="server" DataSourceID="SDSOption" DataTextField="option"
DataValueField="Id" ondatabound="DropDownList1_DataBound"
onselectedindexchanged="DropDownList1_SelectedIndexChanged">
</asp:DropDownList>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
</td>
<td>
<b style="font-style: italic">Select Option</b> <b style="font-style: italic">
<br />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TxtOption"
Display="Dynamic" ErrorMessage="*" SetFocusOnError="True"><b style="font-style: italic">*</b></asp:RequiredFieldValidator>
</b>
</td>
</tr>
<tr>
<td class="style2">
<asp:Label ID="LblOption" runat="server" Text="Option"></asp:Label>
</td>
<td class="style1">
<asp:TextBox ID="TxtOption" runat="server"></asp:TextBox>
</td>
<td>
<b style="font-style: italic">Note:Add Here Product Option</b> <b style="font-style: italic">
<br />
<asp:RequiredFieldValidator ID="RVOption" runat="server" ControlToValidate="TxtOption"
Display="Dynamic" ErrorMessage="*" SetFocusOnError="True"><b style="font-style: italic">*</b></asp:RequiredFieldValidator>
</b>
</td>
</tr>
<tr style="font-style: italic">
<td class="style2">
</td>
<td>
<asp:Button ID="BtnSubmit" runat="server" Height="20px" Text="Submit" Width="50px"
OnClick="BtnSubmit_Click" />
</td>
<td align="left">
<b><i><span><a href="EditOption.aspx">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Backend/Image/www_4photos_net_1137678404.jpg"
Width="60px" /></a> Display Other </span></i></b>
</td>
</tr>
</table>
CS Code:
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
TxtOption.Text += DropDownList1.SelectedItem.Value;
}

The DropDownList is wrapped in an UpdatePanel, but the TextBox is not.
What this means is during the asychronous postback (triggered on the SelectedIndexChanged event), the postback only has visiblity of the controls inside the UpdatePanel (as this is all that gets submitted to the server).
Because the TextBox is outside the UpdatePanel, it does not have visibility of it during the async postback.
The easiest solution would be to put the Textbox inside the UpdatePanel.
Another solution would be to use ScriptManager.RegisterStartupScript to set the value of the control from the SelectedIndexChanged event using basic JavaScript (which has access to the entire DOM, unlike the asynchronous postback).
E.g
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(UpdatePanel1,
this.GetType(),
"NameOfScript",
string.Format("document.getElementById('{0}').value = '{1}';",
txtOption.ClientId,
DropDownList1.SelectedValue));
}