Showing posts with label panels. Show all posts
Showing posts with label panels. Show all posts

Wednesday, March 28, 2012

Multiple Update Panels - Postback on Panel A cancels Postback on Panel B

Hi,

I have a page with multiple Update Panels. Each panel has a button as a trigger.

When the first button is clicked it causes the first panel to update (as you'd expect), however if while this panel is being updated, the second button is clicked to update the second panel, the first request is cancelled, and the first panel is never updated.

Is this the expected behavior? Are there any work arounds?

Many Thanks,
Ady

Yes, unfortunately it is by design. Only the last UpdatePanel requets will be considered and prior reuests discarded.

Hmm, thats a shame.

I wonder if there is a way to intercept the request, and effectively queue it until the first request completes.

Time to start playing.


This tutorial might help you get started:http://ajax.asp.net/docs/tutorials/ExclusiveAsyncPostback.aspx.

multiple update panels

hi every one..

i am using multiple update panels (more than 10) on a web page in my Ajax enabled asp.net website.

I would like to know whether it is feasible to use so many Update panels in a single form (one for each control which will go to server), or there is a possibility that i will face some problem due to it.

Any alternatives are also welcome.

thanx,

viraj

hello.

using several updatepanels might be a good approach if the zones wrapped by the panels should be refresed independently. in this case, setting the updatemode to conditional will result in reducing the size of the response returned from the server side. I'm not sure if there's any recommendation in the number of itens UpdatePanels that should be used in a page.


thanx...

Multiple update panels

I had a query regarding multiple update panels.
I have a user control which contains one update panel.This user control contains a hidden textbox .
I am updating the updatepanel on basis of a timer control in javascripts which raises a postback.

I have placed two instances of this user control in another page say for eg. CIndexPage.aspx.
Now the Script manager is also placed in the same page ie CIndexPage.aspx.

Will the two updatepanels wrk independently.

Is the hidden variable shared between the instances of the update panel ?
Becoz the issue here is that even if i pass a value for the hidden textbox contained
in the first Update Panel, still the value gets stored for the hidden
variable in the second instance of the updatePanel.

Can we use Update Panels in a User Control and place multiple instances of the UserControls in a page.

Please if someone cld help me with this.

Thanks in advance.

Regards,
Shweta

hello.

well, the updatepanels will work independently. if you want to get independent refershes, you need to make sure that you've set the update mode of the pannel to conditional.

regarding the hidden field, it depends on how you've injected in the page...


Hi,

My Code is somewhat like this

User Control contains

_____________________________________________________________

<asp:UpdatePanel id=UpdatePanel1 runat=server>
<div id=DivCtrl runat=server >
<asp:HiddenField runat="server" ID="RequestID" Value="0" />
</UpdatePanel>


____________________________________________________________________
There is adiv control which contains multiple hyperlinks.That is done thru .cs file of the Master Control and is dynamically generated.
The hidden filed in placed inside the UpdatePanel and the RequestID is updated on the hyperlink click.

And 2 instances of this user control are placed in the Parent Page.
Also what happens is even though i am clicking on the first User Controls hyperlink (first updatepanel) still the Value is assigned to the second User Controls Hidden Field.

It always updates the last user control.

Why does work in this manner . Also to update the UpdatePanel i am using the timer control and _dopostback method.

Is there an issue with the timer control.Shld that be placed in the ParentPage.

regards,

Shweta


hello.

can you please build a small demo app with a simple user control + page and put it here?


yes sure
------------
User Control Code is as follows for .aspx is as follows
-------------
<script language =javascript>
var l_objtimer="";
l_objtimer =window.setInterval('UPdatePanel',1000);
function UPdatePanel()
{
var obj=get$('<%=RequestID.ClientID%>');
_dopostback("obj",'');
}

function CallDetails(nSerialNo)
{
var obj=get$('<%=RequestID.ClientID%>');
obj.value=nSerialNo;
_dopostback("obj",'');
}
</script>
<body>
<asp:UpdatePanel id=UpdatePanel1 runat=server>
<div id=DivCtrl runat=server >
<asp:HiddenField runat="server" ID="RequestID" Value="0" />
</UpdatePanel>
</body>

------------
end
-------------

------------
User Control Code is as follows for cs is as follows
-------------

In this i dynamically adding a hyperlink whose onclick events call CallDetails(nSerialNo) (in .aspx of user control).
And pass different value to the nSerialNo parameter on the click event.In the event i change the value of RequestID to the the nSerialNo.

------------
end
-------------

------------
Parent Page Code is as follows for .aspx is as follows
-------------
<%@. Register TagPrefix="csc" Namespace="CustomServerControls" %>
<body>
<asp:ScripManager runat=server id=ScriptMgr1 >
</asp:ScripManager >
<csc:CustomServerControls id=CustomServer1 runat=server >
</csc:CustomServerControls>

<csc:CustomServerControls id=CustomServer2 runat=server >
</csc:CustomServerControls>

</body>

------------
end
-------------

This way 2 instances of this user control are placed in the Parent Page.
Also what happens is even though i am clicking on the first User Controls hyperlink (first updatepanel) still the Value is assigned to the second User Controls Hidden Field.

Also if i am placing the usercontrol in a page and call the page thru <script tag by specifying the source it gives me a Syntax error.

Can i call the page in this way.


hello

well, now it's clear!. what you shoud do is change the js code. you should have something like this:

<script language =javascript>
var l_objtimer="";
l_objtimer =window.setInterval('UPdatePanel',1000);
function UPdatePanel(idCtl)
{
var obj=get$(idCtl);
_dopostback("obj",'');
}

function CallDetails(idCtl, nSerialNo)
{
var obj=get$(idCtl);
obj.value=nSerialNo;
_dopostback("obj",'');
}
</script>

where idCtl is the ID of the control (hidden field) you want to use. yep, you'll have to change your code so that it also passes the id of the field when you call the method.

in your code, what's happening is that when you're adding the second user control, it'll add the js methods again, overriding the previous definitions. this means that clicking on the 1st or 2nd user control will always call the latest definition, which points to the id of the last user control you've added to the page. if you perform the changes I've said, this won't happen any more.

Multiple Update Panels

Evening all,

As part of a larger development, I had an idea to develop a quiz using two update panels on one page. My idea was that the first update panel would have two dropdown lists binded to a database. Dropdown list 1 would hold the question. When the user selected an entry from the list, the 2nd dropdown list would populate with the answer. I added a delay using theSelectedIndexChanged event as follows:

Protected

Sub DropDownList1_SelectedIndexChanged(ByVal senderAsObject,ByVal eAs System.EventArgs)

System.Threading.Thread.Sleep(10000)

EndSub

I also added an updateProgress control to displayTime is running out.

Now the 2nd update panel had a simple text field and a button. The idea was that the user would try to beat the controls in updatePanel1 displaying the result. The user would enter their answer and click submit. This would then be compared to the actual write answer and a score would be recorded. I guess you have enough here to get my drift.

Now the big problem with this is that whilst updatePanel1 is updating, any event in updatePanel2 throws an error along the lines of: "Invalid Postback or callback argument".

From what I can gather from the complete error message, some sort of validation has been actioned and these simultaneous callbacks/postbacks can't happen. Is this just the way it is or is their a way around this. The error message makes reference to setting a pages element in the config file with the attribute "enableEventValidation=True". Now this stops me getting the error message in my page, but the lists in updatePanel1 don't display the right data.

Any tips on this or idea's on how to achieve my original concept would be hugely appreciated. I have included the relevant code below.

Kind regards

Mike

<

asp:ScriptManagerID="ScriptManager1"runat="server"EnablePartialRendering=true/><div><asp:UpdatePanelID="UpdatePanel1"runat="server"RenderMode="Inline"UpdateMode="Conditional"><ContentTemplate><asp:DropDownListID="DropDownList1"runat="server"DataSourceID="AccessDataSource1"DataTextField="question"DataValueField="qID"AutoPostBack=TrueOnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"></asp:DropDownList><asp:DropDownListID="DropDownList2"runat="server"DataSourceID="AccessDataSource2"DataTextField="answer"DataValueField="answer"OnSelectedIndexChanged="DropDownList2_SelectedIndexChanged"AutoPostBack="True"></asp:DropDownList><asp:AccessDataSourceID="AccessDataSource2"runat="server"DataFile="~/App_Data/quiz.mdb"SelectCommand="SELECT * FROM [answer] WHERE ([qID] = ?)"><SelectParameters><asp:ControlParameterControlID="DropDownList1"Name="qID"PropertyName="SelectedValue"Type="Int32"/></SelectParameters></asp:AccessDataSource><asp:AccessDataSourceID="AccessDataSource1"runat="server"DataFile="~/App_Data/quiz.mdb"SelectCommand="SELECT * FROM [questions]"></asp:AccessDataSource><asp:UpdateProgressID="UpdateProgress1"runat="server"DisplayAfter="0"><ProgressTemplate>

Hurry up.......

</ProgressTemplate></asp:UpdateProgress></ContentTemplate>

</asp:UpdatePanel><br/><hr/><asp:UpdatePanelID="UpdatePanel2"runat="server"RenderMode="Inline"ChildrenAsTriggers=falseUpdateMode="Conditional">

<ContentTemplate>

<asp:ButtonID="Button1"runat="server"Text="Button"OnClick="Button1_Click"OnDataBinding="Button1_DataBinding">

</asp:button>

<asp:TextBoxID="TextBox1"runat="server"></asp:TextBox></ContentTemplate></asp:UpdatePanel>

I seem to have solved the initial error message problem by nesting the updatePanels as opposed to having 2 independent panels. I'll continue with this and see how I get on.

Any tips from anybody else would be hugely appreciated.

Kin Regards

Mike

Multiple update panels: content disappears when modalpopup is used

Hello there,

I'm experiencing a rather annoying issue at the moment. I'm working on a webapplication, which contains quite a big page. This page contains multiple updatepanels, which in their turn contain dropdownlists/checkboxes. The page also uses a TextboxWatermarkExtender on one textbox control, and a ModalPopup which is shown conditionally by calling .Show() from the codebehind.

The ModalPopupExtender and TextboxWatermarkExtender are not on an updatepanel or anything.

Everything seems to work as it should, but I'm having a rather annoying cosmetic issue: at the moment the modalpopup is shown on my page, all the content of the updatepanels dissapears: none of the dropdownlistboxes are visible anymore!

Something weird also happens when I do any action in any of the updatepanels: when I do this, the TextboxWatermarkExtender seems to "refresh" its text (you see the text "flash").

I'm thinking these issues might be connected somehow... Has anyone got any idea on how to solve this issue, or has anyone else ran into this?

I took a few screnshots to illustrate the problem.

This is how the page looks without the modal popup:

This is with the modal popul:

As you can see, all the dropdownboxes have disappeared. Also, I noticed not only the dropdownboxes in updatepanels diasppear, but those that aren't also disappear.

Any ideas/suggestions? Tnx!


No-one? :( I've been looking all over the internet for this, but I can't seem to find anyone having the same issue. I do find issues with dropdownboxes floating "on top of" a layer when using Internet Explorer, but that's not the problem I have here... Also, I noticed this behaviour doesn't appear in Firefox: everything looks ok when using that browser...

My DDL(s) also disapeer with modal popup!!

And I had another problem with them when the modal popup causes a postback.

So I solved that by wrapping my DDL in another update panel... (with updatemode="always", dunno if that was necessary...)

But it seems to be working now...


And another update: I installed IE7 recently, and in that browser, the problem seems to be solved: the dropdownboxes don't disappear anymore.

So, this really seems to be an IE6-browser issue. I tried putting the ddl's in updatepanels (some of them already were), but that didn't help...

Browser-specific issues... gotta hate 'em ;-)

Multiple update panels with triggers

I'm having a hard time figuring out how to accomplish the following. Any help would be GREATLY appreciated:

I have a section with radiobuttonlists and checkboxes. I wrapped them in an updatepanel and they work great.

The problem is that the radiobuttonlists and checkboxes also have customvalidators on them, which unfortunately doesn't work correctly. My validatorsummary is at the bottom of the page and is not included in the updatepanel. What do I need to do to get all this to work properly?

Thanks!

In what way is it not working properly?


If they aren't in an UpdatePanel, they can't update as result of a partial postback. One thing you can do is put them in another UpdatePanel with async postback triggers for the checkboxes and radiobuttons.

hi

Do have try to use ValidatorCallout control of ajax control toolkit i think it may help you


DisturbedBuddha:

In what way is it not working properly?

On the custom validator, I set text="*" and errorMessage="Danger Will Robinson"... I see the * next to the control that is in the updatePanel, but the error message does not display in the validatorsummary, which is outside of the updatePanel


qt1329a is slightly mistaken. The validation summary should appear even if not placed in an update panel. Validation always occurs on the server, but unless you've specifically disabled client-side validation, it will validate in the browser first and cancel the post to the server if there is a problem. For an in-depth explanation of how that works, read "Client-Side Validation" athttp://quickstarts.asp.net/QuickStartv20/aspnet/doc/validation/default.aspx. So basically, a postback is not usually required for a validator to fire.

Some versions of the validators (as well as other controls) are not compatible with the UpdatePanel. You can try this fix: http://blogs.msdn.com/mattgi/archive/2007/01/23/asp-net-ajax-validators.aspx

But in the meantime, you could post your source code and I can see if it's just a simple correction.

Multiple Update Panels Question

I'm not sure if this is an ATLAS issue or the way I'm setting this up. What I'm trying to do is have two gridviews updated when one button is clicked. When the user clicks the button the results are returned, but only when all queries to the database are complete. What I want to happen is to update the gridview to display data whenever either query completes so the user can see some data while the oter still loads. Any ideas on how to achieve this?

You need to split up your panels and make sure you're updatemode is set to Conditional. By default Always is used which updates all panels at once. You'll also need to figure out an effective way to trigger the functionality so that you essentially generate two separate callbacks to the server. Maybe click the button and fire the first update, then set a timer and fire another button to start the other update separately.

There's no real clean way to do this with UpdatePanel since it lacks a client side model at the moment. What I do for this is use 'phantom' buttons on a page that are invisible (style.display='none') but are hooked up as triggers for the UpdatePanel. It's a hack for sure, but it's easy enough to do.

Rumor has it that the next update of ATLAS is going to provide better client control of the update panel, but we have to wait for the next refresh to see what that actually looks like.

+++ Rick --


Thanks. I figured that was the only way to do it.

Multiple Update Panels Problem

hello!

I have 4 update panels on my page, 2 of which I used to load slow loading data displayed in gridviews. I wanted to display the layout of the page before it loads the data (showing a small loading graphic in the updated divs) so the user does not think the page is stuck. To do this, I used two timer controls with interval 1 so that once the page is loaded, the timers will tick and the data will be fetched and bound to the gridviews. I am facing a few problems:

1. One gridview's data is slower than the other, and instead of the faster one displaying first then the slower one, it waits until the slower one fetches its data and then they are both displayed at the same time.

2. I have another gridview that uses a timer (interval 6000) and the timer_tick sub for it scrolls through the gridview pages. But the timer does not start ticking until the other two gridviews load.

3. The 4th update panel has a next and previous button displaying news articles. The buttons do not cause anything until the two slow panels load (just like the gridview in point 2 above).


Is there another way I can trigger the two slow gridviews to load AFTER the page loads and displays something for the user? And why do the other update panels wait for these two slow panels to finish before letting the user update them?

Your speedy support is greatly appreciated!

Make sure that you set UpdateMode="Conditional" on all the update panels to be able to update them individually. Otherwise they will all update their contents on postback.

Call UpdatePanel.Update() on the ones that should be updated.


Try delay loading your update panel like the following:
http://mattberseth.com/blog/2007/07/delay_load_an_updatepanel.html


Wow thanks for the replies! I'll try this stuff out and let you know!


OK I tried Matt Berseth's delay load approach. For some reason, the __doPostBack method does not force the button click method to be invoked. As a result, the two gridviews do not load.

<script type="text/javascript" language=javascript>
var _isInitialLoad = true;

function pageLoad(sender, args){
if(_isInitialLoad){
_isInitialLoad = false;
// simulate a button click by forcing the postback
// causing the updatepanel to update
__doPostBack("<%= me.btnHidden.ClientID %>","");
}
}
</script>

<asp:button id="btnHidden" runat="server" style="display:none;" OnClick="btnHidden_Click" />

<asp:UpdatePanel id="UpdatePanel4" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnHidden" Eventname="Click"></asp:AsyncPostBackTrigger>
</Triggers>

// the content of this panel is a gridview.. the btnHidden_Click sub binds the data to the gridview..

Any ideas?


Just an update.. I changed the dopostback call from

__doPostBack("<%= me.btnHidden.ClientID %>","")

to

__doPostBack("<%= me.btnHidden.UniqueID %>","")

that worked but the updateprogress control did not appear (the screen looked like it finished loading and then suddenly the gridviews got displayed).

I really appreciate your assistance!


Hi,

I've created a user control that I'm trying to use to delay content loading on a page for long running controls.check out this:Delaying Content Load using Timer and UpdatePanel

Best Regards


Hey man thanks for the update but the link refers to this site: http://www.null.com/t/1127147.aspx

which displays nothing! ;-) can you plz update with the proper link so i can test?

thx for ur help!


Thanks for the control Jin-Yu,

Here's the url
http://forums.asp.net/t/1127147.aspx

Multiple Update Panels not exactly asynchronous

Hi,

I'm having trouble getting a page with 2 update panels to update themselves asynchronously. It appears, the update inside of one update panel is canceled as soon as the other update panel begins an update.

I want to be able to click a button inside of an update panel. Then, while that panel is updating, click on another button inside of another update panel without canceling the first update.

Not sure if this makes sense or if it's possible, but below is some code demonstrating the issue. When you try to click both buttons, the update of the first button is cancelled.

1<%@dotnet.itags.org. Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>23<%@dotnet.itags.org. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>4<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">5<html xmlns="http://www.w3.org/1999/xhtml">6<head runat="server">7 <title>Untitled Page</title>8</head>9<body>10 <form id="form1" runat="server">11 <asp:ScriptManager ID="ScriptManager1" runat="server" />12 <div>13 <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">14 <ContentTemplate>15 <asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="UpdatePanel1">16 <ProgressTemplate>17 Updating UpdatePanel1...18 </ProgressTemplate>19 </asp:UpdateProgress>20 <asp:Label ID="lblUpdate1" runat="server"></asp:Label>21 <asp:Button ID="btnUpdate1" runat="server" OnClick="Button1_Click" Text="Update 1" />22 </ContentTemplate>23 <Triggers>24 <asp:AsyncPostBackTrigger ControlID="btnUpdate1" EventName="Click" />25 </Triggers>26 </asp:UpdatePanel>27 </div>28 <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">29 <ContentTemplate>30 <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel2">31 <ProgressTemplate>32 Updating UpdatePanel2...33 </ProgressTemplate>34 </asp:UpdateProgress>35 <asp:Label ID="lblUpdate2" runat="server"></asp:Label>36 <asp:Button ID="btnUpdate2" runat="server" OnClick="btnUpdate2_Click" Text="Update 2" />37 </ContentTemplate>38 <Triggers>39 <asp:AsyncPostBackTrigger ControlID="btnUpdate2" EventName="Click" />40 </Triggers>41 </asp:UpdatePanel>42 </form>43</body>44</html>45

1using System;2using System.Data;3using System.Configuration;4using System.Web;5using System.Web.Security;6using System.Web.UI;7using System.Web.UI.WebControls;8using System.Web.UI.WebControls.WebParts;9using System.Web.UI.HtmlControls;10using System.Threading;1112public partialclass _Default : System.Web.UI.Page13{14protected void Page_Load(object sender, EventArgs e)15 {1617 }1819protected void Button1_Click(object sender, EventArgs e)20 {21 Thread.Sleep(5000);22 lblUpdate1.Text = DateTime.Now.ToString();23 }24protected void btnUpdate2_Click(object sender, EventArgs e)25 {26 Thread.Sleep(5000);27 lblUpdate2.Text = DateTime.Now.ToString();28 }29}

Take a look at this post:http://forums.asp.net/t/1117212.aspx and this one:http://forums.asp.net/t/1108522.aspx

Basically, you can only have 1 asynchronous request at a time with UpdatePanels.

-Damien


See the link it will solve your problem

http://forums.asp.net/t/1108522.aspx


Awesome. That works great for buttons.

Any idea how to do the same thing for other events? Like a GridView Sorting or SelectedIndexChanged event?


Checkout this posthttp://geekswithblogs.net/rashid/archive/2007/08/08/Asp.net-Ajax-UpdatePanel-Simultaneous-Update--A-Remedy.aspx


KaziManzurRashid:

Checkout this posthttp://geekswithblogs.net/rashid/archive/2007/08/08/Asp.net-Ajax-UpdatePanel-Simultaneous-Update--A-Remedy.aspx

Thanks Kazi. That works, but for some reason it does not work if I use a MasterPage. I've tried putting the scriptmanager in the masterpage and in the webform using that master page and it doesn't work either way. Any ideas why?

EDIT: BTW, It appears the _doPostBack() method of the prm instance is not working for elements inside of a masterpage. Not sure what I'm doing wrong.


I was able to fix my MasterPage problem by making the changes suggested by the 2 comments in the blog.

I also made the following change to the endRequest() function in order to support GridView postbacks:

1function endRequest(sender, args)2 {3 //Check if we have a pending call4 if (_callQueue.length > 0)5 {6 //Get the first item from the call queue and setting it7 //as current executing item8 _executingElement = Array.dequeue(_callQueue);9 var _element = _executingElement[0];10 var _eventArg = _executingElement[1];1112 //Now Post the from which will also fire the initializeRequest13 if(_element.name != null)14 _prm._doPostBack(_element.name, _eventArg);15 else16 _prm._doPostBack(_element.id.replace(/_/g,"$"), _eventArg);17 }18 }

So basically if the executingElement does not have a name set, I create it by replacing the '_' characters in the id with '$' characters (not sure if this is ok, but it's working).

My final problem: The UpdateProgress control is not displaying for the queued requests. Any idea how to make this work??

Thanks,

Fred

multiple update panels each with a timer

I have a very simple page. It has 1 script manager and 2 update panels. Each update panel has a label and a timer. the timers are set 1 second and each simply updates the label with the current time. The first timer works and displays the time. The second never fires. Any one have any ideas? Here is the page...

<%

@dotnet.itags.org.PageLanguage="C#"AutoEventWireup="true"CodeBehind="Default.aspx.cs"Inherits="WebApplication1._Default" %>

<%

@dotnet.itags.org.RegisterAssembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"Namespace="System.Web.UI"TagPrefix="asp" %>

<!

DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<

htmlxmlns="http://www.w3.org/1999/xhtml">

<

headrunat="server"><title>Untitled Page</title>

</

head>

<

body><formid="form1"runat="server"><div><asp:ScriptManagerID="ScriptManager1"runat="server"></asp:ScriptManager>

</div> <asp:UpdatePanelID="UpdatePanelFirst"runat="server"><ContentTemplate><asp:TimerID="TimerFirst"runat="server"Interval="1000"OnTick="TimerFirst_Tick"></asp:Timer><asp:LabelID="LabelFirst"runat="server"></asp:Label></ContentTemplate></asp:UpdatePanel><asp:UpdatePanelID="UpdatePanel1"runat="server"><ContentTemplate><asp:TimerID="Timer1"runat="server"Interval="1000"OnTick="Timer1_Tick"></asp:Timer><asp:LabelID="Label1"runat="server"Text="Label"></asp:Label></ContentTemplate></asp:UpdatePanel></form>

</

body>

</

html>

and the code behind.

using

System;

using

System.Data;

using

System.Configuration;

using

System.Collections;

using

System.Web;

using

System.Web.Security;

using

System.Web.UI;

using

System.Web.UI.WebControls;

using

System.Web.UI.WebControls.WebParts;

using

System.Web.UI.HtmlControls;

namespace

WebApplication1

{

publicpartialclass_Default : System.Web.UI.Page

{

protectedvoid Page_Load(object sender,EventArgs e)

{

}

protected

void Timer1_Tick(object sender,EventArgs e)

{

Label1.Text =

DateTime.Now.ToShortTimeString();

}

protectedvoid TimerFirst_Tick(object sender,EventArgs e)

{

LabelFirst.Text =

DateTime.Now.ToLongTimeString();

}

}

}

I am not sure about your requirement. If you are trying to update both the labels at the same time one timer will do.

But if you want both the Timer ticks to work modify your code as follows:

protected

void Timer1_Tick(object sender,EventArgs e)

{

Timer1.Enabled =

false;

Timer2.Enabled =

true;

Label1.Text = System.

DateTime.Now.ToLongTimeString();

}

protectedvoid Timer2_Tick(object sender,EventArgs e)

{

Timer2.Enabled =

false;

Timer1.Enabled =

true ;

Label2.Text = System.

DateTime.Now.ToLongTimeString();

}

Multiple Update Panels & Control Events

Thankfully i've been able to re-create this issue but i'm still not entirely sure why it happens as it does. I've created a page with two update panels, inside of each is a label and a button. Each label is set to the current date when the labels PreRender event fires. The first time this loads, each event fires at pretty much the same time. As expected if i press either of the buttons, both label PreRender events fire and update the corresponding label. However If i set the update mode to conditional on the updatepanel, both labels PreRender events fire but only the one which shares the update panel with the pressed button has the UI updated. In this trivial example thats not too much of a problem, however when I'm loading in a dataset in one of the panels, i dont want the data being re-loaded in each time a different update panel posts back. Thanks in advance, Matt Here's my trivial example HTML and C# c#
protected void Page_Load(object sender, EventArgs e) { }protected void Label1_PreRender(object sender, EventArgs e) { Label1.Text = DateTime.Now.ToString(); }protected void Label2_PreRender(object sender, EventArgs e) { Label2.Text = DateTime.Now.ToString(); }protected void Button2_Click(object sender, EventArgs e) { }protected void Button1_Click(object sender, EventArgs e) { }
<asp:ScriptManager ID="ScriptManager1" runat="server" /> <div> <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:Label ID="Label2" runat="server" OnPreRender="Label2_PreRender" Text="Label"></asp:Label> <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Submit 2" /> </ContentTemplate> </asp:UpdatePanel> </div> <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:Label ID="Label1" runat="server" OnPreRender="Label1_PreRender" Text="Label"></asp:Label> <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Submit One" /> </ContentTemplate> </asp:UpdatePanel>

This is by design. When you have multiple UpdatePanels and each set to Conditional, UI updates only occur in that particular UpdatePanel. You can get more info about UpdatePanels in the docs:http://www.asp.net/AJAX/Documentation/Live/tutorials/UpdatePanelTutorials.aspx

For updating a label like you are, I would utilize PageMethods vs. and UpdatePanel anyway. You can mix the two technologies if you need to. Seehttp://encosia.com/2007/07/11/why-aspnet-ajax-updatepanels-are-dangerous for an excellent example and more information.

-Damien

Multiple UpdatePanelAnimationExtender always fires

Hi,

I've seen a few posts about this, so if there is a solution can someone please point me in the right direction.

I have multiple update panels each with a UpdatePanelAnimationExtender associated with it. I want all my update panels mode to be conditional(i don't want to set it to always).

When 1 update panel updates the OnUpdating fires on all update panels!!

Could someone please point me to the solution or a possible workaround.

Many thanks,

Simon

Add the source code of the design page


Code is taken from the example from Matt Berseth blog...

http://mattberseth.com/blog/2007/05/ajaxnet_example_using_an_updat.html

I know it is an issue with the way that AJAX works, just hoping someone has a nice solution/workaround.

Thanks,

Simon


ok nevermind...

i have been able to work around by not specifying any<FadeOut> for my OnUpdating event, and have manually written the javascript in the <scriptaction>. The way i can can check which control caused the postback to see if the update progress should fire.

Simon

Multiple UpdatePanels require their controls to enable ViewState?

I've got 2 update panels on the same page. up1 contains a link button and up2 contains a repeater. I don't need or want the repeater in up2 to be added to Viewstate. However, when up1's link button is clicked, the async call works fine but on return it clears out up2's content. If I set the repeater in up2 to enable viewstate, it then works. If upatepanels are supposed to implement partial page updates, why does up1 wipe out up2's content if up2's content is not in viewstate?

A wild stab in the dark : Is up2.UpdateMode set to "Condtional" ?? if not, then it has a default mode "Always", and gets refreshed on each async postback. If you do not redraw the repeater at that time, or get it from viewstate, then well - you get zilch :)


Ah, yes, that's it. I would have thought the default updatemode would be "Conditional" rather than "Always". Having all the updatepanels update seems counterintuitive to the idea of a partial page update. Anyway, thanks.

Multiple updatepanels and updateprogress

Hi,

I have created two updatepanels with a button and a label in each panel. Both panels are associated to a updateprogress. When I click the button I simle add datetime.now to the label. I also use thread.sleep for some seconds. This is a basic asp.net ajax example. But my question is: when I click the first button and thereafter click the second button when the first one is at sleep. In this case the second updateprogress starts working and I get the date in the second label. How can I manage to implement two asynchronous calls at the same time? i.e. I want to press both buttons and get two dates in each label.

You can't execute two partial postbacks simultaneously.

In InitializeRequest, you can use PageRequestManager.get_isInAsyncPostBack() to test for an already running partial postback and respond accordingly.


Ok, thank you. My question is answered!

Multiple UpdatePanels, Multiple Page_Loads

I have two UpdatePanels which fire when a Click event executes on my page. I get two Page_Load events firing because the two update panels are triggered.

Is there a way to run the Page_Load only once but have both panels update?

Thanks :)

Hello,

Do you want to update both the update panels?

You can set UpdateMode="Conditional" for the update panel and can add a AsyncPostBackTrigger for the update panel

<asp:AsyncPostBackTrigger ControlID="btn" EventName="Click" />

Thanks,

Deepesh Verma


I have my update panels set up like you mentioned however I still get the double page_load.

Update panel 1 and Update panel 2 have the following trigger defined:

<asp:asyncpostbacktrigger controlid="btnSearch" eventname="Click" />

If I remove the trigger from the second Update panel then I will get only one page_load, however since I need to update the second update panel I tried to do it through code like this:

up2.Update();

However this also causes the Page_Load to fire again. Any other ideas?


Hello,

This seems that you have two different update panel and for both you have sameasyncpostbacktrigger.

If this is the case then you can have only one update panel to do that.

Thanks,

Deepesh Verma


SuperGhost:

However this also causes the Page_Load to fire again. Any other ideas?

Are you sure that Page_Load is fired twice?

I've made a simple example and Page_Load is fired only once, it shouldn't depend on how many up are updating...

(

Also works when you set the same trigger

<Triggers>
<asp:AsyncPostBackTrigger ControlID="btn" EventName="click" />
</Triggers>

for each up, and won't call this.up2.update( ) in the server side click event

)

aspx:

<%@. Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AJAXCTPEnabledWebApplication1._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="up1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="btn" runat="server" Text="test" />
<%= "Load count" + this.LoadCount.ToString( )%>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="up2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<%= "Load count" + this.LoadCount.ToString( )%>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>

Code-behind:
 
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

namespace AJAXCTPEnabledWebApplication1
{
public partialclass _Default : System.Web.UI.Page
{
private int m_LoadCount = 0;

/// <summary>
/// Gets or sets LoadCount (this property is stored/retrived using the viewstate).
/// </summary>
public int LoadCount
{
get
{
return (int )(this.ViewState["m_LoadCount" ] ?? m_LoadCount );
}
set
{
this.ViewState["m_LoadCount" ] = m_LoadCount =value;
}
}

protected override void OnInit( EventArgs e )
{
base.OnInit( e );

this.btn.Click +=new EventHandler( btn_Click );
}

private void btn_Click(object sender, EventArgs e )
{
this.up2.Update( );
}

protected void Page_Load(object sender, EventArgs e )
{
this.LoadCount++;
}
}
}

 

Monday, March 26, 2012

Multiview, modalPopup, updatepanel, popupcontrolextender

Hello,

I have a multiview that contains six views. Two of the views have update panels on them. I had it working with a popupcontrolextender (for a calender) and using updatepanel to move between the views without postback.

However, I added modalPopup to one of my views and now it doesn't switch between the views anymore. If I take the modalPopup out, it works again.

Has anyone run into this before? If so, how did you get around it?

Check the JavaScript debugger window for script errors, maybe?

Mutiple update panel - How to bind trigger event for control which is inside of other upda

Hi,

Thanks for visitng my problem.

I have 3 update panels. in first update panel U1 I have text box T1 and drop dwonbox D1.In second update panel U2 i have only drop down box D2. and in third update panel U3 i have a treeview T1.

I want that When I change selection of D1 in U1, it triiger events for D2 in U2 and T1 in U3. But when I try to bid U2 with D1 change event it does not show show D1 namein triiger control names. Rather it shows U1 panel name. Sam case is for T1 in U3. So my qiestion is : "HOW TO BIND TRIGGER WITH CONTROL WHICH IS INSIDE OF OTHER UPDATE PANEL?"

Looking for your Help.

Thanks,

John

Hi John,

I think the easiest solution would be to place one UpdatePanel around all three controls. If this doesn't work for you, perhaps you could post asmall code sample showing what you already tried.

Thanks,
Ted

Saturday, March 24, 2012

Need a little help with the Tab Panels

I'm having a problem with Tab Panels jumping around that I need a little help with. I have 4 Tab Panels in which each Tab Panel contains a DataGrid Control with paging and 1 Tab Panel with a FormView Control also with paging enabled. Here is what happens, when I first enter the web page if I'm on say Tab Panel 2 which contains a DataGrid with paging enabled and then click Tab Panel 1 which also contains a DataGrid with paging enabled and click 2 to go to the next page of data in the DataGrid it jumps back over to Tab Panel 2 which is the first Tab I started out on when the page displayed.

I'm not sure why or how to correct this issue of the DataGrid/FormView paging causing the Tab Panels to jump instead of staying on that Tab Panel as I page through the data until I actually click on a different Tab Panel.

ASP.NET AJAX Control Toolkit - Tab Control - Postback on tab switch


Thanks, that works fine.


Hi Lspence,

I want to design a Tab control with 5 tabs based on userId.. and each tab will be populated with a datagrid... based on the UserId clicked.. so do i need to have different Datagrids for each tab.. or can i just have one datagrid in the first tab and then call the same Datagrid based on the UserId given..

any help will be appreciated on this,,

Regards

Karen


I maybe wrong, but I think you can use a single DataGrid and just change your DataSource to a different one on each Tab. I have not tried doing something as you are doing, so someone else might be able to chime in on this approach.

Lspence,

in your post u have mentioned

"I have 4 Tab Panels in which each Tab Panel contains a DataGrid Control with paging and 1 Tab Panel with a FormView Control also with paging enabled. Here is what happens, when I first enter the web page if I'm on say Tab Panel 2 which contains a DataGrid with paging enabled and then click Tab Panel 1 which also contains a DataGrid with paging enabled and click 2 to go to the next page of data in the DataGrid it jumps back over to Tab Panel 2 which is the first Tab I started out on when the page displayed."

did u use a seperate datagrid for your panels...and how did u handle it... pls give me ideas.

Regards

Karen


Sorry, yes you are correct in my previous post. I have a different DataGrid for each Tab Panel except for the last one which uses a FormView. I basically followed information provided by the previous poster. I used the following javascript.

<script type="text/javascript" language="javascript">
function ActiveTabChanged(sender, e)
{
// Use the client side active tab changed event to trigger a callback thereby triggering the server side event.
__doPostBack('<%= TabContainer1.ClientID %>', sender.get_activeTab().get_headerText());
}
</script>
I then put my entire TabContainer inside of an UpdatePanel and added the following to the TabContainer tag. 
<cc1:TabContainer ID="TabContainer1" runat="server" TabIndex="0" ActiveTabIndex="3" OnClientActiveTabChanged="ActiveTabChanged" >
I finally added the following in the Page_Load method. 
ScriptManager.RegisterAsyncPostBackControl(TabContainer1);
That's all. 


Thanks for your answer... can u please give some code of your..tab panel.. cause i am creating a datagrid inside the panel in the .aspx page and then i am hooking the datasource and everything else at the code behind.. so just wanted to check if whatever i am doing is right or not...

Is it also possible to have get header text automatically populated based on the userId's for the particular client..

any help will be appreciated.

Regards

Karen


No problem this example sets the DataGrid's DataSource in Design Mode.

<%@. Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" EnableEventValidation="true" %
<%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" /
<script type="text/javascript" language="javascript">
function ActiveTabChanged(sender, e)
{
__doPostBack('<%= SampleTabContainer.ClientID %>', sender.get_activeTab().get_headerText());
}
</script
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<cc1:TabContainer ID="SampleTabContainer" runat="server" ActiveTabIndex="1" TabIndex="0" OnClientActiveTabChanged="ActiveTabChanged">
<cc1:TabPanel ID="Panel1" runat="server" HeaderText="Panel1" >
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" AllowPaging="True">
<Columns>
<asp:BoundField DataField="FirstName" HeaderText="First Name" InsertVisible="False" ReadOnly="True" SortExpression="FirstName" />
<asp:BoundField DataField="LastName" HeaderText="Last Name" SortExpression="LastName" />
<asp:BoundField DataField="Address" HeaderText="Address" SortExpression="Address" />
<asp:BoundField DataField="City" HeaderText="City" SortExpression="City" />
<asp:BoundField DataField="State" HeaderText="State" SortExpression="State" />
<asp:BoundField DataField="ZipCode" HeaderText="Zip Code" SortExpression="ZipCode" />
</Columns>
<PagerSettings Mode="NextPrevious" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="Data Source=.;Initial Catalog=TestDB;Integrated Security=True" ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM [Customer]">
</asp:SqlDataSource>

</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="Panel2" runat="server" HeaderText="Panel2">
<ContentTemplate>
Different content. Could be another DataGrid.
</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="SampleTabContainer" EventName="ActiveTabChanged" />
</Triggers>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
protected void Page_Load(object sender, EventArgs e)
{
ScriptManager1.RegisterAsyncPostBackControl(SampleTabContainer);
}
 

Spence,

Thanks for the code.. I am dynamically adding the Tab Panels using my code behind...

i have a datagrid in a user control which has pagin and sorting enabled and the data loads fine.. I am calling this UserControl in a tab panel using Ajax.. But when I Try to sort and page in my tab Panel...i get an error saying

specified argument was out of the range of valid values. Parameter name: Value

Hope u can help me solve it.. I am dynamically generating the Tabpanel and passing the valid values to load the user control.. but when i try to page and sort i get a popup with the above error..

Any help will be appreicated.

Regards

Karen

Wednesday, March 21, 2012

need help with a modal extender control

I am working on a project that has two modal extenders on one page, and two panels. Which have their own separate buttons which can trigger each panel to open. On the same form there is a gridview control, the user will select a row then in the code behind i trigger the click event for one of the button, so that it will oepn one of the panel it seemed to work fine before just using modalextender...1.show() when it stop working i added the code to raisethe click event for the control. After doing so it doesn;t open the panel instead, i have to click the button that that is setup as theTargetControlID two or three time just for the pop up menu to open. What is the right way to go about doing this. I wander if anyone else has had the same problem.

((IPostBackEventHandler)lnkPanel2).RaisePostBackEvent(null);

this.ModalPopupExtender2.Show();

Hi Lew26,

My suggestion is use Javascript to show the ModalPopupExtender directly. For example:

use $find("ModalPopupExtender's BehaviorID ").show(); to show the Panel and use $find("ModalPopupExtender's BehaviorID ").hide(); to hide the showing Panel. The Buttons which will lead the ModalPopupExtender to shown or to hidden should be put inside a hidden div. Take an example: <div style="display:none">your Buttons</div>. Here is my sample:

<%@. Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<script runat="server"
protected void Page_Load(object sender, EventArgs e)
{
//Attach a Javascript funtion to the LinkButton.
LinkButton myLinkButton;
for (int i = 0; i < GridView1.Rows.Count; i++)
{
myLinkButton = (LinkButton)GridView1.Rows[i].Cells[4].FindControl("LinkButton1");
myLinkButton.Attributes.Add("onclick", "shopModalPopup('" + GridView1.Rows[i].Cells[0].Text + "');return false;");
}
}
</script
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<style>
.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}

.modalPopup {
background-color:#FFD9D5;
border-width:3px;
border-style:solid;
border-color:Gray;
padding:3px;
width:250px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="EmployeeID"
DataSourceID="SqlDataSource1">
<Columns>
<asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID" InsertVisible="False"
ReadOnly="True" SortExpression="EmployeeID" ItemStyle-Width="0" />
<asp:BoundField DataField="LastName" HeaderText="LastName" SortExpression="LastName" />
<asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" />
<asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" />
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server">Click On Me</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NORTHWNDConnectionString%>"
SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], [Title] FROM [Employees]">
</asp:SqlDataSource>
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Height="200px" Width="300px" style="display:none">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
EmployeeID:<asp:TextBox ID="tbEmployeeID" runat="server"></asp:TextBox> <br/>
Reason:<asp:TextBox ID="tbReason" runat="server"></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="btnCancel" runat="server" Text="Cancel" />
</asp:Panel>
<div style="display: none">
<asp:Button ID="Button1" runat="server" Text="Button" /></div>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Button1"
PopupControlID="Panel1" CancelControlID="btnCancel" BackgroundCssClass="modalBackground">
</ajaxToolkit:ModalPopupExtender>
<script type="text/javascript" language="javascript">
function shopModalPopup(employeeID){
//show the ModalPopupExtender
$get("<%=tbEmployeeID.ClientID%>").value = employeeID;
$get("<%=tbReason.ClientID%>").value ="";
$find("<%=ModalPopupExtender1.ClientID%>").show();
}
</script>
</form>
</body>
</html>

I hope this help.

Best regards,

Jonathan