I am a beginner at ASP.NET and I have a problem maintaining the scroll position of the page after a partial postback of an UpdatePanel. I tried setting MaintainScrollPositionOnPostback="true" in <%# Page Language="C#" ...%> but it didn't do the trick. Please note that I am using (and have to use) FireFox.
Any help would be appreciated. Thank you! Here is my code:
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<asp:HiddenField ID="ClassificationHiddenField" runat="server" />
<asp:HiddenField ID="DateHiddenField" runat="server" />
<table>
<tr>
<td>
<asp:Panel ID="GroupTitlePanel" CssClass="titlePanelBold" BorderStyle="Ridge" runat="server"
Width="400px">
<table id="MainTable">
<tr>
<td align="center" class="style3">
<asp:Label ID="GroupLabel" runat="server">
</asp:Label>
</td>
<td align="center" class="style4">
<asp:Label ID="ReturnLabel" runat="server" Text="Expected Return">
</asp:Label>
</td>
</tr>
</table>
</asp:Panel>
<br />
<asp:Panel ID="GroupMainPanel" runat="server" Width="400px">
</asp:Panel>
</td>
<td width='100px'>
</td>
<td>
</td>
</tr>
</table>
<asp:Panel ID="BottomPanel" runat="server" BorderStyle="Ridge">
<table>
<tr>
<td align="center">
<br />
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" EnablePartialRendering="true"
runat="server">
</asp:ToolkitScriptManager>
<asp:CheckBoxList runat="server" ID="GroupCheckBoxList" RepeatColumns="10" RepeatDirection="Horizontal"
RepeatLayout="Table" AutoPostBack="true" ClientIDMode="AutoID" OnSelectedIndexChanged="GroupCheckBoxList_SelectedIndexChanged">
</asp:CheckBoxList>
</td>
</tr>
<tr>
<td>
<asp:UpdatePanel ID="GroupUpdatePanel" runat="server" Visible="true" UpdateMode="conditional">
<ContentTemplate>
<asp:Panel ID="GroupGraphPanel" runat="server" Visible="true">
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="GroupCheckBoxList" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
</td>
</tr>
</table>
</asp:Panel>
This looks like the answer to your question. As a plus; it appears to work on every browser not just FF.
http://www.c-sharpcorner.com/Blogs/11804/maintain-scroll-position-on-postback-within-updatepanel.aspx
if you are using IE then its very simple just put the code in your
page directive.
<%# Page Language="C#" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default"
MaintainScrollPositionOnPostback="true" %>
but it will not work in Firefox for that you have to add one browser
file into your website
Right click on solution explorer > Add New Item
Select Browser File and add it to App_Browsers folder.
Add MaintainScrollPositionOnPostback capability to this browser file
as written below.
<browsers>
<browser refID="Mozilla">
<capabilities>
<capability name="supportsMaintainScrollPositionOnPostback" value="true" />
</capabilities>
</browser>
</browsers>
Some times this also not work,
Then a simple solution just add a blank Update panel after the grid
and onpostback just put the focus to that update panel it will work in
any browser.
in cs postbackevent updatepanel1.Focus();
If any problem just feel free to ask or any modification reply.
Though I understand that you are not familiar with javascript, still i'm suggesting this answer to you as there is no inbuilt solution for this in .net but you can achieve it with javascript with a work around. Don't worry Javascript ain't tough and is one of the important part of web development. So just give it a try. Might help you.
You can Refer to this Page : Maintaining page scroll position after updatepanel partial postback
<form id="form1" runat="server">
<asp:ScriptManager ID="SM1" runat="server" ScriptMode="Release" />
<script type="text/javascript">
// It is important to place this JavaScript code after ScriptManager1
var xPos, yPos;
var prm = Sys.WebForms.PageRequestManager.getInstance();
function BeginRequestHandler(sender, args) {
if ($get('<%=Panel1.ClientID%>') != null) {
// Get X and Y positions of scrollbar before the partial postback
xPos = $get('<%=Panel1.ClientID%>').scrollLeft;
yPos = $get('<%=Panel1.ClientID%>').scrollTop;
}
}
function EndRequestHandler(sender, args) {
if ($get('<%=Panel1.ClientID%>') != null) {
// Set X and Y positions back to the scrollbar
// after partial postback
$get('<%=Panel1.ClientID%>').scrollLeft = xPos;
$get('<%=Panel1.ClientID%>').scrollTop = yPos;
}
}
prm.add_beginRequest(BeginRequestHandler);
prm.add_endRequest(EndRequestHandler);
</script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server" Height="300">
<%-- Some stuff which would cause a partial postback goes here --%>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
You can set focus on the control you'd like to see on the screen.
e.g if dropdownlist "ddlCity" is the control that causes the postback, then do the following after your dropdownlist SelectedIndexChanged code:
ddlCity.Focus();
I was able to resolve a similar problem with the following hack:
Add HiddenField Control to the page or control you're working in. Be sure to set the ClientIDMode to static so that it is easily accessible in JavaScript. We will use JavaScript to update this control:
<asp:HiddenField ID="scrollPosition" ClientIDMode="Static" runat="server" />
Also Add a panel control as the target to which we will insert some javascript:
<asp:Panel ID="pnlScriptRunner" runat="server"></asp:Panel>
Add the following JavaScript. With the window.onscroll function, we are updating our HiddenField Control. The updateScrollPosition function will be called from our C# code behind:
<script>
window.onscroll = function () {
var ctrl = document.getElementById("scrollPosition");
ctrl.value = document.body.scrollTop;
console.log(ctrl.value);
};
function updateScrollPosition(value) {
window.scrollTo(0, value);
console.log("updating scroll position");
}
</script>
Create a new C# Class and add the following method. This will allow us to insert some Javascript from the code-behind in C#:
public static class ClientScript
{
public static void InsertScript(string script, Control target)
{
HtmlGenericControl s = new HtmlGenericControl();
s.TagName = "script";
s.InnerHtml = script;
target.Controls.Add(s);
}
}
Now, in the code behind of your control or page, call the JavaScript function "updateScrollPosition(value)" with the value from our ASP.NET HiddenField Control by inserting the javascript into pnlScriptRunner with the static class we created:
protected void btnRotate_Click(object sender, EventArgs e)
{
//Do stuff with controls in your update panel here, then:
ClientScript.InsertScript("updateScrollPosition(" + scrollPosition.Value + ");", pnlScriptRunner);
UpdatePanel1.Update();
}
My btnRotate_Click event is registered as a trigger in the update panel:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<b>Image Preview: </b><br />
<asp:Image ID="img" runat="server" CssClass="profileImage" />
<br />
<br />
<asp:Button ID="btnRotate" runat="server" Text="Rotate Image" ClientIDMode="Static" OnClick="btnRotate_Click" />
<br />
<br />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnRotate" />
</Triggers>
</asp:UpdatePanel>
The following references are necessary:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
Hopefully this helps!
Related
I have a very simple application. I am trying to upload the file using File upload control of ASP.net. Below is my entire .cs code and .aspx code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace TestFileUpload1
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void uploadFile_Click(object sender, EventArgs e)
{
if (UploadImages.HasFiles)
{
foreach (HttpPostedFile uploadedFile in UploadImages.PostedFiles)
{
uploadedFile.SaveAs(System.IO.Path.Combine(Server.MapPath("~/Images/"), uploadedFile.FileName));
//listofuploadedfiles.Text += String.Format("{0}<br />", uploadedFile.FileName);
}
}
}
}
}
My .aspx code:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="TestFileUpload1.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test web site</title>
<script src="Scripts/jquery-1.11.0.js"></script>
<script src="Scripts/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div>
<asp:FileUpload runat="server" ID="UploadImages" AllowMultiple="true" />
<asp:Button runat="server" ID="uploadedFile" Text="Upload" OnClick="uploadFile_Click" />
<asp:Label ID="listofuploadedfiles" runat="server" />
</div>
</div>
</form>
</body>
</html>
whenever I try to upload a file, I get "False" for UploadImages.HasFiles.
Above is full working example.
As soon as I remove one of these script tags :
<script src="Scripts/jquery-1.11.0.js"></script>
<script src="Scripts/jquery.mobile-1.4.5.js"></script>
my code starts working and I get "true" for UploadImages.HasFiles when I try to upload a file.
I am using .net framework 4.7.2
I need to keep these two script tags in my code because of the GUI and this is an old application where these tags are used in all the pages.
I also tried to wrap the control in a update panel and that didn't work either. below is the changed .aspx page. although, I want my original code to work. I don't want to use ajax, but I just tried to use it because it is suggested as one of the solution
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="TestFileUpload1.WebForm1" %>
<%--<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp"%>--%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test web site</title>
<script src="Scripts/jquery-1.11.0.js"></script>
<script src="Scripts/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:FileUpload runat="server" ID="UploadImages" AllowMultiple="true" />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="uploadedFile" />
</Triggers>
</asp:UpdatePanel>
<asp:Button runat="server" ID="uploadedFile" Text="Upload" OnClick="uploadFile_Click" />
<asp:Label ID="listofuploadedfiles" runat="server" />
</div>
</div>
</form>
</body>
</html>
below is the image of false value that I am getting in code behind:
Any help will be highly appreciated.
All I had to do is put data-ajax ="false" in form tag and that fixed the issue.
<form id="form1" runat="server" data-ajax ="false">
Use a update panel and wrap your controls inside it. Then add the button controlID as a trigger (be sure its a PostBackTrigger) to the update panel. To test be sure to put a break point on the uploadFile_Click event so you can step through and see the values..
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:PostBackTrigger ControlID="btnSignaureOfRequestor" />
</Triggers>
<ContentTemplate>
<table>
<tr> <td class="tdText" colspan="4">
<asp:FileUpload ID="fileUpload" runat="server" Width="50%" />
</td>
</tr>
<tr>
<td> <asp:Button ID="btnSignaureOfRequestor" runat="server" Text="Submit Request" Visible="true" OnClientClick="return confirm('Are you sure you want to continue?');" OnClick="btnSignaureOfRequestor_Click" />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
Try the below, removed allow multiple and add update mode conditional (see confirm case/syntax of these changes as I'm just writing it in notepad)
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" updateMode="Conditional">
<ContentTemplate>
<asp:FileUpload runat="server" ID="UploadImages" />
<asp:Button runat="server" ID="uploadedFile" Text="Upload" OnClick="uploadFile_Click" />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="uploadedFile" />
</Triggers>
</asp:UpdatePanel>
<asp:Label ID="listofuploadedfiles" runat="server" />
</div>
</div>
Page url: http://advancedmedia.co.il/data.aspx
Code:
<asp:Content ID="Content2" ContentPlaceHolderID="page_content_cp" Runat="Server">
<asp:UpdatePanel runat="server" ID="UP1" UpdateMode="Conditional">
<ContentTemplate>
<section id="page_section">
<div class="data_top">
<ul class="bxslider">
<asp:ListView ID="LV_slider" runat="server" DataSourceID="**">
<ItemTemplate>
<li>
<asp:Image ID="Image11" ImageUrl='<%#XPath("big_image_url") %>' AlternateText="slider" runat="server" />
</li>
</ItemTemplate>
</asp:ListView>
</ul>
</div>
<div class="shaddow"></div>
<div class="data_bottom">
<asp:ListView runat="server" ID="LV_data_bottom" DataSourceID="**">
<ItemTemplate>
<div style="display:inline;">
<asp:LinkButton runat="server" CommandArgument='<%#XPath("big_image_url") %>' ID="LB_thumb" OnClick="lb_thumb1" ><asp:Image runat="server" ID="IMG_img1" ImageUrl='<%#XPath("small_image_url") %>' />
<asp:Label runat="server" CssClass="title" ID="bottom_label" Text='<%#XPath("title") %>'></asp:Label></asp:LinkButton>
</div>
</ItemTemplate>
</asp:ListView>
</div>
</section>
</ContentTemplate>
</asp:UpdatePanel>
<asp:XmlDataSource ID="**" runat="server"
DataFile="~/***/***" XPath="/Data/**/**">
</asp:XmlDataSource>
</asp:Content>
Click on the thumbs "jump" the page.
I dont want the page will "jump"/"refresh" after click on thumb. how can i do that? Maybe i wrong on the place of the updatepanel ?
You can always get it done using updatepanel and microsoft ajax... but there is a better and more lightweight alternative. Use jquery to swap the main image on top when the thumbnails are clicked, without doing a page refresh.
Define a surrounding div for the imain image with id "imageBox"
<img class="thumb" src="image1_thumb.jpg" />
<div id="imageBox"> </div>
then,
$(document).ready(function(){
$('#changeImage').click(function(){
var rel = $(this).attr('rel');
$("#imageBox").html("<img src='image" + rel + ".jpg' />");
})
});
This is both clean and lightweight. no Microsoft ajax panel junk.
I'm not sure about what is your problem here, but if you want to separate the Update Panel into two you can do so.
There's an explanation on how different update panels can trigger themselves.
http://www.asp.net/web-forms/tutorials/aspnet-ajax/understanding-asp-net-ajax-updatepanel-triggers
Used AutoPostBack="false" in listview page can't be refresh ..or used javascript to change the image
Put ScriptManager.
<asp:ScriptManager EnablePartialRendering="true"
ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:Content ID="Content2" ContentPlaceHolderID="page_content_cp" Runat="Server">
<asp:UpdatePanel runat="server" ID="UP1" UpdateMode="Conditional">
<!-- bla bla bla.. -->
Did you try to change the following
UpdateMode="Conditional"
With this?
UpdateMode="Always"
Set ClientIDMode=Auto on the LinkButton.
Everything seems correct.
Here is a sample for Update panel.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication3.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="Updatepanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">LinkButton</asp:LinkButton>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
Code Behind
namespace WebApplication3
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
this.Label1.Text = "change Test 1";
}
protected void LinkButton1_Click(object sender, EventArgs e)
{
this.Label1.Text = "change Test 2";
}
}
}
Simply I have a Dropdownlist with RequiredFieldValidatior in UpdatePanel on a page,
I have enabled autopostback for the dropdownlist.
The problem is that Dropdownlist selectedindex event is not firing.
This unexpected behavior happens when I validate the page and ant error occurs.
I searched a lot but unable to find the solution
my code is as follows:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function ValidateMe() {
if (Page_ClientValidate("vgOption")) {
alert("valid");
}
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="smMain" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="pnlMain" runat="server" ChildrenAsTriggers="true">
<ContentTemplate>
<table border="1" cellpadding="5" cellspacing="0">
<tr>
<td>
Option:
</td>
<td>
<asp:DropDownList runat="server" AutoPostBack="true" ID="Opt" OnSelectedIndexChanged="Opt_SelectedIndexChanged" ValidationGroup="vgOption">
<asp:ListItem Text="--Select Option--" Value="0" />
<asp:ListItem Text="Upload" />
<asp:ListItem Text="Download" />
</asp:DropDownList>
<asp:RequiredFieldValidator ID="rfv" runat="server" ControlToValidate="Opt" Display="None" InitialValue="0" ValidationGroup="vgOption" ErrorMessage="Please select an option"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
Postback:
</td>
<td>
<asp:Label Text="" ID="lblMessage" runat="server" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="button" onclick="return ValidateMe();" value="Test" title="Test" />
<asp:ValidationSummary ValidationGroup="vgOption" runat="server" ShowMessageBox="true" ShowSummary="false" DisplayMode="List" />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
Codebehind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Opt_SelectedIndexChanged(object sender, EventArgs e)
{
lblMessage.Text = "Autopostback: " + DateTime.Now.ToString();
}
}
Steps to repopulate the issue:
1. Click first option in dropdown
2. click on submit button
3. change dropdownlist value (this should fire selectedindex changed event, but it doesn't)
PS: I do not want to postback to happen when the submit button is clicked that is why I added <input> instead of asp.net button,
even if I add asp.net button it doesnt work
Added Page_BlockSubmit = false; in the JS code which was preventing the postback...
<script type="text/javascript">
function ValidateMe() {
if (Page_ClientValidate("vgOption")) {
alert("valid");
}
Page_BlockSubmit = false;
return false;
}
</script>
Reference: http://www.techques.com/question/1-2083929/Dropdownlist-doesn%27t-postback-after-Page_ClientValidate%28%29
replace
<input type="button" value="Test" title="Test" runat="server" validationgroup="vgOption"/>
with
<asp:Button ID="btn" runat="server" Title="Test" Text="Test" ValidationGroup="vgOption" OnClientClick="return ValidateMe()"/>
the issue is solved.
Add property ViewStateMode="Enabled" and EnableViewState="true"
in drop DropDownList
For more details click here
On clicking submit button, if page validation returns false and then changing the drop-down's selected-index will not work for first time. Because on submitting the form it will do Form validation.
If Validation returns false [indicates not to submit the Form], then you can can’t go to server side code.
Since you have used “SelectedstateChanged” event for the Dropdown, the code inside the event handler function will not execute after form validation is returned as false.
So to handle this problem, add onchange="Page_BlockSubmit = false;" :
<asp:DropDownList runat="server" AutoPostBack="true" ID="Opt" OnSelectedIndexChanged="Opt_SelectedIndexChanged"
CausesValidation="false" ValidationGroup="none" onchange="Page_BlockSubmit = false;">
<asp:ListItem Text="--Select Option--" Value="0" />
<asp:ListItem Text="Upload" />
<asp:ListItem Text="Download" />
</asp:DropDownList>
Reference Link http://burnignorance.com/asp-net-developer-tips/dropdownlist-validation-problem-in-asp-net/
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"...
I´m trying to use UpdateProgress with Triggers (see the code bellow) but when a button assigned as an asyncPostBackTrigger is clicked, the UpdateProgress doesn´t work.
If I remove the AssociatedUpdatePanelID property, the UpdateProgress control works. But I want to configure independent UpdateProgress so, I need to specify the
AssociatedUpdatePanelID property of UpdateProgress control.
Is this behaviour as it is supposed to be?
NOTE: I do not want to intercept the Sys.WebForms.PageRequestManager
instance and manipulate the asyncronous request to manually display
and hide the UpdateProgress element. Is there a way to do that?
<%# Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="AjaxExtensionsTest._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" runat="server">
</asp:ScriptManager>
<h2>
Ajax Extensions Test
</h2>
<asp:UpdatePanel ID="up1" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<div id="content">
<asp:TextBox ID="txtDataHora" runat="server"></asp:TextBox>
<asp:UpdateProgress ID="progress1" AssociatedUpdatePanelID="up1" DynamicLayout="true" DisplayAfter="0" runat="server">
<ProgressTemplate>
<div>
<img alt="progress" src="loading.gif" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSubmit" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:Button ID="btnSubmit" Text="Get Current Date/Time" runat="server" onclick="btnSubmit_Click" />
<p>
</p>
</asp:Content>
<script runat="server" language="csharp">
protected void Page_Load(object sender, EventArgs e)
{
ScriptManager1.RegisterAsyncPostBackControl(btnSubmit);
}
protected void btnSubmit_Click(object sender, EventArgs e)
{
txtDataHora.Text = DateTime.Now.ToString("dd/MM/yyyy hh:mm:ss");
System.Threading.Thread.Sleep(2000);
}
</script>
If you need to use AsyncPostBackTrigger and AssociatedUpdatePanelID then your only option is to handle events on the Sys.WebForms.PageRequestManager instance and manually display and hide the UpdateProgress element. There is code out there that runs on the server and injects the necessary JavaScript that could be encapsulated into a control to make doing this quite tidy.