iFrame loading twice in asp AjaxToolkit TabContainer - c#

am using asp AjaxToolkit in my prjoect as below asp.net C# code.
<asp:UpdatePanel ID="UpdatePanelDemo" runat="server">
<ContentTemplate>
<ajax:TabContainer ID="tabMessage" runat="server" ActiveTabIndex="1" AutoPostBack="true"
OnActiveTabChanged="tabMessage_ActiveTabChanged" CssClass="ajax__tab_blueGrad-theme">
<ajax:TabPanel ID="TabMCompose" runat="server">
<HeaderTemplate>
<span style="padding-left: 5px; padding-right: 5px;">Compose </span>
</HeaderTemplate>
<ContentTemplate>
This Text not flickering or not loading twice // *****
<iframe id="IFrmCompose" runat="server" scrolling="no" frameborder="0" height="400px"
width="100%"></iframe>
</ContentTemplate>
</ajax:TabPanel>
<ajax:TabPanel ID="tabMInbox" runat="server">
<HeaderTemplate>
<span style="padding-left: 5px; padding-right: 5px;">Inbox (<span id="SpnIn" runat="server"></span>)</span>
</HeaderTemplate>
<ContentTemplate>
<iframe id="IFrmInbox" runat="server" scrolling="no" frameborder="0" height="400px"
width="100%"></iframe>
</ContentTemplate>
</ajax:TabPanel>
</ajax:TabContainer>
</ContentTemplate>
</asp:UpdatePanel>
Problem: When I use iFrame inside the ajax TabContainer and when the user moves from 1st Tab to 2nd Tab, it seems that the page load twice and iFrame load twice or it flickers but the text above the iFrame as shown above ('This Text not flickering or not loading twice') is not flickering.
It seems there is some problem with iFrame and Ajax TabContainer.
Please give me suggestion why this happens.
Thanks.

Not 100% sure because there is no codebehind attached, but it looks like a ViewState issue. Since you are not setting the IFrame SRC in the repeater template, the page init will first set the IFrame empty and then re-set the URL even if it not changed (causing it to flicker).
Suggestion: Persist the URL in ViewState or other when a tab is changed, and set it in the repeater template to the persisted value. Always set any empty frame SRC to "about:blank" to avoid unnecessary loading and to reliably detect changes.
Just a side note: in a way you are doing the same thing twice - with UpdatePanels/Ajax Controls you do not need IFrames, the contents of your tab should retrieved via an AJAX call thus making the IFrames obsolete.

Not 100% sure because there is no codebehind attached, but it looks like a ViewState issue.
Page reload maybe the reason of the behavior
if(!IsPostback)
BindIt();

Related

Ajax Modal Popup Extender Mark Up on Child Page

I've been researching for hours a demo of the AJAX Modal Popup Extender markup in a child page.
I'm trying to implement an ASP.NET LinkButton on the parent page in a Gridview column to fire the modal (the child page) and keep the UI markup separate.
Can someone please provide a code demo of this?
Put iframe inside panel and set src to your file:
<cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="PanelX" TargetControlID="YourButtonID"
CancelControlID="btnClose" BackgroundCssClass="Background">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" align="center" style = "display:none">
<iframe style=" width: 410px; height: 190px;" src="YourChildPage.aspx" runat="server"></iframe>
<br/>
<asp:Button ID="btnClose" runat="server" ClientIDMode="Static" style="display:none"/>
</asp:Panel>

Cannot get inner html of a div in asp.net on server

I have a div named canvas.
When I try to get its InnerHTML property on postback it shows it has empty html contents.
Why isn't this property populated?
aspx code
<form id="Form1" runat="server">
<asp:ScriptManager runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="upPanel" runat="server">
<ContentTemplate>
<div id="canvas" clientidmode="Static" runat="server" class="ui-droppable"
style="width: 1363px; height: 766px;">
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
C#
string finalHTML = canvas.InnerHTML;
to modify style of you div, you can use style attribute:
canvas.Attributes["style"]
You can only access the data submitted through proper form fields like <input>, <select> or <textarea>. These fields either have a runat="server" attribute so you can access them directly in your code behind, or you can give the fields a name attribute so you can fetch them through the Request.Form object...
Maybe you can change the field into a <textarea>, or migrate to using AJAX to post HTML data to your application.
The value won't be accessible unless the event triggering the postback is defined in the panel triggers - http://www.asp.net/web-forms/tutorials/aspnet-ajax/understanding-asp-net-ajax-updatepanel-triggers
When using update panels, only "parts" of the page are posted back to the server, decreasing HTTP traffic and providing AJAX functionality. If you don't specify a trigger for this UpdatePanel, the contents within the UpdatePanel are never sent back to the server.
try to use asp.net Hidden Field to get innerHTML of canvas.
Use jquery to get HTML of div and initialize it into hidden field.
$("#hiddenfieldID").val = $("#canvas").innerHTML;

page getting refresh after using update panel

I am using Ajax Rating Control inside my datalist. i used this rating control inside the update panel, so that when user give rate , page wouldn't get refreshed. but still page is getting Refreshed.
here is my complete code .
<div class="rating">
<asp:UpdatePanel ID="UpPanelRating" runat="server">
<ContentTemplate>
<asp:Rating ID="ratPro" runat="server" AutoPostBack="true" StarCssClass="Star" OnChanged="ratPro_Changed"
WaitingStarCssClass="WaitingStar" EmptyStarCssClass="Star" FilledStarCssClass="FilledStar">
</asp:Rating>
</ContentTemplate>
</asp:UpdatePanel>
</div>
what should i do now , so that page don't get refreshed, and user's given star store in database. i just want to stop the page refresh.
You should remove the AutoPostBack="true" attribute in the asp:Rating control. This triggers an automatic postback, or a refresh, as it is seen by the user.
Alternatively, maybe you should try ajaxToolkit:Rating instead of asp:Rating

UpdatePanel does not appear on default load, but it does when specific page is given

I got my hands on a this web application few days back and I am already stuck with a problem.
When I load the page with, say, HL1 = http://localhost:8001/, UpdatePanel does not appear at all.
Though when I load the page with HL2 = http://localhost:8001/Default.aspx, it displays in its full glory.
[EDIT: Added HL1, HL2 tags]
FYI, UpdatePanel is part of a Master page.
Any suggestions?
Thanks,
Abhinav
[EDIT: Code for update panel]
<asp:UpdatePanel ID="upan" runat="server" >
<ContentTemplate>
<fieldset style="width:320px; padding:2px;margin-top:20px;margin-bottom:5px;" onmouseover="showHelp('quickAccess')" onmouseout="g_Popup.hide()">
<legend>Quick Access</legend>
<span style="vertical-align: middle">Dummy #
<asp:TextBox ID="txtSearchDummy" clientidmode="Static" runat="server" MaxLength="9" Width="70px" Height="15px" style="margin-top: 5px"></asp:TextBox>
<asp:Button ID = "btnSearchDummy" clientidmode="Static" runat="server" OnClick="btnSearchDummy_Click" style="display:none"/>
<button onclick="return quickAccess()" lang="javascript" type="submit" class="button_enabled" style="margin-left: 5px;">
<img alt="" src="images/lightning.gif"></img><span>Find Dummy</span></button></span>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
Thanks for all the help guys. Issue is resolved now and, as expected, it had nothing to do with ASP.NET. In master page code behind file that search box was being made invisible.
:)

AJAX UpdatePanel help needed

I have the following ASPX code:
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel runat="server" ID="UpdatePanel" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button runat="server" ID="UpdateButton1" OnClick="NextImg_Click" Text="Update" />
<asp:Repeater runat="server" ID="urlsUpdateRepeater">
<ItemTemplate>
<!-- THIS WOULD BE A LOOP FROM HERE -->
<!-- OPENS RESULT ITEM DIV CONTAINER -->
<div id="result_item">
<a href="<%# Eval("myUrl") %>" target="_blank">
<%# Eval("urlPageTitle")%></a>
</ItemTemplate>
</asp:Repeater>
</ContentTemplate>
</asp:UpdatePanel>
I have a NextImg_Click() event which works fine.
I use this code for DataBind... what is the Update method?
urlsUpdateRepeater.DataSource = resultsCollection;
urlsUpdateRepeater.DataBind();
Everything would appear to be in order. But every time the Update button is clicked it re-renders the whole page instead of the partial-postback UpdatePanel only.
It is driving me completely mad as I can't see anything wrong with the code. Is there some simple thing I'm missing?! Please help!
The search and data is displayed correctly (inside the panel) it just will not do a partial postback.
Appreciate your help with my noob problems!
Because the button is inside your UpdatePanel's ContentTemplate, it is unnecessary to take any extra action to get a partial page postback.
Try removing the line from your Page_Load() method.
Taken from MSDN:
Use the RegisterAsyncPostBackControl
method to register controls outside an
UpdatePanel control as triggers for
asynchronous postbacks, and to
potentially update the content of an
update panel. To update an UpdatePanel
control programmatically, call the
Update method.
So, you're control (UpdateButton1) is inside the UpdatePanel, no need for the ScriptManager1.RegisterAsyncPostBackControl call - ditch it and your problem is solved.
The problem was that my <form> tag was nested further into the document than it's corresponding end tag (with Warning!)...
Upon moving my form tag - it worked!
Entirely my fault, thanks guys.

Categories