Ajax asynchronous postback

Hi all,

I have created a web page with ajax support. In that i have two buttons and three textbox.

All the three textboxes having required field validator attached to them. Now while i am trying to do asynchronous postback it is not possible for me because the required field validator prompts me to enter values. Is there any way to get rid of this...

I would like to do asynchronous postback even though ther are validators on the page

Do u set the same value to propertie ValidationGroup for validators and the button that cause the validation?

 This will not cause validation :

 <asp:button ID="someButton"CausesValidation="false" runat="server" />

Hi SathishRaja,

My understanding of your issue is that you want to get rid of the validation when click the button which will normally fire the validators. If I have misunderstood, please feel free to let me know.

As far as I know, there are three methods to achieve this list below:

Solution 1

Thanks Solution 2 is Working fine for me.

Ajax animation using 2 buttons

Hi! I have 2 buttons i am using. When I press the first button I get the animation with content1, then when i press the second button i get the animation with content 2 which show up on top the first animation which is fine. But If I click on button2 first I get the animation, and when I click on button1 the animation doesn't show up on top of the one displayed already. Thanks for the help. I am also planning on adding a third button, but I don't know how it's gonna work.

Here is the complete code:

<asp:ContentID="Content1"ContentPlaceHolderID="BodyContent"Runat="Server">

<asp:ScriptManagerID="ScriptManager1"runat="server"/>

<divclass="demoarea">

<br/><br/>

<!-- Button used to launch the animation -->

<asp:ButtonID="btnInfo"runat="server"Text="Version 2.0"BackColor="Maroon"BorderStyle="None"BorderWidth="0px"Font-Underline="True"ForeColor="White"OnClientClick="return false;"OnClick="btnInfo_Click"/>

<asp:ButtonID="btnInfo11"runat="server"Text="Version 1.1"BackColor="Brown"BorderStyle="Dotted"BorderWidth="0px"Font-Underline="True"ForeColor="White"OnClientClick="return false;"/>

<!-- "Wire frame" div used to transition from the button to the info panel -->

<divid="flyout"class="wireFrame"></div>

<!-- Info panel to be displayed as a flyout when the button is clicked -->

<divid="info"style="display: none; width: 700px; z-index: 2; opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); font-size: 12px; border: solid 1px #CCCCCC; background-color: #FFFFFF; padding: 5px;">

<divid="btnCloseParent"style="float: right; opacity: 100; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);">

<asp:LinkButtonid="btnClose"runat="server"

OnClientClick="return false;"

Text="X"ToolTip="Close"

Style="background-color: #666666; color: #FFFFFF; text-align: center; font-weight: bold; text-decoration: none; border: outset thin #FFFFFF; padding: 5px;"/>

</div>

this is text for animation 1

</div>

<!-- div for version 1.1-->

<divid="info11"style="display: none; width: 700px; z-index: 2; opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); font-size: 12px; border: solid 1px #CCCCCC; background-color: #FFFFFF; padding: 5px;">

<divid="btnCloseParent11"style="float: right; opacity: 100; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);">

<asp:LinkButtonid="btnClose11"runat="server"

OnClientClick="return false;"

Text="X"ToolTip="Close"

Style="background-color: #666666; color: #FFFFFF; text-align: center; font-weight: bold; text-decoration: none; border: outset thin #FFFFFF; padding: 5px;"/>

</div>

this is text for animation 2

</div>

<scripttype="text/javascript"language="javascript">

// Move an element directly on top of another element (and optionally

// make it the same size)

function Cover(bottom, top, ignoreSize) {

var location = Sys.UI.DomElement.getLocation(bottom);

top.style.position ='absolute';

top.style.top = location.y +'px';

top.style.left = location.x +'px';if (!ignoreSize)

{

top.style.height = bottom.offsetHeight +'px';

top.style.width = bottom.offsetWidth +'px';

}

}

</script>

<ajaxToolkit:AnimationExtenderid="OpenAnimation"runat="server"TargetControlID="btnInfo">

<Animations>

<OnClick>

<Sequence>

<%-- Disable the button so it can't be clicked again --%>

<EnableActionEnabled="false"/>

<%-- Position the wire frame and show it --%>

<ScriptActionScript="Cover($get('btnInfo'), $get('flyout'));"/>

<StyleActionAnimationTarget="flyout"Attribute="display"Value="block"/>

<%-- Move the wire frame from the button's bounds to the info panel's bounds --%>

<ParallelAnimationTarget="flyout"Duration=".3"Fps="25">

<MoveHorizontal="150"Vertical="-50"/>

<ResizeWidth="700"Height="280"/>

<ColorPropertyKey="backgroundColor"StartValue="#AAAAAA"EndValue="#FFFFFF"/>

</Parallel>

<%-- Move the panel on top of the wire frame, fade it in, and hide the frame --%>

<ScriptActionScript="Cover($get('flyout'), $get('info'), true);"/>

<StyleActionAnimationTarget="info"Attribute="display"Value="block"/>

<FadeInAnimationTarget="info"Duration=".2"/>

<StyleActionAnimationTarget="flyout"Attribute="display"Value="none"/>

</Sequence>

</OnClick>

</Animations>

</ajaxToolkit:AnimationExtender>

<ajaxToolkit:AnimationExtenderid="CloseAnimation"runat="server"TargetControlID="btnClose">

<Animations>

<OnClick>

<SequenceAnimationTarget="info">

<%-- Shrink the panel out of view --%>

<StyleActionAttribute="overflow"Value="hidden"/>

<ParallelDuration=".3"Fps="15">

<ScaleScaleFactor="0.05"Center="true"ScaleFont="true"FontUnit="px"/>

<FadeOut/>

</Parallel>

<%-- Reset the target --%>

<StyleActionAttribute="display"Value="none"/>

<StyleActionAttribute="width"Value="700px"/>

<StyleActionAttribute="height"Value="200px"/>

<StyleActionAttribute="fontSize"Value="12px"/>

<%-- Enable the button --%>

<EnableActionAnimationTarget="btnInfo"Enabled="true"/>

</Sequence>

</OnClick>

</Animations>

</ajaxToolkit:AnimationExtender>

<!-- Animation for Version 1.1 -->

<ajaxToolkit:AnimationExtenderid="AnimationExtender1"runat="server"TargetControlID="btnInfo11">

<Animations>

<OnClick>

<Sequence>

<%-- Disable the button so it can't be clicked again --%>

<EnableActionEnabled="false"/>

<%-- Position the wire frame and show it --%>

<ScriptActionScript="Cover($get('btnInfo11'), $get('flyout'));"/>

<StyleActionAnimationTarget="flyout"Attribute="display"Value="block"/>

<%-- Move the wire frame from the button's bounds to the info panel's bounds --%>

<ParallelAnimationTarget="flyout"Duration=".3"Fps="25">

<MoveHorizontal="150"Vertical="-50"/>

<ResizeWidth="260"Height="280"/>

<ColorPropertyKey="backgroundColor"StartValue="#AAAAAA"EndValue="#FFFFFF"/>

</Parallel>

<%-- Move the panel on top of the wire frame, fade it in, and hide the frame --%>

<ScriptActionScript="Cover($get('flyout'), $get('info11'), true);"/>

<StyleActionAnimationTarget="info11"Attribute="display"Value="block"/>

<FadeInAnimationTarget="info11"Duration=".2"/>

<StyleActionAnimationTarget="flyout"Attribute="display"Value="none"/>

</Sequence>

</OnClick>

</Animations>

</ajaxToolkit:AnimationExtender>

<ajaxToolkit:AnimationExtenderid="AnimationExtender2"runat="server"TargetControlID="btnClose11">

<Animations>

<OnClick>

<SequenceAnimationTarget="info11">

<%-- Shrink the panel out of view --%>

<StyleActionAttribute="overflow"Value="hidden"/>

<ParallelDuration=".3"Fps="15">

<ScaleScaleFactor="0.05"Center="true"ScaleFont="true"FontUnit="px"/>

<FadeOut/>

</Parallel>

<%-- Reset the target --%>

<StyleActionAttribute="display"Value="none"/>

<StyleActionAttribute="width"Value="700px"/>

<StyleActionAttribute="height"Value="200"/>

<StyleActionAttribute="fontSize"Value="12px"/>

<%-- Enable the button --%>

<EnableActionAnimationTarget="btnInfo11"Enabled="true"/>

</Sequence>

</OnClick>

</Animations>

</ajaxToolkit:AnimationExtender>

</div>

</asp:Content>

I ended up diplaying the animation on top of the buttons.

Ajax and Viewstate variables

Hello Everyone,

I wanted to keep a counter for the page, which will increment or decrement based on button clicks.

These buttons are kept in UpdatePanel so not page refresh happens.

I decided to use viewstate variable as counter, I am initializing that variable to 0 for the first call.

but I found that for every click I have to initialize the viewstate variable as it is not maintained across Ajax request calls,.

Is there any workaround for this?

Thanks in advance,

Nitin Pawar

Following works just fine for me...

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" /> <asp:UpdatePanel ID="UpdatePAnel1" runat="server"> <ContentTemplate> <asp:Label ID="lblClickCount" runat="server" Text="0" /> <asp:Button ID="Button1" Text="Add counter" runat="server" OnClick="Button1_Click" /> </ContentTemplate> </asp:UpdatePanel>

Protected Sub Button1_Click(ByVal senderAs Object,ByVal eAs System.EventArgs)Dim cntAs Integer = 0If Not ViewState("ClickCount")Is Nothing Then cnt =CInt(ViewState("ClickCount"))End If cnt += 1 lblClickCount.Text = cnt.ToString() ViewState("ClickCount") = cntEnd Sub

Ajax and buttons

well, im new to AJAX, but there's something i don't understand. If I put a button and a label inside an updatepanel, create a global int i=1, and onclick I do

i++;

label1.Text= i.ToString();

when I click, this action is only accruing once. afterwards when i click it's still stuck on 2. What am I doing wrong?

ty.

Hi, probably your label1 control isn't in update panel's content template. If you have a button into a UpdatePanel, when you perform click it will update only the content inside UpdatePanel.

HI

1) Are u add the label in the Update Panel.

2) Try with declare the variable as static int.due to the declaration also the problem occurs..

There is no concept of a "global" variable on an aspx page. It will reinitialize on each postback. You could either save the value to the ViewState or to a Session object.

You could always just look at the value of the label, increment that, and save it back to the label.

Well, i tried with viewstate and that didnt work either. the button and the label are both inside the update panel. the c# code is:

protected void Page_Load(object sender, EventArgs e) { ViewState["i"] = 1; Label1.Text = ViewState["i"].ToString(); }protected void bt_next_Click(object sender, EventArgs e) { ViewState["i"] =int.Parse(ViewState["i"].ToString()) + 1; Label1.Text = ViewState["i"].ToString(); }

when I click the button it increases to 2, but afterwards the next click doesnt change it to 3.

SpriteSODA:

Well, i tried with viewstate and that didnt work either. the button and the label are both inside the update panel. the c# code is:

protected void Page_Load(object sender, EventArgs e) { ViewState["i"] = 1; Label1.Text = ViewState["i"].ToString(); }protected void bt_next_Click(object sender, EventArgs e) { ViewState["i"] =int.Parse(ViewState["i"].ToString()) + 1; Label1.Text = ViewState["i"].ToString(); }

when I click the button it increases to 2, but afterwards the next click doesnt change it to 3.

solved it by checking postback in the page_load :)