Grouping controls under a single form element - asp.net

Consider this snippet of code...
<form runat="server">
<asp:TextBox runat="server" ID="TextBoxOne" />
<asp:Button runat="server" ID="SubmitOne" OnClick="ButtonOne_Click" />
<hr />
<asp:TextBox runat="server" ID="TextBoxTwo" />
<asp:Button runat="server" ID="SubmitTwo" OnClick="ButtonTwo_Click" />
</form>
I want to group these two sets of controls.
When the user presses ENTER, having filled out TextBoxOne; the ButtonOne_Click event fires. And when the user has typed something into TextBoxTwo and presses enter; the ButtonTwo_Click event gets fired.
The way you would normally do this, is to have form elements surround each of the groups. But this is not possible in ASP.NET. And short of doing some "has-focus"-logic in JavaScript, I'm all out of ideas.

You can use an <asp:Panel runat=server DefaultButton="SubmitOne"> around the pair.
<form runat="server">
<asp:Panel runat="server" DefaultButton="SubmitOne">
<asp:TextBox runat="server" ID="TextBoxOne" />
<asp:Button runat="server" ID="SubmitOne" OnClick="ButtonOne_Click" />
</asp:Panel>
<hr />
<asp:Panel runat="server" DefaultButton="SubmitTwo">
<asp:TextBox runat="server" ID="TextBoxTwo" />
<asp:Button runat="server" ID="SubmitTwo" OnClick="ButtonTwo_Click" />
</asp:Panel>
</form>

Related

button in updatepanel content template not firing

Hi I have placed some code in an updatepanel on a web page and all works fine except for one button. Whats displayed in the updatepanel is just a number of items that a user has added to a shopping cart.
The buttons that work are btnPlus and btnMinus, they increase the quantity of an item in a shopping cart, and in their code behind this updates the quantities that are being stored in the database.
What's not working is the btnDelete - this is supposed to delete the item from the shopping cart.
When I click it nothing happens - but what's really strange(at moment) is that it does work after I click after I click btnPlus or btnMinus.
Any ideas?
<asp:UpdatePanel ID="pnlSmallCheckout" runat="server">
<ContentTemplate>
<div class="basket">
<%Dim SmallCounter as integer = 0 %>
<asp:Repeater ID="rptSmallCheckout" runat="server">
<ItemTemplate>
<div class="item">
<div class="image">
<img src="/graphics/placeholders/sweets.jpg">
</div>
<div class="title">
<%#Eval("PTitle")%> x<span class="amount" id="span_small_<%=SmallCounter%>"><%#Eval("Quantity") %></span><asp:TextBox ID="txtQuantity" runat="server" Text='<%# Eval("Quantity") %>' MaxLength="3" Style="display: block"></asp:TextBox>
<asp:TextBox ID="txtSmallNumKilos" runat="server" Style="display: block"></asp:TextBox>
<asp:Literal ID="ltrSmallNumKilos" runat="server" Visible="false"></asp:Literal>
</div>
<div class="controls">
<asp:Button ID="btnMinus" CssClass="button minus" Text="-" runat="server" CommandName='<%# Eval("ItemID") %>' OnClientClick="if (!update_qty('minus',this)) return false;" OnClick="btnUpdate_Click" />
<asp:Button ID="btnPlus" CssClass="button plus" Text="+" runat="server" CommandName='<%# Eval("ItemID") %>' OnClientClick="if (!update_qty('plus',this)) return false;" OnClick="btnUpdate_Click" />
<asp:Button ID="btnDelete" runat="server" Text="x" CssClass="button remove" CommandName='<%# Eval("ItemID") %>' OnClientClick="update_total(this);" OnClick="btnDelete_Click" />
</div>
</div>
<%SmallCounter=SmallCounter+1 %>
</ItemTemplate>
</asp:Repeater>
<!-- item -->
</div>
</ContentTemplate>
<Triggers>
</Triggers>
</asp:UpdatePanel>
Any ideas?
Are you getting any javascript error? Check using firebug / other tools?
Errors might be interfering with the updatepanel postback event.
not need to return the clientSidefunction otherwise the serverSide will not fire
OnClientClick="return update_total(this);" OnClick="btnDelete_Click"
ensure "update_total()" "returns true;" if you want to postback.

Panel.DefaultButton and login button

i have two form and each form has button , i have abstracted them by two panel so when enter key in each panel pressed , proper button will send .
in one panel i have login form
<asp:Panel ID="pnlRegistered" runat="server" DefaultButton="btnLoginButton">
<LayoutTemplate>
<asp:Button ID="btnLoginButton" runat="server" CommandName="Login" Text="Login" ValidationGroup="Login1" OnClick="btnLoginButton_Click" ClientIDMode="Static" />
</LayoutTemplate>
<asp:Panel>
but i get exception
System.InvalidOperationException
The DefaultButton of 'pnlRegistered' must be the ID of a control of type IButtonControl.
You are missing the value of DefaultButton:
<asp:Panel ID="pnlRegistered" runat="server" DefaultButton="btnLoginButton">
<asp:Button ID="btnLoginButton" runat="server" CommandName="Login" Text="Login" ValidationGroup="Login1" OnClick="btnLoginButton_Click" ClientIDMode="Static" />
<asp:Panel>
EDIT: You can also set the DefaultButton in the code-behind, like so:
pnlRegistered.DefaultButton = btnLoginButton.UniqueID;
put your panel inside layouttemplate of your login control
<asp:Login ID="Login1" runat="server">
<LayoutTemplate>
<asp:Panel ID="pnlRegistered" runat="server" DefaultButton="btnLoginButton">
<asp:Button ID="btnLoginButton" runat="server" CommandName="Login" Text="Login" ValidationGroup="Login1"
ClientIDMode="Static" />
</asp:Panel>
</LayoutTemplate>
</asp:Login>

How to enable/disable many controls together?

I have many checkBoxes HTML controls runat server, I want to disable and enable them together.
I've tried to set them in an ASP.Net Panel and set the panel disabled, but they stayed enabled.
Any idea ?
The code
<asp:Panel runat="server" ID="PrivilegesCheckList" >
<input id="adminPrivilegeCheckBox" type="checkbox" runat="server" />
<asp:Literal ID="Literal1" runat="server" Text="<%$ Resources:Resource, itemAdminPrivilege%>" />
<br />
<input id="accountPrivilegeCheckBox" type="checkbox" runat="server" clientidmode="Static" />
<asp:Literal ID="Literal2" runat="server" Text="<%$ Resources:Resource, itemAccountManagerPrivilege%>" />
<br />
<input id="employeePrivilegeCheckBox" type="checkbox" runat="server" clientidmode="Static" />
<asp:Literal ID="Literal3" runat="server" Text="<%$ Resources:Resource, itemEmployeeManagerPrivilege%>" />
<br />
<input id="orgChartPrivilegeCheckBox" type="checkbox" runat="server" clientidmode="Static" />
<asp:Literal ID="Literal4" runat="server" Text="<%$ Resources:Resource, itemOrgChartPrivilege%>" />
</asp:Panel>
Using JavaScript you may do something like this :
var controls = document.getElementById("<%=panel1.ClientID%>").getElementsByTagName("input");
for (var i = 0; i < controls.length; i++)
controls[i].disabled = true;
Note that ASP.Net produces dynamic Id's for server side controls (panel here ) , that tends to use document.getElementById("<%=panel1.ClientID%>") above.
Setting the Panel to disabled would work for asp Controls like CheckBox but not for an input with runat=server. This checkbox is disabled because the panel has Enabled=false:
<asp:Panel ID="Panel1" runat="server" Enabled="false" >
<asp:CheckBox ID="CheckBox1" runat="server" />
</asp:Panel>
You could also easily fix this with jquery (client side):
$('#mypanelClientID input[type=checkbox]').attr('disabled', true);

ASP.NET panel does not update when last item gets deleted

I am sure that I am missing something really obvious here, but I just can't see it.
I have an update panel with a datalist inside it. Each item of the datalist has a delete button with which I issue the Delete command for the item.
Deletion is a two part process: I first pop up a modal dialogue from codebehind to ask for confirmation, like so:
/// <summary>
/// Manager delete command
/// </summary>
protected void dlKeywordsManager_DeleteCommand(object source, DataListCommandEventArgs e)
{
//Get the subject ID
int keywordID = (int)dlKeywordsManager.DataKeys[e.Item.ItemIndex];
//Remember the keyword ID on the modal popup
hfKeywordID.Value = keywordID.ToString();
btnConfirmationPopupOK.CommandArgument = "Delete";
lblConfirmationPopupMessage.Text = "キーワード「" + e.CommandArgument.ToString() + "」を本当に削除しますか?";
mpConfirmationPopup.Show();
dlKeywordsManager.DataBind();
udpKeywordsManager.Update();
}
This modal popup is also within the update panel so that I can get the label text values refreshed on partial postback.
When the use presses the OK button of the popup I go on to execute:
protected void btnConfirmationPopupOK_Click(object source, EventArgs e)
{
int keywordID = int.Parse(hfKeywordID.Value);
KeywordBLLOperation operationResult;
switch (((Button)source).CommandArgument)
{
case "Delete":
operationResult = keywordsAPI.DeleteKeyword(keywordID);
switch (operationResult.Result)
{
case KeywordBLLOperationResult.Deleted:
lnlNotificationsPopupMessage.Text = "キーワード「" + operationResult.KeywordName + "」を削除しました。";
break;
case KeywordBLLOperationResult.Failed:
lnlNotificationsPopupMessage.Text = "キーワード「" + operationResult.KeywordName + "」の削除に失敗しました。アドミニストレーターにお伝えください。";
break;
}
break;
}
mpNotificationPopup.Show();
dlKeywordsManager.DataBind();
udpKeywordsManager.Update();
}
I have remove a few non-essential lines here for brevity.
And here is the aspx markup to go with the code:
<asp:UpdatePanel ID="udpKeywordsManager" runat="server" Visible="true" UpdateMode="Conditional" >
<ContentTemplate>
<div class="keywordsManagerHeader">
<%--DISPLAY STATISTICS--%>
<asp:CheckBox ID="chkShowUsageStatistics" runat="server" Text="参照回数を表示する" AutoPostBack="true" OnCheckedChanged="chkShowUsageStatistics_CheckedChanged" CssClass="keywordsManagerCheckBoxes" TextAlign="Left" />
<%--DISPLAY ORDER--%>
<span class="keywordsManagerLabel" >並べ替え</span>
<asp:DropDownList ID="ddlKeywordsOrder" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlKeywordsOrder_SelectedIndexChanged" >
<asp:ListItem Text="なし" Value="None" />
<asp:ListItem Text="科目名" Value="Name" />
<asp:ListItem Text="参照回数" Value="Frequency" />
</asp:DropDownList>
<asp:RadioButtonList ID="rdlOrder" runat="server" AutoPostBack="true" RepeatLayout="Flow" RepeatDirection="Horizontal" CssClass="keywordsManagerRadioButtons" Enabled="false" >
<asp:ListItem Text="昇順" Value="Ascending" />
<asp:ListItem Text="降順" Value="Descending" />
</asp:RadioButtonList>
<%--UPDATE PROGRESS INDICATOR--%>
<span style="position: absolute;">
<asp:UpdateProgress ID="udpSubjectsManagerUpdateProgress" AssociatedUpdatePanelID="udpKeywordsManager" runat="server" DisplayAfter="500" DynamicLayout="False" >
<ProgressTemplate>
<img class="updateProgressIndicator" src="~/Library_Images/Animations/ajax_loading.gif" alt="" runat="server" />
</ProgressTemplate>
</asp:UpdateProgress>
</span>
</div>
<div class="keywordsManagerContainer">
<%--SUBJECTS DATALIST--%>
<asp:DataList ID="dlKeywordsManager" runat="server" DataKeyField="Keyword_ID" DataSourceID="dsBookKeywords" RepeatDirection="Horizontal"
OnItemDataBound="dlKeywordsManager_ItemDataBound" OnDeleteCommand="dlKeywordsManager_DeleteCommand" OnUpdateCommand="dlKeywordsManager_UpdateCommand" OnPreRender="dlKeywordsManager_PreRender" >
<ItemTemplate>
<span id="KeywordInfo" class="keywordsManagerItem" runat="server">
<asp:Label ID="Subject_NameLabel" runat="server" Text='<%# Eval("Keyword_Name") %>' />
<asp:Label ID="Subject_FrequencyLabel" runat="server" Text='<%# " (" + Eval("Frequency") + ")" %>' Visible="false" />
</span>
<%--HOVER MENU PANEL--%>
<asp:Panel ID="pnlKeywordContextMenu" runat="server" CssClass="keywordsManagerPopupMenuOverall">
<div class="keywordsManagerPopupMenuRow" >
<span class="keywordsManagerLabel">科目「</span>
<asp:Label ID="pnlSubjectContextMenu_Subject_NameLabel" runat="server" Text='<%# Eval("Keyword_Name") %>' />
<span class="keywordsManagerLabel">」を参照している文書数:</span>
<asp:Label ID="pnlSubjectContextMenu_Subject_FrequencyLabel" runat="server" Text='<%# Eval("Frequency") %>' />
</div>
<div ID="Book_ISO_NumbersList" class="keywordsManagerBookISONumbersList" runat="server" visible='<%# (string.IsNullOrEmpty(Eval("Book_ISO_Numbers").ToString())) ? bool.Parse("false") : bool.Parse("true") %>' >
<span class="keywordsManagerLabel">文書:</span>
<asp:Label ID="Book_ISO_Numbers_Label" runat="server" Text='<%# Eval("Book_ISO_Numbers") %>' />
</div>
<div class="keywordsManagerPopupMenuSeparator"></div>
<div class="keywordsManagerPopupMenuRow" >
<asp:TextBox ID="Keyword_NameTextBox" runat="server" Text='<%# Eval("Keyword_Name") %>' CssClass="keywordsManagerPopupMenuInput" />
<asp:Button ID="btnEdit" runat="server" Text="編集" CssClass="buttonShortBottom" CommandName="Update" CausesValidation="true" CommandArgument='<%# Eval("Keyword_Name") %>' />
<asp:Button ID="btnDelete" runat="server" Text="削除" CssClass="buttonShort" CommandName="Delete" CommandArgument='<%# Eval("Keyword_Name") %>' />
</div>
</asp:Panel>
<%--HOVER MENU EXTENDER--%>
<asp:HoverMenuExtender ID="hmeKeywordContextMenu" runat="server" TargetControlID="KeywordInfo" PopupControlID="pnlKeywordContextMenu" PopDelay="100" PopupPosition="Right" HoverDelay="100" />
</ItemTemplate>
<SeparatorTemplate>
<span class="keywordsManagerItemSeparator"></span>
</SeparatorTemplate>
</asp:DataList>
</div>
<%--MODAL POPUPS--%>
<%--CONFIRMATION POPUP--%>
<asp:Panel ID="pnlConfirmationsPopup" runat="server" CssClass="modalNotificationOverall" >
<div class="modalNotificationRow">
<asp:Label ID="lblConfirmationPopupMessage" runat="server" Text="" />
</div>
<div class="modalNotificationRow">
<asp:Button ID="btnConfirmationPopupOK" runat="server" Text="はい" CssClass="buttonMediumLong" OnClick="btnConfirmationPopupOK_Click" />
<asp:Button ID="btnConfirmationPopupCancel" runat="server" Text="いいえ" CssClass="buttonMediumLong" />
</div>
<asp:HiddenField ID="hfKeywordID" runat="server" />
<asp:HiddenField ID="hfNewKeywordName" runat="server" />
</asp:Panel>
<%--NOTIFICATION POPUP--%>
<asp:Panel ID="pnlNotificationsPopup" runat="server" CssClass="modalNotificationOverall" >
<div class="modalNotificationRow">
<asp:Label ID="lnlNotificationsPopupMessage" runat="server" Text="" />
</div>
<div class="modalNotificationRow">
<asp:Button ID="btnNotificationsPopupOK" runat="server" Text="OK" CssClass="buttonMediumLong" />
</div>
</asp:Panel>
<%--MODAL POPUP ANCHORS AND MODULES--%>
<%--DELETE CONFIRMATION--%>
<asp:Label ID="lblConfirmationPopupAnchor" runat="server" Text="" />
<asp:ModalPopupExtender ID="mpConfirmationPopup" runat="server" TargetControlID="lblConfirmationPopupAnchor" PopupControlID="pnlConfirmationsPopup" BackgroundCssClass="modalNotificationBackground" CancelControlID="btnConfirmationPopupCancel" />
<asp:Label ID="lblNotificationPopupAnchor" runat="server" Text="" />
<asp:ModalPopupExtender ID="mpNotificationPopup" runat="server" TargetControlID="lblNotificationPopupAnchor" PopupControlID="pnlNotificationsPopup" BackgroundCssClass="modalNotificationBackground" CancelControlID="btnNotificationsPopupOK" />
</ContentTemplate>
There is a lot of markup in there. The structure is as follows: I have a header section with dropdownlist, radiobuttonlist etc. which allows me to specify the sorting of the data (data comes from an object datasource)
The I have the datalist with items. Each item has a hovermenuextender in which I have the buttons to issue the edit and delete comamnds.
The modal popups are also inside the update panel, but outside the datalist, so that they can be updated as required.
My problem is that this works fine as long as the item I delete is not the last item left in the Datalist. If it is the last item the last popup (mpNotificationPopup) doesn't show.
The code executes all the way through, so the lack of items must cause the upadte panel (udpKeywordsManager) not to update?
Any help as to how to get the datalist to update in this case would be most welcome.
Thanks in advance.
Answering my own question. After painfully rebuilding the whole thing I realised that I was setting the visibility of the update panel to false in the OnPreRender event of the datalist when there were no items left. This basically switched off the update panel half-way through refreshing, so the page didn't refresh when the last element was deleted.
Have sorted it by putting a panel in the update panel which contains all the elements inside it except the "no info available" label and just toggle the visibility of that. Apologies for the stupid question, I guess I was having a stupid moment when I wrote this code...
You should show us the aspx-markup as well, but maybe you've used a ModalPopupExtender inside of your UpdatePanel. Try to move the div/Panel that has the ID of the ModalPopupExtender's PopupControlID property outside of your UpdatePanel.
You only have to nest the UpdatePanel inside of the Popup-Control and not around it.
I hope following makes it clearer:
Instead of doing it this way:
<UpdatePanel>
<DataList>
</DataList>
<ModalPopupExtender>
</ModalPopupExtender>
</UpdatePanel>
You should do it this way:
<ModalPopupExtender>
<UpdatePanel>
<DataList>
</DataList>
</UpdatePanel>
<ModalPopupExtender>

Update Panel not working correctly?

I have added two update panels to my page. I'm trying to update the first panel but not the second. The second panel contains validation controls which seem to be kicking in no matter what I try.
Code
<asp:ToolkitScriptManager runat="server" ID="ScriptManager" />
<asp:UpdatePanel ID="updatePnl" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:label ID="NoConsignments" runat="server" ForeColor="red" />
<br />
<asp:TextBox ID="StartDate" runat="server" /> <asp:TextBox ID="EndDate" runat="server" /> <asp:Button ID="Dates" OnClick="btDates" runat="server" Text="Search" />
<asp:calendarextender ID="Calendarextender2" targetcontrolid="StartDate" Format="dd/MM/yyyy" runat="server"></asp:calendarextender>
<asp:calendarextender ID="Calendarextender3" targetcontrolid="EndDate" Format="dd/MM/yyyy" runat="server"></asp:calendarextender>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Dates" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
</ContentTemplate>
</asp:UpdatePanel>
I've left out some of the middle code of there is alot. If you would like any more code please let me know.
Am I missing something? or is this not the way that update panels should be used?
Thanks you so much for any help you can provide
I would guess that the validation controls in the second UpdatePanel are firing their client-side validation methods (so the update panel isn't posting back, which is correct).
You might be able to get around this by using the ValidationGroup property - assign the validation controls in the first update panel to one validation group (e.g. "ValidationGroupA"), and the validation controls in the second update panel to another validation group.
I haven't used UpdatePanels for a while, and you haven't included the mark up for the validators in the second panel.
However it looks to me like you might not be adding groups to your validation see this tutorial
e.g.:
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server" ValidationGroup="First"/>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ValidationGroup="First" ErrorMessage="TextBox1 should not be blank"
ControlToValidate="TextBox1"/>
<asp:Button ID="Submit1" runat="server" ValidationGroup="First"
Text="Submit 1"/>
<asp:TextBox ID="TextBox3" runat="server" ValidationGroup="Second"/>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
ErrorMessage=" TextBox3 should not be blank"
ControlToValidate="TextBox3" ValidationGroup="Second"/>
<asp:Button ID="Submit2" runat="server" ValidationGroup="Second"
Text="Submit 2"/>
</div>
</form>
</body>
Hope this helps and I haven't missed the point.
You have to specify ValidationGroups for your Buttons and Validators, f.e. Panel1 for your Searchbutton and Panel2 for your Validators in second UpdatePanel.
<asp:Button ID="Dates" ValidationGroup="Panel1" runat="server" Text="Search" />
....
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ValidationGroup="Panel2" ErrorMessage="RequiredFieldValidator"
ControlToValidate="TextBox1" />
</ContentTemplate>
</asp:UpdatePanel>

Resources