What is script manager and updatepanel - c#

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.

Related

UpdatePanel with AsyncPostback tryes to update control outside UpdatePanel

I need to have UpdatePanel with asyncpostback, but in my case it seems that no partial postback happens, but fullpostback. I am new to web forms, please, check the code:
<%# Register TagPrefix="Cust" TagName="CompanyInformationView" Src="~/CustomControls/CompanyInformationView.ascx" %>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
<asp:UpdatePanel runat="server" ID="UpdatePanel1" ChildrenAsTriggers="true" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" OnClick= "Button1_Click" Text="test" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<Cust:CompanyInformationView ID="CompanyInformationView" runat="server" />
</asp:Content>
So I have Test Button. OnClick it should do "nothing" for test. Also there is custom control on web form. Here is server side code for this form:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
// fill in custom control
CompanyInfo c = GetInfo();
CompanyInformationView.Company = c;
}
}
protected void Button1_Click(object sender, EventArgs e)
{
var i = 1;
}
CompanyInformationView is custom control with property "Company". There is no ViewState added for this property (so it cannot be loaded properly if postback is done). When I click on Test Button, the page fails, because "CompanyInformationView.Company" is not set (it is not set, because it cannot be loaded from ViewState, I guess).
Instead, I think that it should not work like this. AsynPostback should deal only with UpdatePanel.
Why it wants to reload custom control? Doesn't it mean that Full postback happen or maybe I do not understand Asyncpostback?
PageLoad and all other events are raised on every get\postback, no matter if it's async or full,
In asyncpostback, the response which the server renders includes only the content inside the updatepanel.
Try to Put <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
Before
<asp:UpdatePanel runat="server" ID="UpdatePanel1" ChildrenAsTriggers="true" UpdateMode="Conditional">
Async post back in web forms still proceeds the whole page life cycle as if it's a traditional post. the difference is only the updated content inside target update panel that will be sent in response. so in this case, async post back will still give you exception unless you populate the custom control no matter get/post.
you need to also put the custom control inside another update panel or in the same update panel as the button in order see partial update to happen.

how to refresh a portion of a page in intervals

I have a page that above it I want to have a panel that automatically refresh every 5 minutes, and if a user has a message in his inbox show to him. What is the best solution for this?
Should I usel AJAX, jQuery, or JavaScript? My preferred solution is server side solution.
Since you are working with ASP.Net, you can also achieve this behavior by using a combination of the following:
ScriptManager or ScriptManagerProxy (if you have nested pages):
Manages the ajax calls
UpdatePanel: Determines what gets updated. Controls nested within <ContentTemplate> are subject to partial
updates
Triggers: Controls when the content is updated.
For your purpose, a Timer control can be used as a trigger to ensure that partial postbacks are triggered every 5 seconds:
<asp:ScriptManager ID="scriptManagerMain" runat="server"/>
<asp:Timer ID="timer" Interval="5000" runat="server"/>
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:Panel ID="panelToBeUpdated" runat="server">
<asp:Label ID="lblContent" runat="server" ></asp:Label>
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="timer" />
</Triggers>
</asp:UpdatePanel>
I would use Jquery to send an AJax request to the server to fetch the updated content. Upon receiving the content I would use JQuery again to update the markup.
You can set this up to trigger every 5 min using setInterval in Javascript
Hard to give a specific example without code. But you basically need to load the new content with an ajax request that is triggered by a timer.
setInterval(function(){
$.ajax({
url: "someUrlThatServesUpdatedContent.aspx",
cache: false
}).done(function( html ) {
$("#results").html(html);
});
}, 300000);
The above is just a simple example to point you in the right direction.
Edit: Here is an example of how to do the ajax call without JQuery
https://stackoverflow.com/a/2792721/1059001
It's possible to do that with AJAX using method described by previous answers, but if you wish to have a server side solution I would recommend loading that part of the page in an iframe, with meta refresh:
<meta http-equiv="refresh" content="300">
This method however would make it difficult to communicate any events or user actions back to main page.

How can I prevent a page from going to the top every time a button with OnClick event is clicked?

How can I prevent a page from going back to the top every time a button is click? I still want to execute the code on the "OnClick" event for the button.
Example:
Almost all of our forms have a button on the bottom of the page which are suppose to bring some data back from the DB and populate some labes and textboxes located on the bottom of the page, when the button is click it takes user back to the top of the page. How can I prevent this from happening?
Any help will be really appreciate it.
Assuming the OnClick event is handled on the server and not in javascript, the easiest thing is wrap the controls to be updated in an UpdatePanel and have the update panel trigger on the button's click event.
Here is an example from Microsoft's documentation:
<asp:Button ID="Button1"
Text="Refresh Panel"
runat="server" />
<asp:ScriptManager ID="ScriptManager1"
runat="server" />
<asp:UpdatePanel ID="UpdatePanel1"
UpdateMode="Conditional"
runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" />
</Triggers>
<ContentTemplate>
<fieldset>
<legend>UpdatePanel content</legend>
<%=DateTime.Now.ToString() %>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
There are two options:
Use ASP.NET Ajax, in particular the UpdatePanel control
Set MaintainScrollPositionOnPostback to true on page level or in web.config
in your page declaration you can add MaintainScrollPositionOnPostback="true" ie:
<%# Page Language="C#" ... MaintainScrollPositionOnPostback="true" %>
you can also put that in your web.config under system.web or declare it from codebehind Page.MaintainScrollPositionOnPostback=true;
In the function handler for the button make sure you return false. You might be actually posting the page with those buttons rather than just doing something on the click event.

Is it possible to re-execute javascript in an UpdatePanel?

I have the following:
<asp:UpdatePanel ID="upd" runat="server">
<ContentTemplate>
<script> alert("execute again"); </script>
<asp:LinkButton ID="go" runat="server" Text="Exec JS" />
</ContentTemplate>
</asp:UpdatePanel>
The first time the page renders the script is executed. If I click the button to cause a postback it doesn't execute again.
Is there a way to make it execute the scripts again?
Yo! There's an easy way to get the JavaScript to run again. Put the javascript on the HeadContent portion of your page:
<script>
function BindIt()
{
alert("execute again");
}
</script>
then on your page inside the update panel add portion with a call up to the function that you created for your javascript:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<script type="text/javascript">
Sys.Application.add_load(BindIt);
</script>
...
In a project that I was working on, I wanted all of the javascript on the page to run again, so I just put it all into a massive BindIt style function. It took me a while to figure it out and I tried many methods to get this to work but this was the only way I was ever able to get jquery to work with updatepanels
Since ASP is just pushing the raw data, not actually executing it you'll need to probably use the RegisterStartupScript method of the ScriptManager to programmatically inject the script to load after a partial postback.
EDIT
More directly, try looking in to ScriptManager.RegisterStartupScript() for UpdatePanels. e.g.
If the JavaScript is jQuery related, following link would definitely help:
http://weblogs.asp.net/hajan/archive/2010/10/07/make-them-to-love-each-other-asp-net-ajax-updatepanels-amp-javascript-jquery-functions.aspx
I have personally used the 2nd method mentioned in this article, and it worked for me properly.

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