ASP.NET Update Panel within ListView Control not updating - c#

Basically I have this situation
Page >
Update Panel >
User Control >
List View >
User Control (Within item template) >
Update Panel
When I click on a button within the inner most update panel, I want the content of the update panel to update. This isn't happening. However, the click handler is being hit fine asynchronously. The update panel just doesn't want to update.
Code - I've created a simple test web app that replicates the problem, and shared it on my google drive: UpdatePanelInListViewTest.zip, but here's the markup:
Page:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="ajaxParent" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<uc1:ListUserControl ID="ListUserControl1" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
List User Control:
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="ListUserControl.ascx.cs" Inherits="UpdatePanelInListViewTest.ListUserControl" %>
<%# Register src="MiniWidget.ascx" tagname="MiniWidget" tagprefix="uc1" %>
<asp:ListView ID="lstTest" runat="server">
<ItemTemplate>
Item
<uc1:MiniWidget ID="MiniWidget1" runat="server" />
</ItemTemplate>
</asp:ListView>
Mini Widget User Control
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="MiniWidget.ascx.cs" Inherits="UpdatePanelInListViewTest.MiniWidget" %>
<asp:UpdatePanel ID="ajaxWidget" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:LinkButton ID="lnkTest" runat="server" onclick="lnkTest_Click">Test</asp:LinkButton>
<asp:Label ID="lblTest" runat="server" Text=""></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
I've tried different permutations of this; i.e. having the button outside the panel and adding a trigger etc but I just cannot get it to update.
It appears that because the user control is within an item template of the parent list view it causes the update panel to not update for some reason...


The problem is to do with when you call the databind method within ListUserControl.
Moving lstTest.DataBind(); so that it executes within the Page_Load rather than the Page_PreRender fixes the issue for your simple test web app.


have u tried:
<asp:UpdatePanel ID="ajaxPanel" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnTest" />
</Triggers>
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:Button ID="btnTest" runat="server" Text="Test" onclick="btnTest_Click" />
</ContentTemplate>
</asp:UpdatePanel>

Related

ASP.Net Trigger user control dropdownlist change from UpdatePanel

I need to trigger an update event in a user control from update panel, but so far I am having some issues. Here is my scenario:
UC1:
//uc1
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="FilterControlRow.ascx.cs" Inherits="FilterWebPart.FilterControlRow" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
// other controls
<div runat="server" id="inputFilters" class="inputFilters">
<asp:Button ID="btnOpenBracket" runat="server" CssClass="filterBracketButton" OnClick="btnOpenBracket_Click" />
<asp:DropDownList ID="ddlPropertyNames" runat="server" OnSelectedIndexChanged="ddlPropertyNames_SelectedIndexChanged"
ViewStateMode="Enabled" />
<div class="filterValidator">
<asp:DropDownList ID="ddlLookup" CssClass="filterTxtValue" runat="server" ViewStateMode="Enabled" />
</div>
</div>
when changed the ddlPropertyNames updates the ddlLookup.
UC2:
//uc2
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="FilterControlNew.ascx.cs"
Inherits="FilterWebPart.FilterControlNew" ViewStateMode="Disabled" %>
<%# Register Src="FilterWebPart.FilterControlRow.ascx" TagName="FilterControlRow" TagPrefix="uc2" %>
<asp:UpdatePanel ID="UpdatePanelFilter" runat="server" ChildrenAsTriggers="False" UpdateMode="Conditional" ViewStateMode="Enabled" OnInit="UpdatePanelFilter_OnInit">
<ContentTemplate>
//other controls
<asp:Repeater ID="Repeater1" runat="server" Visible="true" OnItemDataBound="Repeater1_ItemDataBound"
OnItemCommand="Repeater1_ItemCommand" ViewStateMode="Enabled">
<ItemTemplate>
<div class="filterRow">
<uc2:filtercontrolrow id="FilterControlRow1" runat="server" />
</div>
</ItemTemplate>
</asp:Repeater>
<asp:Button ID="btnFind" runat="server" OnClick="btnFind_Click" CssClass="filterButton" Text="Find"
ViewStateMode="Enabled" ValidationGroup="Filter" />
<asp:Button ID="btnAdd" runat="server" OnClick="btnAdd_Click" CssClass="filterButton" Text="Add" ViewStateMode="Enabled" />
</asp:Panel>
// more controls
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnFind" />
</Triggers>
</asp:UpdatePanel>
UC2 just contains the first user control in a repeater so I can have multiple filters. and then in the default page I have:
<uc1:filtercontrolnew id="WebPartFilter" runat="server" />
The main problem is that the first user control was doing a full page postback and I want to avoid that and limit it only to update the dropdown that is inside the usercontrol. I saw somewhere that the UpdatePanel is the way to go, but after many attempts either it does nothing or it is doing a full page postback again. Maybe I am wrapping the update panels wrong, but unfortunatelly I do not have much experience using them.
Any help would be appreciated:)

First Step use asynchronous postback trigger, and add the Event Name
//uc2
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="FilterControlNew.ascx.cs"
Inherits="FilterWebPart.FilterControlNew" ViewStateMode="Disabled" %>
<%# Register Src="FilterWebPart.FilterControlRow.ascx" TagName="FilterControlRow" TagPrefix="uc2" %>
<asp:UpdatePanel ID="UpdatePanelFilter" runat="server" ChildrenAsTriggers="False" UpdateMode="Conditional" ViewStateMode="Enabled" OnInit="UpdatePanelFilter_OnInit">
<ContentTemplate>
//other controls
<asp:Repeater ID="Repeater1" runat="server" Visible="true" OnItemDataBound="Repeater1_ItemDataBound"
OnItemCommand="Repeater1_ItemCommand" ViewStateMode="Enabled">
<ItemTemplate>
<div class="filterRow">
<uc2:filtercontrolrow id="FilterControlRow1" runat="server" />
</div>
</ItemTemplate>
</asp:Repeater>
<asp:Button ID="btnFind" runat="server" OnClick="btnFind_Click" CssClass="filterButton" Text="Find"
ViewStateMode="Enabled" ValidationGroup="Filter" />
<asp:Button ID="btnAdd" runat="server" OnClick="btnAdd_Click" CssClass="filterButton" Text="Add" ViewStateMode="Enabled" />
</asp:Panel>
// more controls
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnFind" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
Second Step add if(! isPostback) in Page_Load and place in it all the code you want not to be refreshed on postback
Note you should add in the update panel triggers for each tool you are using as buttons repeaters, etc.. and make sure to add the events you're using

Ajax Tab Container loads the first tab always when fire an event

I have an AJAX tab container that contains two tab panels.
The problem when I fire an event on the second tab it reloads the first tab.
Any help? Suggestions? below is a sample of the aspx code
<AJAX:TabContainer runat="server" ID="tcMain" ActiveTabIndex="0">
<AJAX:TabPanel runat="server" ID="tpTab1" TabIndex="1">
<HeaderTemplate>
Tab1
</HeaderTemplate>
<ContentTemplate>
<div runat="server" id="div1">
<asp:UpdatePanel ID="upTab1" runat="server">
<ContentTemplate>
//entry and events
</ContentTemplate>
</asp:UpdatePanel>
</div>
</ContentTemplate>
</AJAX:TabPanel>
<AJAX:TabPanel runat="server" ID="tpTab2" TabIndex="2">
<HeaderTemplate>
Tab2
</HeaderTemplate>
<ContentTemplate>
<div runat="server" id="div2">
<asp:UpdatePanel ID="upTab2" runat="server">
<ContentTemplate>
// entry and events
</ContentTemplate>
</asp:UpdatePanel>
</div>
</ContentTemplate>
</AJAX:TabPanel>
</AJAX:TabContainer>

Most likely this is because of page post-back happening.you can manage the data using ViewState property this link may solve your issue HElP
.

button click event on update panel not firing in multiple user control

I am having an update panel which user control in it
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<uc1:SelectionAjax ID="SelectionAjax1" runat="server" />
<ppmp:PinPadModal ID="ppmodal" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
and inside this user control I am calling another two user controls each user control which has its own update panel
// First User Control
<asp:UpdatePanel ID="UpP1" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnFinalConfirmation" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Button ID="btnFinalConfirmation" runat="server" Text="Confirm" OnClick="btnFinalConfirmation_Click1" />
</ContentTemplate>
</asp:UpdatePanel>
//Second User Control
<asp:UpdatePanel ID="UpPanel1" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="btnConfirmation" runat="server" Text="Confirm" OnClick="btnConfirmation_Click1" />
</ContentTemplate>
</asp:UpdatePanel>
The issue is that button click event is only being fired on the second user control not the first one how should I solve this

Include ScriptManager in your Aspx Page.This ScriptManager control provides support for client-side AJAX features in an AJAX enabled web pages.
<asp:ScriptManager ID="ScriptManager1" runat="server"/>

AJAX In ItemTemplate Doesn't Work

In this aspx code example the Timer inside UpdatePanel in ListView doesn't make async refresh. In this code it refreshes the whole page like AJAX doesn't exists here. What should I do to remove this problem ?
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:Label ID="Label1" runat="server" Text="SIMPLE FIELD"></asp:Label>
<br />
<asp:ListView ID="DataListView" runat="server">
<ItemTemplate>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Timer ID="Timer1" runat="server" Interval="500"></asp:Timer>
<asp:Label ID="Label2" runat="server" Text="AJAX"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</ItemTemplate>
</asp:ListView>
</div>
</form>

You should wrap the entire ListView in the UpdatePanel.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:ListView ID="DataListView" runat="server">
<ItemTemplate>
<asp:Timer ID="Timer1" runat="server" Interval="500"></asp:Timer>
<asp:Label ID="Label2" runat="server" Text="AJAX"></asp:Label>
</ItemTemplate>
</asp:ListView>
</ContentTemplate>
</asp:UpdatePanel>

I think there might be an issue where because the ListView doesn't do any rendering of its own, the UpdatePanel can't figure out the "parent" item to update. I think it's an unfortunate consequence of the design of the UpdatePanel.
I would recommend trying to put the UpdatePanel inside its own container control, such as an and see if that produces the correct result.

Create Loading animation before navigating to another page and disable all conrols on it during animation

I have a button on Page 1 and when the button click event occurs, I had to do some process that takes around 2-3 seconds. So, I want to Put a Loading Image in Center and disable all other controls on the Page 1.
I tried using UpdatePanel :
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button runat="server" Text="Button" onclick="Unnamed1_Click" />
<asp:Label runat="server" Text="Label" ID="lbl"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1" >
<ProgressTemplate>
<div id="IMGDIV1" align="center" valign="middle" runat="server" style="position: absolute;visibility:visible;vertical-align:middle;border-style:none;border-color:black;background-color:transparent;">
<asp:Image ID="Image1" runat="server" ImageUrl="~/ajax-loader (1).gif" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
But the controls did not get disabled. Any Solution or Javascript ??
Also I want that it should work if want to stay on the same page.

why dont yu use telerik radgrid loading panel ?
http://www.telerik.com/help/aspnet-ajax/ajax-center-loadingpanel.html

Categories

Resources