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
Related
Below is the code.
Everything else is working fine. Just when the user clicks btnWhishlist (if user not logged-in) ModalPopupExtender displays for login. On popup whether Cancel or Login is clicked, even if the user gets logged in, the btnWishlist button disappears.
When the page is reloaded the button appears again. Looks like UseSubmitBehavior="false" is creating the problem. The page do not reload but only the button disappears, everything else remains same.
Tried jquery to show the panel/div that contains the button. No Luck.
<ContentTemplate >
<asp:ListView ID="usrListShowImages" runat="server" OnItemCommand="usrListShowImages_ItemCommand" OnItemCreated="usrListShowImages_ItemCreated" >
<LayoutTemplate>
some layout
</LayoutTemplate>
<ItemTemplate>
<tr>
<asp:UpdatePanel runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false" ID="up_inlv">
<ContentTemplate>
<div id="divWishlist" class="wishlist" runat="server">
<div class="<%--growuser--%>picUserShow">
<asp:ImageButton ID="btnImages" ImageUrl='<%# ".." + Eval("ItemsPicUrl") %>' runat="server" CssClass="growuser" CommandName="btnImages" CommandArgument='<%# Eval("ID") %>' />
<asp:Panel class="bottomDiv" runat="server" id="btmDiv"> <%-- HAVE USER SIGNIN, CHECK FROM DB THAT THIS ITEM WAS ADDED TO WISHLIST OR NOT AND THEN ALOT THE BUTTON TEXT ACCORDINGLY --%>
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:Button ID="btnWhishlist" Text='<%# Eval("colbtnwishlist") %>' runat="server" CssClass="wishlistButton" CommandName="btnWhishlist" CommandArgument='<%# Eval("ID") %>' UseSubmitBehavior="false" EnableViewState="true" />
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<div class="bottomDivCart">
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:Button ID="btnCart" Text="Cart" runat="server" CssClass="CartButton" CommandName="btnCart" UseSubmitBehavior="false" CommandArgument='<%# Eval("ID") %>' EnableViewState="true" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div class="caption">
<%# Eval("captionforpage") %>
</div>
</div>
<div class="priceTag">Price Rs.<%# Eval("priceofarticle") %></div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</tr>
</ItemTemplate>
There are no errors so far. The wish button should show up without having a page reload, the same way the other artifacts are showing up
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
.
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>
My user control code throws javascript error.
If I don't include uplNewRequestCreation in the main page, everything works as expected. All the server and client side file upload functions are triggered. The reason for including the update panel in main page is to avoid full page postback.
I have tried several solutions from online sources but none helped.
added scriptmanagerproxy to user control page
defined the javascript in code behind page_load - this solution worked, but it did not trigger
OnUploadedComplete="uplFile1_UploadedComplete"
added file upload user control as trigger to the main update panel and changed updatemode to conditional
Error message: After the FileUpload.ascx.cs is initialized, following error message is shown.
Microsoft JScript runtime error: 'clientUploadComplete' is undefined
I appreciate your help very much!
Thanks!!!!
Here's my code structure.
User control
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="FileUpload.ascx.cs"
Inherits="QTrack2.UserControls.FileUpload" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<script type="text/javascript">
function clientUploadComplete(sender, args) {
document.getElementById('<%= btnTrigger.ClientID %>').click();
}
</script>
<div style="float: left; margin-left: 0px;">
<asp:GridView ID="grdUploadControls" runat="server" AutoGenerateColumns="False" OnRowDataBound="grdUploadControls_RowDataBound"
CssClass="uploadTable" Caption="CIQ Files Required To Be Uploaded">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="lblCIQType" CssClass="Label" runat="server" Text='<%#Eval("Key")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField Visible="false">
<ItemTemplate>
<asp:Label ID="isReqlblCIQType" CssClass="Label" runat="server" Text='<%#Eval("Value")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ControlStyle-CssClass=" ">
<ItemTemplate>
<asp:AsyncFileUpload ID="uplFile1" runat="server" OnUploadedComplete="uplFile1_UploadedComplete"
CompleteBackColor="#E5FFE5" ErrorBackColor="#F4ADAE" Width="300" UploaderStyle="Modern"
ClientIDMode="AutoID" OnClientUploadComplete="clientUploadComplete"/>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:HiddenField ID="hdnFileSavePath" runat="server" Value="" />
<br />
</div>
<div style="float: left; margin-left: 20px; height: 40%; width: 650px; overflow: auto;
padding-right: 20px;">
<%-- <asp:UpdatePanel ID="upnlFileDisplayHolder" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnTrigger" />
</Triggers>
<ContentTemplate>--%>
<asp:GridView ID="grdFileDisplay" runat="server" AutoGenerateColumns="false" CssClass="uploadTable"
OnRowDataBound="grdFileDisplay_RowDataBound" Caption="CPM Files Currently Uploaded">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="lblFileType" CssClass="Label" runat="server" Text='<%#Eval("Value")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="lblFileName" CssClass="Label" runat="server" Text='<%#Eval("Key")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="btnDeleteFile" CssClass="button" runat="server" Text="Remove" OnClick="btnDeleteFile_Click" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<div>
<asp:Button ID="btnTrigger" runat="server" Text="fdkl" Style="display: none;" OnClick="btnTrigger_Click" />
</div>
<%-- </ContentTemplate>
</asp:UpdatePanel>--%>
</div>
<div style="clear: both">
</div>
Main page calling user control
<%# Page Title="New Request" Language="C#" MasterPageFile="~/Site.IM.master" AutoEventWireup="true"
CodeBehind="GenericNewRequest.aspx.cs" Inherits="QTrack2.CreatorPages.NewRequest.Scripts.Generic.GenericNewRequest" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<%# Register TagPrefix="uc1" TagName="fileUploadUserControl" Src="~/UserControls/FileUpload.ascx" %>
<%# Register TagPrefix="uc2" TagName="ciqValidationUserControl" Src="~/UserControls/ciqValUserControl.ascx" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<script type="text/javascript">
// This function is called whenever the user selects expected completion date from view # 3.
// This function checks if the selected date is less than currentDate and sets to the currentDate if true.
function checkSelectedDate(sender, args) {
if (sender._selectedDate < new Date()) {
var previouslySelectedDate = sender._textbox.value;
sender._selectedDate = new Date();
// set the date back to the current date
sender._textbox.set_Value(sender._selectedDate.format(sender._format))
}
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:UpdatePanel ID="uplNewRequestCreation" runat="server">
<ContentTemplate>
<asp:MultiView ID="mviewNewRequestCreation" runat="server" ActiveViewIndex="0">
<View #1>
.....
</View #1>
<View # 2>
<uc1:fileUploadUserControl ID="multUplUserCntrol1" runat="server" />
.....
</View # 2>
<View # 3>
....
</View #3>
</asp:MultiView>
</ContentTemplate>
</asp:UpdatePanel>
It is clear your Javascript function is not being registered within the update panel, you can do this:
Declare this function clientUploadComplete outside the User Control and outside the Update Panel.
Or also you can:
Call the document.getElementById('<%= btnTrigger.ClientID %>').click(); function not using a javascript function, something like this...
OnClientUploadComplete="document.getElementById('btnTrigger_clientName').click()"
I'm having issues with nestled, custom user controls that causes full page postbacks despite being encapsulated by an UpdatePanel.
The update panel:
<asp:Content ID="mainContentPane" ContentPlaceHolderID="mainContent" runat="server">
<asp:ScriptManager ID="smNetAjax" runat="server" />
<asp:UpdatePanel runat="server" UpdateMode="Conditional" ID="pnlAssetTabView">
<ContentTemplate>
<custom:AssetTabView runat="server" ID="tvAddAssets" />
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
The AssetTabView-control:
<custom:TabView runat="server" ID="tvTabView" OnSelectedTabChanged="tvTabView_SelectedTabChanged" />
<custom:AssetList runat="server" ID="dalAssetList" />
And finally the TabView whose links causes full page postback:
<SelectedItemTemplate>
<div class="tab current">
<div class="left"></div>
<asp:LinkButton ID="ExtendedLinkButton1" runat="server"><span><%# DataBinder.Eval(Container.DataItem, "HeaderText") %></span></asp:LinkButton>
<div class="right"></div>
</div>
</SelectedItemTemplate>
<ItemTemplate>
<div class="tab">
<div class="left"></div>
<asp:LinkButton OnCommand="ProcessTabSelection" CommandArgument='<%# Container.ItemIndex %>' ID="ExtendedLinkButton2" runat="server" TabIndex='<%# TabIndex + Container.ItemIndex %>'><span><%# DataBinder.Eval(Container.DataItem, "HeaderText") %></span></asp:LinkButton>
<div class="right"></div>
</div>
</ItemTemplate>
<FooterTemplate>
</div>
</FooterTemplate>
I'm really running out of ideas right and I'm desperate for any ideas that you might have! Thank you.
You have option of ProxyScriptManager. You don't need name of update panel, u can iterate to control list till closest-upward update panel is found.