AsyncFileUpload in UpdatePanel - asp.net

I want to use a update panel to update my repeater when I click om my btnUpload.
When I put my ascynFileUpload in the updatePanel is stop working, though the codebehind is ok.
But when I set my btnUpload as trigger and only put my repeater in the updatepanel, it doesn't refresh (which is good) but my codebehind stops working.
<div id="addEntry" class="row centered" runat="server">
<asp:Label ID="lblFeedback" runat="server"></asp:Label>
<abbr title="Max 20MB">
<asp:AsyncFileUpload ID="uploadEntry" runat="server" CompleteBackColor="White" />
</abbr>
<div id="uploading">
</div>
<asp:TextBox ID="txtEntryDescription" runat="server" TextMode="MultiLine" placeholder="Description upload (optional)"
Width="100%" Height="60px"></asp:TextBox><br />
<asp:Button ID="btnAddEntry" runat="server" Text="Upload" CssClass="btn btn-round"
OnClick="btnAddEntry_Click" />
<hr />
</div>
<div id="competitionRounds" class="row">
<asp:UpdatePanel ID="updatepnl" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Repeater ID="rptEntries" runat="server" DataSourceID="dsEntries">
<ItemTemplate>
<%# "<div class=\"imgThumb" + Eval("entryWinner") + " draggable\" style=\"background-image:url('uploads/"
+ Eval("entryImagename") + "');\" data-id=\""
+ Eval("pk_entryId") + "\"></div>"
%>
</ItemTemplate>
</asp:Repeater>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnAddEntry" EventName="click" />
</Triggers>
</asp:UpdatePanel>
</div>

Related

Update Panel and Script Manager not working in Cascading Dropdownlist in ASP.NET

I tried to populate dropdown city and area without page refresing. So i used in Updatepanel and Script Manager.The code is below
<asp:ScriptManager ID="script1" runat="server" EnablePartialRendering="true"></asp:ScriptManager>
<div class="form-list wow fadeInRight" data-wow-delay="0.5s">
<ul class="navmain">
<li>
<asp:UpdatePanel ID="upd1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
<!--<asp:DropDownList ID="drp_city" runat="server" CssClass="drp" OnSelectedIndexChanged="drp_city_SelectedIndexChanged" AutoPostBack="true" ></asp:DropDownList>-->
<asp:DropDownList ID="drp_city1" runat="server" CssClass="drp" OnSelectedIndexChanged="drp_city_SelectedIndexChanged" AutoPostBack="true"></asp:DropDownList>
<asp:HiddenField ID="hfCustomerId" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</li>
<li>
<asp:UpdatePanel ID="upd2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:DropDownList ID="drp_area" runat="server" CssClass="drp" AutoPostBack="true"></asp:DropDownList>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="drp_city1" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
</li>
<li>
<asp:UpdatePanel ID="upd3" runat="server">
<ContentTemplate>
<asp:DropDownList ID="drp_cuisine" runat="server" CssClass="drp"></asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>
</li>
</ul>
<asp:Button OnClick="btn_search1" runat="server" CssClass="btn_search" />
</div>
I can't find the error. Page is not refreshing but area dropdown is not populating.

UpdatePanel doesnt work with script manager. There is a postback happening for the code below. How do I do Ajax behavior?

<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>

modal popup extender not showing panel on button click

I'm trying to use a modal popup extender on my page so when I click a button, it must show a panel. Here is what I have:
<asp:UpdatePanel runat="server" ID="updPanel">
<ContentTemplate>
<ajaxToolkit:ModalPopupExtender ID="mpeEmailComplete" runat="server" TargetControlID="btnTesting"
PopupControlID="pnl" OkControlID="btnOk"
BackgroundCssClass="modalBackground">
</ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="pnl" runat="server" style="display:none;">
<asp:UpdatePanel ID="udp" runat="server">
<ContentTemplate>
<asp:Panel runat="server" ID="pnlEmailComplete" Visible="false">
<asp:Label runat="server" ID="lblTest" Text="Testing testing testing"></asp:Label>
<asp:Button runat="server" ID="btnOk" Text="OK" />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<asp:Button runat="server" ID="btnTesting" Text="Testing"/>
</ContentTemplate>
</asp:UpdatePanel>
but i can't get the panel to popup when the button is clicked. Anybody know why?
Your innermost panel has Visible=false.
<asp:Panel runat="server" ID="pnlEmailComplete" Visible="false"> *(change here)*
So, when you press the TESTING button, the ModalPopupExtender correctly causes the outer panel to display, but it's displaying an invisible inner panel, hence you see nothing on screen.
<asp:Panel ID="pnl" runat="server" style="display:none;"> *(this is ok)*
To fix, just yank the Visible=false from the outer panel (pnlEmailComplete)
Hope that helps!
Do you have any JavaScript errors and is pnl.Visible=False; set on the server-side anywhere?
Make sure you have the AjaxControlToolkit referenced properly, NuGet is the easiest way to add the reference.
http://nuget.org/packages/ajaxcontroltoolkit
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Btnshow" runat="server" Text="Show" OnClick="Btnshow_Click" />
<asp:Button ID="BtnTarget" runat="server" Text="Target" Style="display: none" />
<asp:TextBox ID="TextBox1" runat="server">
</asp:TextBox>
<input type="button" value="Get" onclick="abc()" />
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="BtnTarget"
PopupControlID="Panel1">
</asp:ModalPopupExtender>
<asp:Panel ID="Panel1" runat="server" BackColor="Black" Width="300px" Height="300px">
<asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="BtnHide" runat="server" Text="Hide Button" OnClick="BtnHide_Click" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="BtnHide" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Btnshow" EventName="Click" />
</Triggers>
</asp:UpdatePanel>

Modalpopup with UpdatePanel

I have an autocompleteextender that displays the list of countries. In the same textbox, when I type something and click on "Search" button, a pop-up should be opened and should display the matching countries. I am using modalpopupextender for the popup.
aspx code:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<contenttemplate>
<asp:TextBox id="TextBox1" runat="server" Width="250px"></asp:TextBox>
<asp:ImageButton id="ImageButton1" onclick="imgBtnSearch_Click" runat="server" ImageUrl="~/Images/Lab/search.jpg"></asp:ImageButton>
<cc1:AutoCompleteExtender id="TextBox1_AutoCompleteExtender" runat="server" EnableCaching="true" CompletionSetCount="10" MinimumPrefixLength="1" ServicePath="AutoComplete.asmx" UseContextKey="True" TargetControlID="TextBox1" ServiceMethod="GetCountryInfo">
</cc1:AutoCompleteExtender>
<cc1:ModalPopupExtender id="ModalPopupExtender1" runat="server" TargetControlID="ImageButton1" BackgroundCssClass="ModalPopupBG" Drag="true" PopupDragHandleControlID="PopupHeader" PopupControlID="updatePanel2" CancelControlID="btnCancel" ></cc1:ModalPopupExtender>
</contenttemplate>
</asp:UpdatePanel>
<asp:UpdatePanel id="updatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:RadioButtonList id="RadioButtonList1" runat="server" Width="400" Height="400" RepeatColumns="5" RepeatLayout="Table" RepeatDirection="Vertical" AutoPostBack="True"></asp:RadioButtonList>
<DIV class="Controls">
<INPUT id="btnOk" type="button" value="OK" />
<INPUT id="btnCancel" type="button" value="Cancel" />
</DIV>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ImageButton1" EventName="Click"></asp:AsyncPostBackTrigger>
</Triggers>
</asp:UpdatePanel>
And in my codebehind:
protected void imgBtnSearch_Click(object sender, ImageClickEventArgs e)
{
LoadCountryPopUp();
ModalPopupExtender1.Show();
}
I am not getting any countries in my popup, although I get results via my autocompleteextender. On clicking the imagebutton, I get the popup without any content. Pls help!
Place your popup contents inside panel like this:
<asp:UpdatePanel id="updatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel id="pnlPopup" runat="server">
<asp:RadioButtonList id="RadioButtonList1" runat="server" Width="400" Height="400" RepeatColumns="5" RepeatLayout="Table" RepeatDirection="Vertical" AutoPostBack="True"></asp:RadioButtonList>
<DIV class="Controls">
<INPUT id="btnOk" type="button" value="OK" />
<INPUT id="btnCancel" type="button" value="Cancel" />
</DIV>
</Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ImageButton1" EventName="Click"></asp:AsyncPostBackTrigger>
</Triggers>
</asp:UpdatePanel>
and replace UpdatePanel's controls Id with this Panel's id:
<cc1:ModalPopupExtender id="ModalPopupExtender1" runat="server" TargetControlID="ImageButton1" BackgroundCssClass="ModalPopupBG" Drag="true" PopupDragHandleControlID="PopupHeader" PopupControlID="pnlPopup" CancelControlID="btnCancel" ></cc1:ModalPopupExtender>
and check if it works?
Try putting the extenders outside of the update panel, it should not be a child of what it is extending

popup is getting disaapeared after dropdown selection

<asp:Panel id="container" CssClass="container" runat="server" style="width:850px">
<asp:Panel runat="server" id="header" cssClass="header" >
<div class="msg"> </div>
<asp:LinkButton ID="LinkButton1" runat="server" CssClass="close" OnClientClick="clearDataKey()" />
</asp:Panel>
<div runat="server" id="whatup">
<asp:Panel ID="Panel2" runat="server" >
<uc1:messageBox ID="InfoBox" runat="server" />
</asp:Panel>
</div>
<asp:updatepanel ID="upcsconfirmation" runat="server">
<ContentTemplate>
<cc1:ModalPopupExtender ID="popupCS" runat="server" BehaviorID="popupCS" TargetControlID="btnTargetCS"
PopupControlID="pnlPopupCS" BackgroundCssClass="modalBackground"/>
<asp:Button ID="btnTargetCS" runat="server" Text="Button" cssClass="hide" />
<cc1:DragPanelExtender ID="DragPanelExtenderCS" TargetControlID="pnlPopupCS" runat="server"></cc1:DragPanelExtender>
<asp:Panel ID="pnlPopupCS" runat="server" SkinID="modal"></asp:Panel>
</ContentTemplate>
</asp:updatepanel>
<div class="body" >
<div class="contentarea" style="height:200px;">
<asp:TextBox ID="datakeyholder" runat="server" style="display:none" Enabled="False" />
<asp:ObjectDataSource ID="odsCopyCustRequirements" runat="server" InsertMethod="InsertSearchRequirement"
TypeName="SearchRequirementsDataObject"
oninserting="Requirements_Inserting" >
</asp:ObjectDataSource>
<div style="height: 100%; width: 100%">
<div id="Div1" style="float: left; width: 45%; padding-left:10px">
<div class="column130">
<asp:Label ID="lblSearch1" runat="server" Text="FAST Region:"></asp:Label></div>
<asp:UpdatePanel ID="UpnlCust" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
<div class="column130">
<asp:DropDownList ID="ddSearch1" AutoPostBack="true" DataTextField="Name"
OnSelectedIndexChanged="ddSearch_SelectedIndexChanged" DataValueField="id"
runat="server" Width="150px">
</asp:DropDownList>
</div>
<div class="column130">
<asp:Label ID="lblSearch2" runat="server" Text="Owning Office:"></asp:Label></div>
<div class="column130">
<asp:DropDownList ID="ddSearch2" DataTextField="Name" DataValueField="fastid"
runat="server" Width="150px">
</asp:DropDownList>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddSearch1" />
</Triggers>
</asp:UpdatePanel>
<div class="column">
</div>
</div>
</div>
</div>
<p></p>
The upper update panel (upcsconfirmation) containing modal popup extender should have UpdateMode = "Conditional" - otherwise, asynchronous post-back from bottom update panel will also update its content restoring the modal popup to hidden state.
Yet another way to solve your issue is to use Show method of popup extender on server side when the bottom update panel posts back (for example, you can put the call popupCS.Show() in ddSearch_SelectedIndexChanged to keep the modal popup open).

Resources