I getting issue with MaintainScrollPositionOnPostback with UpdataPanel in TestPage.aspx
page.
Page Header :
<%# Page Language="C#" MasterPageFile="~/MasterPages/Abc.master" AutoEventWireup="true"
MaintainScrollPositionOnPostback="true" CodeFile="Testpage.aspx.cs" Inherits="Testpage"
Title="Test Page" %>
I registered Ajaxtoolkit Control to my aspx page.
with
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxtoolkit" %>
When I add " MaintainScrollPositionOnPostback="true" "page directive to my .aspx page
then I got the error message as shown in attached image.
Error: Status code returns from server:500
my Code
<asp:updatepanel id="upAnatomicalConfig" runat="server" updatemode="Conditional">
<ContentTemplate>
<div id="divform" style="width: 98%; text-align: left; margin: 0 auto" class="W_B">
<div>
<asp:validationsummary id="valsum" runat="server" validationgroup="abc" showmessagebox="true"
displaymode="BulletList" enableclientscript="true" showsummary="false" />
</div>
<!-- Here is some text box that I used for Save -------->
<asp:button id="btnSave" runat="server" text="Save" cssclass="button" causesvalidation="true"
validationgroup="abc" onclick="btnSave_Click" />
<asp:button id="btnCancel" runat="server" text="Cancel" cssclass="button" onclick="btnCancel_Click"
causesvalidation="false" />
<asp:datagrid id="dtgrid" runat="server" width="100%" cssclass="dgGrid" onitemdatabound="dtgrid_ItemDataBound"
cellpadding="2" autogeneratecolumns="false" showfooter="true" showheader="true"
onitemcreated="dtgrid_ItemCreated" allowpaging="True" pagesize="25" allowcustompaging="True"
gridlines="None" allowsorting="true" borderwidth="0px" borderstyle="None" onpageindexchanged="dtgrid_PageIndexChanged"
onsortcommand="dtgrid_OnSortCommand">
<Columns>
<asp:TemplateColumn HeaderStyle-Width="5%" ItemStyle-Width="5%">
<ItemTemplate>
<asp:ImageButton ID="ibtnEdit" CausesValidation="false" OnClick="ibtnEdit_Click"
runat="server" ImageUrl="~/Images/Edit.gif" ToolTip="Edit Template" CommandArgument='<%# Eval("tblID") %>'>
</asp:ImageButton>
<asp:ImageButton ID="ibtnDisc" CausesValidation="false" OnClick="ibtnDisc_Click"
runat="server" ImageUrl="~/Images/inactive_record.gif" ToolTip="Move to inactive"
CommandArgument='<%# Eval("tblID") %>'></asp:ImageButton>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:datagrid>
</div>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnSave" />
</Triggers>
</asp:updatepanel>
What is the reason behind that?
Page directive - "MaintainScrollPositionOnPostback" not worked
Reason is that 1) Framework 2.0 and 2) AjaxToolkit (ver 1.0.2....) Reset Position after AJAX (async call) postback not supported.
Related
I have an update panel that includes a gridview with two buttons and a modal popup. When the user clicks btnView, the modal popup appears displaying the relevant information.
My issue is that I have been trying to get the updateprogress to appear during the partial postback and so far have not managed it. I should mention that the same UpdateProgress code does work in a test page that just comprises of a button with a sleep function in the code behind. Here is the html:
<!-- Placing the GridView in UpdatePanel-->
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="gv" />
</Triggers>
<ContentTemplate>
<asp:GridView ID="gv" runat="server" AutoGenerateColumns="False" DataKeyNames="GroupID" GridLines="Both"
BorderWidth="1px" CellPadding="2" ForeColor="Black" OnRowDataBound="gv_RowDataBound" BorderStyle="Double" HorizontalAlign="Center"
HeaderStyle-HorizontalAlign="Center" AllowSorting="True" CssClass="gvformat">
<AlternatingRowStyle BackColor="#95B9B9" />
<HeaderStyle BorderStyle="Double" BorderColor="Black"/>
<Columns>
<asp:BoundField DataField="FinancialYear" HeaderText="Financial Year" ItemStyle-HorizontalAlign="Center"/>
<asp:TemplateField ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:Button ID="btnView" runat="server" Text="view" OnClick="btnComments_Click" CausesValidation="false" Font-Names="Trebuchet MS" CssClass="btn btn-info" Font-Bold="True" />
</ItemTemplate>
<HeaderTemplate>Comment</HeaderTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle">
<ItemTemplate>
<asp:Button ID="btnDetail" runat="server" Text="view" OnClick="btnDetails_Click" CausesValidation="false" Font-Names="Trebuchet MS" CssClass="btn btn-comment" ForeColor="White" Font-Bold="True" />
</ItemTemplate>
<HeaderTemplate>Details</HeaderTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:Button ID="bttnHidden" runat="Server" Style="display: none" />
<br />
<asp:Panel ID="pnlComment" runat="server" Width="650px" Height="620px" Style="display: none;" CssClass="modalBox">
<table border="1" class="commentTable" style="border-collapse: separate; border-spacing: 10px; width:100%; height:100%">
<tr><th><asp:Label ID="lblComments" runat="server" Text="Comments" Font-Size="Medium"></asp:Label></th></tr>
<tr><td>
<asp:TextBox ID="txtExistingComments" runat="server" TextMode="MultiLine" ReadOnly="True" CssClass="content" Rows="12" Font-Names="Trebuchet MS"></asp:TextBox>
</td></tr>
<tr><th><asp:Label ID="lblNewComment" runat="server" Text="Add Comment" Font-Size="Medium"></asp:Label></th></tr>
<tr><td>
<asp:TextBox ID="txtNewComments" runat="server" TextMode="MultiLine" ReadOnly="False" CssClass="content" Rows="12" Font-Names="Trebuchet MS"></asp:TextBox></td></tr>
<tr><td>
<asp:Button ID="btnSave" runat="server" width="100px" Text="Save" OnClick="btnSave_Click" CssClass="btn btn-comment" ValidationGroup="SaveComment" ForeColor="White" Font-Bold="True" />
<asp:Button ID="btnCancel" runat="server" width="100px" Text="Cancel" CssClass="btn btn-comment" ForeColor="White" Font-Bold="True"/></td></tr>
<tr>
<td>
<asp:RequiredFieldValidator ID="rfValidator" runat="server" ErrorMessage="RequiredFieldValidator" ControlToValidate="txtNewComments"
ForeColor="Black" ValidationGroup="SaveComment" Font-Bold="True">You must enter a comment!</asp:RequiredFieldValidator>
</td>
</tr>
</table>
</asp:Panel>
<cc1:ModalPopupExtender ID="modal" runat="server" TargetControlID="bttnHidden" PopupControlID="pnlComment" CancelControlID="btnCancel" BackgroundCssClass="modalBackground"></cc1:ModalPopupExtender>
<br />
<asp:HiddenField ID="Hidden" runat="server" value="-1"/>
<asp:HiddenField ID="bStatus" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1" ChildrenAsTriggers="false" UpdateMode="Conditional" DisplayAfter="10">
<ProgressTemplate>
<div class="center">
<asp:Image ID="imgUpdateProgress" runat="server" ImageUrl="~/Images/loader.gif" AlternateText="Please wait ..." ToolTip="Please wait ..." />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</asp:Content>
Any help would be most appreciated!
two points you need to check.
First if you have any javascript errors - this Update Progress is base on javascrip, so any javascript error can stop the function of it. Open the console panel and check for javascript errors...
The second point is to check the DisplayAfter property on UpdateProgress, that is 500 milliseconds default value. If anything happens within this time, the UpdateProgress is not show. So add a lower value on DisplayAfter to check it out.
The ModalPopupExtender wires the btnCancel button to trigger the a popup an UpdatePanel. The UpdatePanel is a cancel confirmation which contains a Yes button and a No button. After clicking the No button, the panel is closed but the btnCancel no longer trigger the popup when being clicked again. The Yes button works and triggers the server side YesButton_Click event. Here is my code. Thanks for your help.
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" />
<asp:Button ID="btnCancel" Text="Cancel Task" runat="server" ToolTip="Cancel the displayed task and remove it from Tracker" CausesValidation="false" />
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnCancel"
PopupControlID="ConfirmationPanel" BackgroundCssClass="modalBackground" />
<asp:UpdatePanel ID="upd_yes_no" runat="server">
<ContentTemplate>
<asp:Panel ID="ConfirmationPanel" runat="server" CssClass="modalPopup" Style="display: none">
<div class="modalPopup-text">
Are you sure you want to cancel this task?<br />
<br />
<asp:Button ID="YesButton" runat="server" Text="Yes" CommandArgument="Yes" OnClick="YesButton_Click" />
<asp:Button ID="NoButton" runat="server" Text="No" CommandArgument="No" />
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
I'm not 100% positive but it appears that Extender and Extended controls must reside in the same UpdatePanel. So if you move your Cancel button and ModalPopupExtender control inside the UpdatePanel, it should work as expected.
<ajax:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" />
<asp:UpdatePanel ID="upd_yes_no" runat="server">
<ContentTemplate>
<span id="buttons">
<asp:Button ID="btnUndo" Text="Undo Edit" CommandArgument="undo" runat="server"
OnClick="undo" CausesValidation="false" />
<asp:Button ID="btnNewTask" Text="New Task" CommandArgument="newTask" runat="server"
ToolTip="Unchange current and create new task"
OnClick="NewTask" CausesValidation="false" />
<asp:Button ID="btnCancel" Text="Cancel Task" runat="server"
ToolTip="Cancel the displayed task and remove it from Tracker" CausesValidation="false" />
</span>
<ajax:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnCancel" PopupControlID="ConfirmationPanel" BackgroundCssClass="modalBackground" />
<asp:Panel ID="ConfirmationPanel" runat="server" CssClass="modalPopup" Style="display: none">
<div class="modalPopup-text">
Are you sure you want to cancel this task?
<br />
<br />
<asp:Button ID="YesButton" runat="server" Text="Yes" CommandArgument="Yes" OnClick="YesButton_Click" />
<asp:Button ID="NoButton" runat="server" Text="No" CommandArgument="No" />
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
I have the following code on my aspx page that has an onclick event to produce a popup control but the button is invisible. What can I use in place of ItemTemplate as a property of Templatefield to make the button visible?
<asp:TemplateField HeaderText="Performance Status (adults):">
<ItemTemplate>
<asp:button skinID="tabbutton" CssClass="Clickable" id="btnWhoStatus" runat="server" Text="?" BorderStyle="None" TabIndex="-1" />
<cc1:PopupControlExtender
ID="PopupControlExtender2" runat="server" Position="Top"
TargetControlID="btnWhoStatus" PopupControlID="pnlWhoStatus"
DynamicServicePath="" Enabled="True" ExtenderControlID="">
</cc1:PopupControlExtender>
<asp:Panel runat="server" ID="pnlWhoStatus" BackColor="#FFFFFF" style="width:640px; display:none " >
<controls:WhoStatusPopup id="WhoStatusPopup" runat="server" />
</asp:Panel>
</ItemTemplate>
<ItemTemplate>
<asp:Label skinid="tablabelblack" id="lblPerformanceStatus" runat="server" Text='<%# Eval("PerformanceStatus") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel" runat="server">
<ContentTemplate>
<asp:Repeater ID="rpChat" runat="server" OnItemDataBound="rpChat_ItemDataBound" OnItemCommand="rpChat_ItemCommand">
<ItemTemplate>
<div id="divChatWindow" title='<%# Eval("username") %>' runat="server" class="clChatWindow">
<div>
<asp:Label runat="server" Text='<%# Eval("username") %>' class="divHeader"></asp:Label>
<img src="../../Menu/close.jpg" onclick="HideDiv(this)" style="float: right; width: 20px;
height: 20px;" /></div>
<div class="chatText">
<asp:Repeater ID="rpChatMessages" runat="server">
<ItemTemplate>
<asp:Image ID="imageForFriend" runat="server" CssClass="clFriendsImage" ImageUrl='<%# "HttpImageHandler.jpg?username=" + DataBinder.Eval(Container.DataItem,"fromusername").ToString() %>' />
<asp:Label ID="chatMessage" runat="server" Text='<%# Eval("Message") %>'></asp:Label>
<br>
</ItemTemplate>
</asp:Repeater>
</div>
<asp:TextBox ID="txtChatMessage" runat="server" Width="115px"></asp:TextBox>
<asp:LinkButton ID="btnSendChat" runat="server" CommandName="Insert" CommandArgument='<%# Eval("username") %>'>Send</asp:LinkButton>
</div>
</ItemTemplate>
</asp:Repeater>
</ContentTemplate>
</asp:UpdatePanel>
I have edited the code... Now what should I do? I have the linkbutton inside contenttemplate. Still a postback is happening
Any postback coming from any control outside an UpdatePanel will trigger a full postback unless you add those events as triggers of your UpdatePanel
In your example,
<asp:LinkButton ID="btnSendChat" runat="server" CommandName="Insert" CommandArgument='<%# Eval("Username2") %>'>Send</asp:LinkButton>
It's outside of the UpdatePanel and since you do not have triggers in your panel that will always cause a full postback
Solutions:
Approach 1
Place the LinkButton inside the UpdatePanel.ContentTemplate
Approach 2
Add triggers to your UpdatePanel
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSendChat" EventName="Click" />
</Triggers>
I have an Ajax update panel inside a nested listview as shown below.
<%# Page Title="LV Ajax" Language="VB" MasterPageFile="~/MasterPages/SimpleMasterPage.master"
AutoEventWireup="false" CodeFile="LV Ajax.aspx.vb" Inherits="LV_Ajax" %>
ListView Ajax
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:ListView ID="OuterListView" runat="server" DataSourceID="SqlDataSource1">
<EmptyDataTemplate>
No Data Available.
</EmptyDataTemplate>
<ItemTemplate>
<asp:Label ID="PhotoAlbumIdLabel" runat="server" Text='<%# Eval("PhotoAlbumId") %>'
Visible="false" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:ListView ID="InnerListView" runat="server" DataSourceID="SqlDataSource2">
<EmptyDataTemplate>
<span>No data was returned.</span>
</EmptyDataTemplate>
<ItemTemplate>
<br />
<asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("ImageUrl") %>' ToolTip='<%# Eval("ToolTip") %>'
Width="400px" Height="300px" />
<br />
</ItemTemplate>
<LayoutTemplate>
<div id="itemPlaceholderContainer" runat="server" style="">
<span runat="server" id="itemPlaceholder" />
</div>
<asp:DataPager ID="DataPager1" runat="server" PageSize="1">
<Fields>
<asp:NextPreviousPagerField FirstPageText="<<" ShowFirstPageButton="True" ShowNextPageButton="False"
PreviousPageText="< " ShowPreviousPageButton="True" />
<asp:NumericPagerField />
<asp:NextPreviousPagerField LastPageText=">>" ShowLastPageButton="True" NextPageText=" >"
ShowNextPageButton="True" ShowPreviousPageButton="False" />
</Fields>
</asp:DataPager>
</span>
</LayoutTemplate>
</asp:ListView>
</ContentTemplate>
</asp:UpdatePanel>
<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:RenaissanceConnectionString1 %>"
SelectCommand="SELECT [ToolTip], [ImageUrl], [Description], [PhotoAlbumId], [SortOrder] FROM [Picture] WHERE ([PhotoAlbumId] = #PAId) ORDER BY [SortOrder]">
<SelectParameters>
<asp:ControlParameter ControlID="PhotoAlbumIdLabel" DefaultValue="0" Name="PAId"
PropertyName="Text" Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
<br />
</span>
</ItemTemplate>
</asp:ListView>
Unfortunately when I click the datapager buttons although the picture changes correctly, the browser displays the page from the top. If I remove the outer listview it works perfectly keeping its position on the page.
This was working correctly, so if you think the code is correct maybe you could suggest some other changes.
If there is any genius out there who can suggest a solution it would be appreciated.
Many thanks in anticipation.
Maybe if you add ChildrenAsTriggers="true and set UpdateMode to Conditional it will work for you.
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
Your <ASP:UpdatePanel> tag is missing its <Triggers> element.
I think that it should be something like
<asp:UpdatePanel ... >
<Triggers>
<AsyncPostBackTrigger ControlID='DataPager1'>
</Triggers>
<ContentTemplate> .....