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;
Related
I m new to .net, When i workout particular script in visual studio, I got the warning message like this:
Cannot unregister UpdatePanel with ID 'UpdatePanel1' since it was not registered with the ScriptManager. This might occur if the UpdatePanel was removed from the control tree and later added again, which is not supported.
Parameter name: updatePanel
.aspx file:
<asp:UpdatePanel ID="UpdatePanel5" runat="server"> <ContentTemplate>
<asp:Label runat="server" ID="lblInboxCount" CssClass="inboxCount"
Text="Inbox (0)"></asp:Label> </ContentTemplate> </asp:UpdatePanel>
this code for master page:
<asp:ScriptManager ID="ScriptManager2" runat="server">
</asp:ScriptManager>
May i know, what is ScriptManager and UpdatePanel? and what is the function in asp .net?.. I referred msdn and other some materials, but still i didn't get it.
can anyone help me to fix this?
Thanks,
The UpdatePanel is used to perform partial page refreshes. It will AJAX'ify controls contained within it, allowing partial rendering of the area.
When you use an UpdatePanel, you also need to include a ScriptManager. The ScriptManager manages the Ajax script libraries and script files. It also manages partial-page rendering, and client proxy class generation for Web and application services.
You have to add something like this in your ASP page:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
And something similar for UpdatePanel:
<asp:UpdatePanel id="UpdatePanel1" runat="server">
<contenttemplate>
</contenttemplate>
</asp:UpdatePanel>
UpdatePanel is used to prevent page refresh after a postback that occurs when you for example press a button. You just refresh that particular part of the page instead of the whole page.
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();
I have
<div id="ulAndil" runat="server">
</div>
and button
<asp:Button ID="btnAssignJudToCourse" runat="server" Text="تاكيد "
CssClass="button" CausesValidation="false"
OnClientClick="javascript:getShape();"
OnClick="btnAssignJudToCourse_Click" Visible="false" />
At runtime I create a lot of sortable html controls and then click confirm
I want to save inner html of this div before postback of button in session or anything
Using jQuery so when user click the button jQuery take inner html of div and stores it in cookie session any thing to store it after postback I can retrieve it
Please I want the exact code for this jQuery or javascript method and how to call on button
Why don't you put the generated HTML in a hidden field and postback.
Say getShape() is your javascript function
function getShape()
{
//your validations applied
document.getElementById('hdnHTML').value = document.getElementById('ulAndil').value;
return true;
}
where hdnHTML is the hidden element of HTML.
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.
I'm trying to grab a div's ID in the code behind (C#) and set some css on it. Can I grab it from the DOM or do I have to use some kind of control?
<div id="formSpinner">
<img src="images/spinner.gif" />
<p>Saving...</p>
</div>
Add the runat="server" attribute to it so you have:
<div id="formSpinner" runat="server">
<img src="images/spinner.gif">
<p>Saving...</p>
</div>
That way you can access the class attribute by using:
formSpinner.Attributes["class"] = "classOfYourChoice";
It's also worth mentioning that the asp:Panel control is virtually synonymous (at least as far as rendered markup is concerned) with div, so you could also do:
<asp:Panel id="formSpinner" runat="server">
<img src="images/spinner.gif">
<p>Saving...</p>
</asp:Panel>
Which then enables you to write:
formSpinner.CssClass = "classOfYourChoice";
This gives you more defined access to the property and there are others that may, or may not, be of use to you.
Make sure that your div is set to runat="server", then simply reference it in the code-behind and set the "class" attribute.
<div runat="server" id="formSpinner">
...content...
</div>
Code-behind
formSpinner.Attributes["class"] = "class-name";
This question makes me nervous. It indicates that maybe you don't understand how using server-side code will impact you're page's DOM state.
Whenever you run server-side code the entire page is rebuilt from scratch. This has several implications:
A form is submitted from the client to the web server. This is about the slowest action that a web browser can take, especially in ASP.Net where the form might be padded with extra fields (ie: ViewState). Doing it too often for trivial activities will make your app appear to be sluggish, even if everything else is nice and snappy.
It adds load to your server, in terms of bandwidth (up and down stream) and CPU/memory. Everything involved in rebuilding your page will have to happen again. If there are dynamic controls on the page, don't forget to create them.
Anything you've done to the DOM since the last request is lost, unless you remember to do it again for this request. Your page's DOM is reset.
If you can get away with it, you might want to push this down to javascript and avoid the postback. Perhaps use an XmlHttpRequest() call to trigger any server-side action you need.
Add the runat="server" attribute to the tag, then you can reference it from the codebehind.
Add runat to the element in the markup
<div id="formSpinner" runat="server">
<img src="images/spinner.gif">
<p>Saving...</p>
</div
Then you can get to the control's class attributes by using
formSpinner.Attributes("class")
It will only be a string, but you should be able to edit it.
How do you do this without runat="server"? For example, if you have a
<body runat="server" id="body1">
...and try to update it from within an Updatepanel it will never get updated.
However, if you keep it as an ordinary non-server HTML control you can. Here's the Jquery to update it:
$("#body1").addClass('modalBackground');
How do you do this in codebehind though?
If you do not want to make your control runat server in case you need the ID or simply don't want to add it to the viewstate,
<div id="formSpinner" class="<%= _css %>">
</div>
in the back-end:
protected string _css = "modalBackground";
If all you want to do is conditionally show or hide a <div>, then you could declare it as an <asp:panel > (renders to html as a div tag) and set it's .Visible property.
To expand on Peri's post & why we may not want to use viewstate the following code:
style="<%= _myCSS %>"
Protected _myCSS As String = "display: none"
Is the approach to look at if you're using AJAX, it allows for manipulating the display via asp.net back end code rather than jquery/jscript.