Develop Reference

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

Page jumps to the top of the page even when using an Update Panel

I'm running into a bit of an issue. I have some asp.net controls wrapped in an update panel, but when I click the submit button it jumps to the top of the page. I've read a bunch of posts on here, and they either require use of some javascript or say set the MaintainPagePostion to "true" in the page directive. I tried setting it to true, that did not work. I really don't want to use a javascript script to accomplish this either. I was under the impression that this is one of the benefits to using an update panel. However, the part that I find most confusing, is it used to not do this. I don't remember changing anything on the website that would have caused this. Any help with this problem is appreciated. Thanks.
Here is the code I'm using.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel ID="pnlEmailStuff" runat="server">
Name: <asp:TextBox ID="txtName" runat="server" Width="202px"></asp:TextBox><br />
Email: <asp:TextBox ID="txtEmail" runat="server" Width="203px"></asp:TextBox><br />
<span style="font-size:12px; font-weight:normal; margin-left:55px;">**Please double check email**</span><br />
Message:<br />
<asp:TextBox ID="txtMessage" runat="server" Width="370px" TextMode="MultiLine" Font-Names="Tahoma" Font-Size="Small" Height="75px"></asp:TextBox><br />
<asp:Label ID="lblEmailError" runat="server" Text="" Font-Size="Small" ForeColor="Red"></asp:Label>
<asp:ImageButton Height="25px" Width="60px" CssClass="EmailSubmit" ImageUrl="Images/MailingListBtnSubmit2.png" ID="btnSubmit" runat="server" onclick="btnSubmit_Click"/>
</asp:Panel>
<asp:Panel ID="pnlThankYou" runat="server" Visible="false">
<p style="text-align:center; font-size:30px;">Thank you!<br /><span style="font-size:20px;">Your Email has been sucessfully submitted.</span></p>
</asp:Panel>
</ContentTemplate>

You can do it in 4 ways :
From Code-behind - Page.MaintainScrollPositionOnPostBack = true;
From Page Directive - MaintainScrollPositionOnPostback="true"
From Web.config - <pages maintainScrollPositionOnPostBack="true" />
Using Javascript. You can use the code from following link. It worked for me -
http://weblogs.asp.net/andrewfrederick/archive/2008/03/04/maintain-scroll-position-after-asynchronous-postback.aspx

I think, it's not jump to the top of the page. It's refreshing the page. What's your update panel's UpdateMode? Is it Conditional? If it's conditional, check trigger. ControlID should be button ID and EventName='Click'. Then check the area of Update Panel .
Sample Code Here :
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnlEmailStuff" runat="server">
Name: <asp:TextBox ID="txtName" runat="server" Width="202px"></asp:TextBox><br />
Email: <asp:TextBox ID="txtEmail" runat="server" Width="203px"></asp:TextBox><br />
<span style="font-size:12px; font-weight:normal; margin-left:55px;">**Please double check email**</span><br />
Message:<br />
<asp:TextBox ID="txtMessage" runat="server" Width="370px" TextMode="MultiLine" Font-Names="Tahoma" Font-Size="Small" Height="75px"></asp:TextBox><br />
<asp:Label ID="lblEmailError" runat="server" Text="" Font-Size="Small" ForeColor="Red"></asp:Label>
<asp:ImageButton Height="25px" Width="60px" CssClass="EmailSubmit" ImageUrl="Images/MailingListBtnSubmit2.png" ID="btnSubmit" runat="server" onclick="btnSubmit_Click"/>
</asp:Panel>
<asp:Panel ID="pnlThankYou" runat="server" Visible="false">
<p style="text-align:center; font-size:30px;">Thank you!<br /><span style="font-size:20px;">Your Email has been sucessfully submitted.</span></p>
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>

Have you specified the triggers in the update panel? If you specify the triggers in the triggers section then the update panel will update without jumping on top.Also you need to give updatemode = "conditional". It can be done like this:
<asp:UpdatePanel ID="ex" runat="server" UpdateMode="Conditional">
<ContentTemplate>
//your controls here
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="yourbuttonid" />
</Triggers>
</asp:UpdatePanel>

Well thank you to everyone that gave me suggestions. As it turns out the Page Routing is what caused this issue. So all I had to do to get it working was add and ignore line for that page in my RegisterRoutes code block:
void RegisterRoutes(RouteCollection routes)
{
routes.Ignore("Mobile");
routes.Ignore("Booking.aspx*");//<---- This Fixed it.
routes.MapPageRoute("Gallery", "Gallery/{Name}", "~/Gallery.aspx");
routes.Ignore("*");//<---- This is better for me. It acts as a catch all.
}
This helped me solve the issue: http://forums.asp.net/t/1743640.aspx
EDIT
I added the "routes.Ignore("");" code to it to act as a catch all, so I really don't need to ignore "Booking.aspx" specifically. Keep in mind though the order is important here. The Ignore("") needs to be the last one or else none of the other routing will work.
Thanks again Everyone.

Please try PageRequestManager handlers
<script>
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
try {
sender._controlIDToFocus = null;
}
catch (e) {
}
}
</script>

I was stuck for a few hours with a similar problem. I was convinced the problem was the UpdatePanel but it ended up being the defaultfocus & defaultbutton attributes in the form tag that was causing the page to jump up to focus the first textbox at the top of the page.
<form id="form1" runat="server" defaultbutton="buttonId" defaultfocus="textboxId">
This is something else to look at when facing this kind of issue.

User Control button not firing from webform page

I have created a user control for visitor to subscription of newsletter.
UserControl is withing the update-panel and is added to the main master-page.
Problem with the control is that Subscribe button is not firing for some reason
User control markup:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<table cellpadding="0" cellspacing="0" class="PrayerTimeWrapper">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" class="PrayerTimeInnerWrapper" border="0">
<tr>
<td valign="top">
<div class="dHeading"><asp:Label ID="lblTitle" runat="server" Text="JOIN US"></asp:Label></div>
<div class="dName">
<asp:TextBox ID="txtName" CssClass="txtSubscribe" runat="server" Text="NAME" onfocus="if(this.value=='NAME')this.value='';" onblur="if(this.value=='')this.value='NAME';"></asp:TextBox>
</div>
<div class="dEmail">
<asp:TextBox ID="txtEmail" CssClass="txtSubscribe" runat="server" Text="YOUR EMAIL" onfocus="if(this.value=='YOUR EMAIL')this.value='';" onblur="if(this.value=='')this.value='YOUR EMAIL';"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvEmailSub" runat="server" ErrorMessage="*"
ControlToValidate="txtEmail" ValidationGroup="SubEmail" ></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="revEmailSub" runat="server"
ErrorMessage="*" ControlToValidate="txtEmail" ValidationExpression="\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*"
ValidationGroup="SubEmail" ></asp:RegularExpressionValidator>
</div>
<div class="dSubmit">
<asp:Button ID="btnSubscribe" CssClass="btnSubscribe" runat="server" Text="Subscribe" onclick="btnSubscribe_Click" />
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
User control code-behind:
protected void btnSubscribe_Click(object sender, EventArgs e)
{
Response.Write("Test");
}
Markup of the page which is using master-page:
<%# Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="PrayerTiming.aspx.cs" Inherits="PrayerTiming" %>
<%# Register Src="~/en/UserControls/ucSubscribe.ascx" TagName="Subscribe" TagPrefix="uc"%>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" />
<div align="center" id="table"></div>
<uc:Subscribe id="ucSB" runat="server" UpdateMode="Conditional" />
</asp:Content>
I am doing something wrong somewhere but i am not sure what. I would appreciate help on this.

Using Resonse.Write during an asynch resquest can altere the data used to update proprely the controls within the update panel.
so instead of Response.Write("Test") use a Label.Text = "Test"

Set the ValidationGroup for the btnSubscribe button also
<asp:Button ID="btnSubscribe"
CssClass="btnSubscribe" runat="server"
Text="Subscribe"
onclick="btnSubscribe_Click"
ValidationGroup="SubEmail" />
UPDATE
From what I've seen in the comments and in the other answers, the only reason why the button didn't post the content to the server is because it didn't subscribe to that validation group. The ValidationGroup is used to separate certain views (group of controls) in a page so they use their own validation. For example a forgot password section and a login section would have two different validation groups so when a certain button is clicked only its section is validated.
I did this update, because I truly think that the accepted answer is more a debuging advice than an actually answer. A future SO reader might jump to use this guideline instead of seeing the problem.

Try puting UpdatePanel in form tag with runat="server"...

BackgroundCssClass not being applied with ModalpopupExtender

I am trying to create this webpage that shows a database with a "Master-Detail" type view. To do this I am following this tutorial http://mattberseth.com/blog/2008/04/masterdetail_with_the_gridview.html.
The only difference is that I am not using ObjectDataSource, instead I am just using my SQL - DataBase.
Here's the problem: When I click on the link to show the modalPopup, the BackgroundCssClass is not being applied, and the popup just shows up in the corner of the screen without changing the background and opacity. Anyone know whats going on?
Here's the code:
CSS
<style type="text/css">
TR.updated TD
{
background-color:yellow;
}
.modalBackground
{
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}
</style>
Modalpopup part (right above this is the gridview that shows the "Master" section of the Database, this works fine so I didn't include it.
<asp:UpdatePanel ID="updPnlReservationDetail" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button id="btnShowPopup" runat="server" style="display:none" />
<ajaxToolKit:ModalPopupExtender ID="mdlPopup" runat="server"
TargetControlID="btnShowPopup" PopupControlID="pnlPopup"
CancelControlID="btnClose"
BackgroundCssClass="modalBackground" />
<asp:DetailsView ID="dvReservationDetail" runat="server" DataSourceID="mainTable" CssClass="detailgrid"
GridLines="None" DefaultMode="Edit" AutoGenerateRows="false" Visible="false" Width="100%">
<Fields>
<asp:BoundField HeaderText="LabName" DataField="labName" ReadOnly="true" />
<asp:TemplateField HeaderText="Email">
<EditItemTemplate>
<asp:TextBox ID="txtEmail" runat="server" Text="Hello" />
</EditItemTemplate>
</asp:TemplateField>
</Fields>
</asp:DetailsView>
<div class="footer">
<asp:LinkButton ID="btnSave" runat="server"
Text="Save" OnClick="BtnSave_Click" CausesValidation="true"
/>
<asp:LinkButton ID="btnClose" runat="server"
Text="Close" CausesValidation="false"
/>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>

maybe you are using <asp:ScriptManager runat="server" /> instead of <ajaxToolKit:ToolkitScriptManager runat="server" />
here's a little example of "normal" usage, just in case
<asp:Button ID="btnShow_ClientSide" runat="server"
Text="show client side" OnClientClick="return false" />
<asp:Button ID="btnShow_ServerSide" runat="server"
Text="show server side" OnClick="btnShow_ServerSide_Click" />
<ajaxToolKit:ModalPopupExtender ID="mdlPopup" runat="server"
TargetControlID="btnShow_ClientSide"
PopupControlID="pnlPopup" CancelControlID="btnHide_ClientSide"
BackgroundCssClass="modalBackground" />
<asp:Panel ID="pnlPopup" runat="server"
BackColor="White" BorderColor="Black">
<asp:Button ID="btnHide_ClientSide" runat="server"
Text="hide client side" OnClientClick="return false" />
<asp:Button ID="btnHide_ServerSide" runat="server"
Text="hide server side" OnClick="btnHide_ServerSide_Click" />
</asp:Panel>
and in the code behind
protected void btnShow_ServerSide_Click(object sender, EventArgs e)
{
mdlPopup.Show();
}
protected void btnHide_ServerSide_Click(object sender, EventArgs e)
{
mdlPopup.Hide();
}

I had a completely different cause of this problem, and here's the solution, which I found on this very helpful walk-through page.
BackgroundCssClass: The name of the CSS class which needs to be applied to the background of the popup. One thing to note here is that if you don’t provide a CSS class then the modal popup will not function like a modal dialog i.e. One will be able to interact with the controls in the back of the popup control, so its imperative to provide a valid CSS class name value to the BackgroundCssClass property. In the above e.g. we have defined a CSS class called “backgroundColor” in the header section of the aspx page. Please note in the CSS class definition we have applied “filter” property to make the background transparent.
I had made a typo in the .css file, which prevented reading the background style. As soon as the CSS was working, the popup became modal and had its proper background.

User control events not getting to their handlers

I am trying to create a user control to wrap around the Membership API (A set of custom Gridviews to display the data better) and, while the code and the controls worked fine in the page, when I moved them to an .ascx, the events stopped firing to it.
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="CustomMembership.ascx.cs" Inherits="CCGlink.CustomMembership" %>
<asp:Panel ID="mainPnl" runat="server">
<asp:Label
id="lblError"
ForeColor="Red"
Font-Bold="true"
runat="server" />
<asp:GridView
id="grdUsers"
HeaderStyle-cssclass="<%# _headercss %>"
RowStyle-cssclass="<%# _rowcss %>"
AlternatingRowStyle-cssclass="<%# _alternatingcss %>"
OnRowUpdating="grdUsers_RowUpdating"
OnRowDeleting="grdUsers_RowDeleting"
OnRowCancelingEdit="grdUsers_cancelEdit"
autogeneratecolumns="false"
allowsorting="true"
AllowPaging="true"
EmptyDataText="No users..."
pagesize="<%# PageSizeForBoth %>"
runat="server">
<!-- ...columns... -->
</asp:GridView>
<asp:Button
id="btnAllDetails"
onclick="btnAllDetails_clicked"
text="Full Info"
runat="server" />
<asp:GridView
DataKeyNames="UserName"
HeaderStyle-cssclass="<%# _headercss %>"
RowStyle-cssclass="<%# _rowcss %>"
AlternatingRowStyle-cssclass="<%# _alternatingcss %>"
id="grdAllDetails"
visible="false"
allowsorting="true"
EmptyDataText="No users in DB."
pagesize="<%# PageSizeForBoth %>"
runat="server" />
<asp:Button
id="btnDoneAllDetails"
onclick="btnAllDetails_clicked"
text="Done."
Visible="false"
runat="server" />
</asp:Panel>
However, none of the events in the first two controls (the gridview grdUsers and the button btnAllDetails) simply do NOT occur, I have verified this in the debugger. If they occured just fine in the aspx page, why do they die on moving to the ascx?
My code in the aspx now is:
<div class="admin-right">
<asp:ScriptManager ID="sm1" runat="server" />
<h1>User Management</h1>
<div class="admin-right-users">
<asp:UpdatePanel ID="up1" runat="server">
<ContentTemplate>
<cm1:CustomMembership
id="showUsers"
PageSizeForBoth="9"
AlternatingRowStylecssclass="alternating"
RowStylecssclass="row"
DataSource="srcUsers"
HeaderStylecssclass="header"
runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
Thanks.

You've not said whether you're building a Web Site or a Web Application - if you're building a web application have you checked that the .designer file has updated properly when you moved the controls into the user control?

http://forums.asp.net/t/1102183.aspx
This explains that there is an issue with ButtonType="Image" in the CommandField. Changing the entry to "Link" fixes this problem.