I'm creating a webpage that refreshes every 5 seconds to show how much order is left. The problem is after it's refreshed, my contents starts to duplicate.
Here, the brief of my problems :
I'm showing :
Order Offline : 1 / Order Online : 0.
After Refresh, it will be :
Order Offline : 11 / Order Online : 00.
I refresh the page with with asp:UpdatePanel Triggers and asp:Timer event
I've tried googling for the answer and mostly I found answers by setting the ViewState to Disabled and also I've tried to change UpdateMode to Conditional
Here is my code's snippets :
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" ID="ScriptManager1" />
<asp:Timer ID="Timer1" runat="server" Interval="5000"></asp:Timer>
<div class="row">
<div class="col-sm-2">
<asp:ImageButton ImageUrl="image.png" Width="170" ID="ClsBtn" runat="server" />
</div>
<div class="col-sm-4" style="text-align: right;">
<span id="date" style="font-size:10px; font-weight: 900;"></span>
<span id="time" style="font-size:10px; font-weight: 900;"></span>
</div>
<div class="col-sm-4" style="text-align: right;">
<asp:UpdatePanel ID="upTQ" runat="server">
<Triggers><asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" /></Triggers>
<ContentTemplate>
<span style="font-size: 15px; font-weight: 900;">OFFLINE : <asp:PlaceHolder runat="server" ID="phTotalQueue" /> / ONLINE : <asp:PlaceHolder runat="server" ID="phTotalQueueM" /></span>
</ContentTemplate>
</asp:UpdatePanel>
</div>
and this is my code behind :
phTotalQueue.Controls.Add(New LiteralControl("" & dtTO.Rows(0).Item("TotalOrderOffline") & ""))
phTotalQueueM.Controls.Add(New LiteralControl("" & dtTO2.Rows(0).Item("TotalOrderOnline") & ""))
I expect the output to be Order Offline : 1 / Order Online : 0. with no duplicate contents.
Let's first understand what happens: Your page is generated on the server, sent out to the browser, where it is displayed and then, each time it is being refreshed the server is requested and at that time, a LiteralControl is added to phTotalQueue and phTotalQueueM, respectively. Each time this runs, the controls already existent in phTotalQueue and phTotalQueueM, respectively will remain there, displaying the older values, but a new such control is being generated, displaying the new value besides the older values. I would like to kindly advise you to make sure you have an identifiable LiteralControl in your UpdatePanels, having an ID:
<asp:UpdatePanel ID="upTQ" runat="server">
<Triggers><asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" /></Triggers>
<ContentTemplate>
<span style="font-size: 15px; font-weight: 900;">OFFLINE : <asp:PlaceHolder runat="server" ID="phTotalQueue"><asp:Literal ID="phTotalQueueText" runat="server"></asp:Literal>
</asp:PlaceHolder> / ONLINE : <asp:PlaceHolder runat="server" ID="phTotalQueueM"><asp:Literal ID="phTotalQueueMText" runat="server"></asp:Literal></asp:PlaceHolder></span>
</ContentTemplate>
</asp:UpdatePanel>
Now, since you have identifiable LiteralControl instances, let's change the code-behind:
phTotalQueueText.Text = "" & dtTO.Rows(0).Item("TotalOrderOffline") & ""
and
phTotalQueueMText.Text = "" & dtTO2.Rows(0).Item("TotalOrderOnline") & ""
Alternatively you can remove the old controls from your UpdatePanels, or find them and modify their Text attribute, but those are hacky ways and I recommend the usage of identifiable tags.
Related
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.
I use masterpage in asp.net web form, I use span to display message to users
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
<div class="col-md-10 col-sm-10">
<span id="spnMessage" class="btnText" runat="server"></span>
</div>
</asp:Content>
and code is:
spnMessage.InnerText = "Add record successfully ";
but in runtime id of span change to "ContentPlaceHolder2_spnMessage" and my code does not work. What should I do?
Change the span into a Literal. Then there will be no more issues with ID conflicts.
<asp:Literal ID="spnMessage" runat="server"></asp:Literal>
Then accessing the Literal from code behind will always work.
spnMessage.Text = "Add record successfully ";
Or if you need to use the <span> element for CSS purposes, you can still wrap the Literal with it.
<span><asp:Literal ID="spnMessage" runat="server"></asp:Literal></span>
You could also use a aspnet Label.
A label will generate it's own <div> tag in HTML.
<asp:Label ID="spnMessage" runat="server" Text="Add record successfully"></asp:Label>
Will become
<div>Add record successfully</div>
I have a program that reads book info from a database and creates a shopping cart program. It runs fine locally but whenever I test it on my site, I get an Error 500 - Internal Server Error. I've found out that if I comment out the asp:button in the code below, the program works but the button is necessary. The Button3_Click function exists in the code behind. Any ideas?
<div id="book3" class="books" style="width: 170px; height: 351px; float:left;">
<asp:Image ID="Image3" runat="server" Height="196px" Width="169px" ImageUrl="url/ofMiceandMen.jpg" />
<br />
<div style="height: 135px">
<asp:Label ID="title" runat="server" Text="Of Mice and Men"></asp:Label>
<asp:Label ID="author" runat="server" Text="John Steinbeck"></asp:Label>
<asp:Label ID="review" runat="server" Text="4.5/5 Stars"></asp:Label>
<asp:Label ID="price" runat="server" Text="$7.00"></asp:Label>
<asp:Button ID="Button3" runat="server" OnClick="Button3_Click" Text="View Book" />
//This Button
</div>
</div>
This is what the server tells me when I specify for detailed debug info.
Detailed Error Information:
Module: ManagedPipelineHandler
Notification: MapRequestHandler
Handler: PageHandlerFactory-Integrated-4.0
Error Code 0x00000000
I encountered the same error and I researched but found a lot of answers that did not fix it. Here are my solution steps
If the page is a html page, add a form tag with an id and runat inside the <body> tags
<form id="form1" runat="server">
<div>
<!--Add your button -->
</div>
</form>
and possibly add a <div></div> inside the <form> tags
I am completely new to Ajax and have had no training. I'm just copying a co-worker's code. We have a page with two Ajax controls: one my co-worker wrote and one I wrote. Everything is working fine except for one item, and my co-worker's up to his eyeballs in another project, so I need to figure this out. The problem is that the Ajax control I wrote pops up a ListBox with two buttons: Close and Select. The Select button has an OnClick event and causes a postback, as is expected. However, the Close button does not have an OnClick event and still causes a postback. This is not the case with a very similar Ajax control that my co-worker wrote that sits on the same page. The code is below. My co-worker's code involves the Email Template; mine involves the Email(s) Lookup. For the life of me, I don't see any difference. Can anyone tell me why my Close button causes a PostBack and my co-worker's doesn't?
<!--my co-worker's control-->
<tr>
<td width="20%"><br /><div class="formtext">Email Template:</div></td>
<td colspan="3"><br />
<asp:Button ID="btn_ShowTemplate" runat="server"
Text="View/Edit Template" />
<ajax:ModalPopupExtender ID="mpTemplate" runat="server" PopupControlID="panelTemplate" TargetControlID="btn_ShowTemplate"
CancelControlID="BtnTemplateClose" BackgroundCssClass="modalBackground">
</ajax:ModalPopupExtender>
<asp:Panel ID="panelTemplate" runat="server" CssClass="modalPopupTemplate" align="center">
<div class="formtext_modal">Litigation Hold Email Template <img src="images/v2/modal_email.png" alt="Email" /><br /></div>
<cc1:Editor ID="TemplateEditor" runat="server" Width="675px" Height="400px" />
<br />
<asp:Button ID="BtnTemplateClose" runat="server" Text="Close" CssClass="btnMatterClose" />
<asp:Button ID="btnTemplateSave" runat="server" Text="Save" CssClass="btnMatterSelect" OnClick="btnTemplateSave_Click" />
</asp:Panel></td>
</tr>
<!--my control-->
<tr>
<!-- email cc section -->
<td>Email CC:<br /></td>
<td colspan="3"><asp:Button ID="btnEmails" runat="server" Text="Lookup Email" /> <asp:TextBox
ID="tbEmails" runat="server" Width="80%" ReadOnly="true"></asp:TextBox><br />
<ajax:ModalPopupExtender ID="mpEmails" runat="server" PopupControlID="panelEmails" TargetControlID="btnEmails"
CancelControlID="btnClose" BackgroundCssClass="modalBackground">
</ajax:ModalPopupExtender>
<asp:Panel ID="panelEmails" runat="server" CssClass="modalPopupAttorneys" align="center">
<table align="center" width="100%">
<tr>
<td>
<div class="formtext_modal">Email(s) Lookup <img src="images/v2/modal_search.png" alt="Search" /></div><br />
<asp:Label ID="Label3" runat="server" Width="600px" CssClass="formtext"
Text="Add Employees to Email CC line"></asp:Label>
<div style="BORDER: thin solid; OVERFLOW: auto; WIDTH: 600px; HEIGHT: 140px">
<asp:CheckBoxList ID="cblEmails" runat="server" Width="600px" Height="140px" SelectionMode="Multiple">
</asp:CheckBoxList>
</div>
</td>
</tr>
Server side buttons always cause a post back. One way to get around it is to add a client click function that returns false.
OnClientClick="return false;"
Edit
Your co-worker has defined the CancelControlID="BtnTemplateClose" on the ModalPopupExtender. That is what is repressing the post back. You also have the CancelControlID defined, but I can't find the close button (btnClose) anywhere in the code you have posted. Where are the close buttons in your control? If you make sure your close button has the ID btnClose, it would most likely work like your co-worker's close button.
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.