Updating a field in an Master Page's UpdatePanel from CodeBehind - asp.net

I've got a master page with a cart count at the top of my page inside an updatepanel, along with another updatepanel which wraps a search field tied a dropbox denoting search type. (The UpdatePanelSearch is tied to an AutoCompleteExtender and the Find dropdown at left sets the type of contextkey to be used when autocompleting)
I'm attempting to let code-behind code in a subordinate page (usually the user clicking or manipulating an inventory item of some sort) update the cart count.
Things I've tried:
If UpdatePanelCart and UpdatePanelSearch are both set with updatemode=automatic, UpdatePanelSearch stops reacting to updates of the Find dropdown.
The same happens if I use a single updatepanel to wrap both areas.
If I set UpdatePanelCart's UpdateMode to conditional, then UpdatePanelSearch works properly--but I don't have an obvious way (to me at least) of forcing the refresh of the cart count (i.e., I can set it to a new value in code a code-behind, but it won't actually be redrawn until the page is fully redrawn).
What's the correct strategy here? I'll admit I don't fully understand why #1 and #2 don't work (I suspect the AutocompleteExtender is the reason but I'm really just guessing)
Code for the Search panel follows:
<asp:UpdatePanel ID="UpdatePanelSearch" runat="server">
<ContentTemplate>
<ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender2" runat="server"
CompletionInterval="150"
CompletionListCssClass="autocomplete_completionListElement"
ServiceMethod="GetCompletionList"
ServicePath="/atomic/Autocomplete.asmx"
TargetControlID="txtThingToFind"
UseContextKey="True"
CompletionSetCount="75">
</ajaxToolkit:AutoCompleteExtender>
<asp:Panel ID="Panel1" DefaultButton="cmdQuickFind" runat="server">
<div id="mainSearchArea">
<div id="searchLine">
<div id="signinArea">
<asp:Label ID="Label1" runat="server" CssClass="formfield-required"></asp:Label>
</div>
<asp:Panel ID="Panel2" DefaultButton="cmdQuickFind" runat="server">
<div id="searchArea">
<div class="row">
<div class="col-lg-8">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Find <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>
<asp:LinkButton ID="LinkButton1" runat="server">Comic Title</asp:LinkButton></li>
<li>
<asp:LinkButton ID="LinkButton2" runat="server">Publisher</asp:LinkButton></li>
<li class="divider"></li>
<li>
<asp:LinkButton ID="LinkButton3" runat="server">Artist</asp:LinkButton></li>
<li>
<asp:LinkButton ID="LinkButton4" runat="server">Writer</asp:LinkButton></li>
<li class="divider"></li>
<li>
<asp:LinkButton ID="LinkButton5" runat="server">Storyline</asp:LinkButton></li>
<li class="divider"></li>
<li>
<asp:LinkButton ID="LinkButton6" runat="server">1st Appearance</asp:LinkButton></li>
<li>
<asp:LinkButton ID="LinkButton7" runat="server">2nd Appearance</asp:LinkButton></li>
<li>
<asp:LinkButton ID="LinkButton8" runat="server">Origin</asp:LinkButton></li>
<li>
<asp:LinkButton ID="LinkButton9" runat="server">Death</asp:LinkButton></li>
<li>
<asp:LinkButton ID="LinkButton10" runat="server">Special Appearance</asp:LinkButton></li>
<li class="divider"></li>
<li>
<asp:LinkButton ID="LinkButton11" runat="server">Advanced Find...</asp:LinkButton></li>
</ul>
</div>
<!-- /btn-group -->
<asp:TextBox ID="TextBox1" runat="server"
CssClass="form-control" AutoCompleteType="None" autocomplete="off"
placeholder="Find comic title or issue...">
</asp:TextBox>
<asp:Button runat="server" ID="Button1" Text="Go" CssClass="btn btn-primary" />
</div>
<asp:Panel runat="server" ID="Panel3" CssClass="findScope" Visible="false">
<label>Search: </label>
<asp:RadioButton ID="RadioButton1" runat="server" GroupName="findScope" AutoPostBack="True" />
<asp:RadioButton ID="RadioButton2" runat="server" Text="All sellers" Checked="True" GroupName="findScope" AutoPostBack="True" />
</asp:Panel>
</div>
<!-- /input-group -->
</div>
<!-- /.col-lg-6 -->
</div>
</asp:Panel>
</div>
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>

It seems at least one of my problems was my fuzzy understanding of the trigger mechanism for UpdatePanels.
The reason for behavior #1 (the Cart not updating) was that I hadn't placed the UpdatePanelCart closely enough around the cart label. Automatically updating UpdatePanels only update as a result to changes in their immediate child controls unless explicit postbacktriggers are defined. Since the UpdatePanel was wrapping the whole menu line, the automatic update didn't happen.
Behavior #2 (nothing on the page of any consequence updating if I attempted to wrap the whole page in an updatepanel) was related-- none of the controls I wanted to see update were immediate child controls, so this was going to fail.
The solution for me was to draw the updatepanels more narrowly, and do some extra CSS work to work around the formatting issues these inevitably caused to the menu.

Related

closing the Jquery mobile panel on submit button

I have a jquery mobile panel like so:
<a href="#panel2" class="ss-header-actions-language">
<span class="ss-header-labels" id="ss-general-label">Language</span>
</a>
<div data-role = "panel" id = "panel2" data-display="overlay" data-position="right" data-swipe-close="false" >
<asp:RadioButton ID="rdbEng1" AutoPostBack="true" runat="server" Text="English" GroupName="lang" />
<asp:RadioButton ID="rdbspan1" AutoPostBack="true" runat="server" Text="Español" GroupName="lang" />
<asp:Button runat="server" Text="Submit" OnClick="Submit_Click" />
</div>
I want the panel to close when the submit button is clicked. Right now, panel closes when I select any radio button inside the panel. I want the panel to stay open if the Radio button is clicked, but as soon as I click on submit button, I want the panel to close.
How can I achieve that. Any help will be highly appreciated.
First you need to prevent postback to server, in order to do that set AutoPostBack="false" to RadioButton and you can change asp:Button to input.
Then according to JQuery Mobile Panel:
A panel can also be closed by calling the panel's close method
directly.
So this should work:
<a href="#panel2" class="ss-header-actions-language">
<span class="ss-header-labels" id="ss-general-label">Language</span>
</a>
<div data-role="panel" id="panel2" data-display="overlay" data-position="right" data-swipe-close="false">
<asp:RadioButton ID="rdbEng1" AutoPostBack="false" runat="server" Text="English" GroupName="lang" />
<asp:RadioButton ID="rdbspan1" AutoPostBack="false" runat="server" Text="Español" GroupName="lang" />
<input type="button" onclick="ClosePanel();" name="Submit" value="Submit" />
</div>
<script type="text/javascript">
function ClosePanel() {
$("#panel2").panel("close");
}
</script>

Required field validator is not working

I have used a required field validator, on click of add Button error message will be displayed but whatever code written on onclick event will be executed even if the field is empty.
<div class="form-group posrel">
<asp:Label ID="Label1" runat="server" AssociatedControlID="txtDept"><i class="fa fa-pencil"></i></asp:Label>
<asp:TextBox runat="server" ID="txtDept" placeholder="Department Name" ValidationGroup="ss1"></asp:TextBox>
<div class="text-right validators">
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ErrorMessage="Department Name" ControlToValidate="txtDept" ValidationGroup="ss1">
</asp:RequiredFieldValidator>
</div>
</div>
Below is the code snippet of add button -
<div class="form-group pull-right">
<asp:LinkButton runat="server" ID="lnkbtnaddept" CssClass="btn btn-primary" ValidationGroup="ss1" OnClick="lnkbtnaddept_Click">
<asp:Label runat="server" Text="Add" ID="lbladddept"></asp:Label>
<i style="margin-left: 10px;" class="fa fa-send"></i>
</asp:LinkButton>
</div>
May be this will help you out:
On link-button click event validate your page.
Page.Validate("validation group");
if(Page.isValid){
// your code logic
}
for more on page validate follow the link
https://msdn.microsoft.com/en-us/library/0ke7bxeh%28v=vs.110%29.aspx
Turn on JS support for the Validator control by adding attribute:
EnableClientScript="True"
It should prevent a post-back until text box is filled.
take your Id of RequiredFieldValidator and update on back end
or .cs page.
Ans RequiredCityName.Update();

Asp.net Checkbox values not being retained in popup

We have an asp:CheckBox within an asp:DataList that appears on a popup window. Problem - the checked property values of the asp:Checkbox are not being retained. (The checked property is always false.)
NOTE - On debugging, the Page_Load method is getting called.
<div style="display: none;">
<div id="inline1">
<div class="popupbox coupons">
<asp:DataList...>
<ItemTemplate>
<asp:CheckBox id="chk1" runat="server"/>
<asp:ImageButton id="btn1" runat="server"/>
</ItemTemplate>
</div>
</div>
</div>

HTML5 attribute "required" inside UpdatePanel, not working (asp.net 4)

In my .aspx file, I have an UpdatePanel with some textboxes and a button. If I add the "required" attribute to the textboxes, the postback stops working. I can see in Firebug that it's not posting at all. If I remove the "require" attribute, it's working as it should. Am I doing something wrong here, or is it a way to fix it?
The code for the UpdatePanel:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<%# GetComments (DataBinder.Eval(Container, "DataItem.id")) %>
<div class="contact_form">
<ul>
<li>
<h2>Skriv en kommentar til oss!</h2>
</li>
<li>
<asp:TextBox ID="txtName" runat="server" CssClass="txtBox" placeholder="Ditt navn" required />
<span class="form_hint">Ditt navn skal stå her</span>
</li>
<li>
<asp:TextBox ID="txtCaptcha" runat="server" CssClass="txtBox" required placeholder="Skriv resultatet av 10 pluss 6 her" />
<span class="form_hint">Du klarer vel å regne ut 10+6? :-)</span>
</li>
<li>
<asp:TextBox ID="txtComment" runat="server" TextMode="MultiLine" required placeholder="Din kommentar" />
</li>
<li>
<asp:Button ID="cmdSaveComment" CssClass="button" runat="server" CommandName="SaveComment" CommandArgument='<%# Eval("id")%>' Text="Puliser kommentar" />
</li>
</ul>
</div>
</ContentTemplate>
</asp:UpdatePanel>
I guess you don't get error. So, if required field specified, an input field must be filled out before submitting the form.
try giving some value in the textboxes.
EDIT
Though, I should have mentioned my previous answer as a comment. However, this seems to be a bug mentioned here.

ASP.Net: label control in panel not updating

I have an ASP panel with a modalpopupextender attached to it that is shown dynamically. Within the panel there are two labels that are dynamically populated with text when the panel popup is shown. however, when it is shown the labels are blank (missing). Below is my code for the HTML markup and code behind:
HTML MARKUP
<asp:Panel ID="pnlalert" runat="server" CssClass="modal">
<div class="rel">
<div class="modal-inner-wrapper-alert rounded-corners">
<div class="content rounded-corners">
<div class="body">
<div class="popuppanel">
<div class="popupGnrl-Alert">
<asp:Label ID="alerttitle" runat="server" Text=""></asp:Label><br />
<asp:Label ID="alertlabel" runat="server" Text=""></asp:Label>
<asp:HiddenField ID="section" runat="server" />
<asp:HiddenField ID="violation" runat="server" />
</div>
<div class="popupGnrl-Alert" style="text-align:center;">
<asp:Button ID="cmdMaxAlertOk" runat="server" Text="Yes" Width="50px"
onclick="cmdMaxAlertOk_Click" /> <asp:Button ID="cmdMaxAlertCancel"
runat="server" Text="No" Width="50px" onclick="cmdMaxAlertCancel_Click" />
</div>
</div>
</div>
</div>
</div>
</div>
</asp:Panel>
<asp:ModalPopupExtender ID="mpealert" runat="server" TargetControlID="popuplnk" PopupControlID="pnlalert" >
</asp:ModalPopupExtender>
ASP.NET Code Behind
this.mpealert.Show();
this.alerttitle.Text = "Submission time exceeded";
this.alertlabel.Text = "This expense was incurred greater than 3 months ago and is therefore outside of the normal claim period. Do you still wish to proceed? NOTE: expense may be rejected by Finance.";
What could be causing the labels not to show?
Are you setting the text of the labels in the button event which shows the modal popup extender?
If so, the "show" event is probably being handled client side and your server side text setting code is probably never being called.
Wrap your modalpopupextender in an UpdatePanel and set it's Update condition to Always.
The above answer did not work for me. If we keep the panel inside an update panel and call the update method on update panel, then the contents get updated.

Resources