We Keep Coding

Why no render partial with UpdatePanel?

I need partial render with ajax; I don't know what is wrong. ¿What is the problem?
My code:
ascx
<div id="temasatratar" onclick="__doPostBack('UpdatePanel1', '');"><h1>Temas a tratar</h1></div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" OnLoad="UpdatePanel1_Load">
<ContentTemplate>
<asp:Label runat="server" ID="Label1" />
</ContentTemplate>
</asp:UpdatePanel>
ascx.cs
protected void UpdatePanel1_Load(object sender, EventArgs e)
{
Random rnd = new Random();
int number = rnd.Next(0, 99999);
Label1.Text = "Best "+number;
}
Any suggest?
My application: Sharepoint - Visual web part / C# / Asp.Net / Visual Studio

I would use a fake-button that is invisible as trigger for the UpdatePanel:
<div id="temasatratar" onclick="__doPostBack('fakeButton', '');"><h1>Temas a tratar</h1></div>
<asp:LinkButton ID="fakeButton" style="display:none" runat="server" Text="foo" OnClick="fakeButton_Click" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" OnLoad="UpdatePanel1_Load">
<ContentTemplate>
<asp:Label runat="server" ID="Label1" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="fakeButton" />
</Triggers>
</asp:UpdatePanel>
Now this click-event is handled in an async postback when the user clicks on the div.
protected void fakeButton_Click(Object sender, EventArgs e)
{
// you are in an asynchronous postback now
}

Calling a method from a AsyncFileUpload's UploadedComplete isn't working as expected

I have an AsyncFileUpload control that should show a panel and set some text when the upload completes successfully. When I debug it, the event fires and I see that the method is called correctly, but the form doesn't update.
Here's the markup:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="well well-large">
<form class="navbar-form pull-left">
<ajaxToolkit:AsyncFileUpload runat="server" class="search-query" ID="AsyncFileUpload" Width="400px"
UploadingBackColor="AppWorkspace" ThrobberID="myThrobber" CompleteBackColor="#068712" OnUploadedComplete="AsyncFileUpload_UploadedComplete" />
<br />
</form>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="AsyncFileUpload" EventName="UploadedComplete" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdatePanel ID="panAlertUpdatePanel" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:Panel runat="server" ID="panAlert" Visible="false">
<div class="alert alert-success" id="divAlert" runat="server">
<button id="Button1" runat="server" type="button" class="close" data-dismiss="alert">×</button>
You shouldn't see this message!
</div>
<asp:Panel runat="server" ID="panMarquee" Visible="true">
<div id="Div1" runat="server" class="progress progress-success progress-striped">
<div id="ProgressBar" runat="server" class="bar" style="width: 100%"></div>
</div>
</asp:Panel>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
And here's the server code:
protected void AsyncFileUpload_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{
if (AsyncFileUpload.HasFile)
{
this.SetMessage(Message.Success);
}
else
{
this.SetMessage(Message.Fail);
}
}
#endregion
#region Miscellaneous
private enum Message { Success, Fail }
private void SetMessage(Message msg)
{
if (msg == Message.Success)
{
this.divAlert.InnerText = "Well done! The document appears to have uploaded successfully. Please wait...";
this.divAlert.Attributes.Add("class", "alert alert-success");
}
else
{
this.divAlert.InnerText = "Oh snap! Something broke. Please contact IT right away.";
this.divAlert.Attributes.Add("class", "alert alert-error");
}
this.panAlert.Visible = true;
this.panAlertUpdatePanel.Update();
}
It was working just fine when I was using a button as the trigger, but not when I changed it to just the AsyncFileUpload control.
Any ideas?

ASP.NET Update Panel Not Working Inside Web User Control

I have created a html5 canvas and javascript signature pad that I would like to implement as a web user control with an update panel to handle the button clicks. For some reason if I add the update panel and signature pad controls directly into the aspx file the auto postback events work but when I place the same code into a web user control the fields (canvas, buttons, divs, etc) appear but the auto postback no longer works. In both cases I am placing my script manager above the update panel.
Here's my ascx code:
<%# Control Language="C#" AutoEventWireup="true" CodeFile="Signature_Pad.ascx.cs" Inherits="Controls_Signature_Pad" %>
<asp:UpdatePanel runat="server" ID="signatureUpdate" updatemode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger controlid="signatureApprove" eventname="Click" />
<asp:AsyncPostBackTrigger controlid="sigClear" eventname="Click" />
<asp:AsyncPostBackTrigger controlid="sigCancel" eventname="Click" />
</Triggers>
<ContentTemplate>
<fieldset id="SignatureFieldSet" runat="server" style=" border: 1 solid black;">
<p><asp:Label ID="signatureTextLabel" AutoPostBack="true" runat="server" Text=""></asp:Label></p>
<div id="canvasDiv" style="height: 300px; border:0px solid #000000; ">
<canvas id="canvasSignature" style="border:1px solid #000000;"></canvas>
</div>
<div id="sigButtonDiv" style=" border:0px solid #000000;">
<br /><br />
<asp:Button AutoPostBack="true" runat="server" OnClick="OnApprove" ID="signatureApprove" Text="Approve" />
<asp:Button AutoPostBack="true" runat="server" OnClick="OnClear" ID="sigClear" Text="Clear" />
<asp:Button AutoPostBack="true" runat="server" OnClick="OnCancel" ID="sigCancel" Text="Cancel" />
</div>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
Here's my ascx code behind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Controls_Signature_Pad : System.Web.UI.UserControl
{
private string signatureData;
private string signatureText;
public string SignatureData
{
get { return signatureData; }
set { signatureData = value; }
}
public string SignatureText
{
get { return signatureText; }
set { signatureText = value; }
}
public void OnApprove(object sender, EventArgs e)
{
UtilityClass.showMessageBox("Approve Clicked", this);
SignatureText = "Approved Clicked";
}
public void OnClear(object sender, EventArgs e)
{
UtilityClass.showMessageBox("Clear Clicked", this);
SignatureText = "Clear Clicked";
}
public void OnCancel(object sender, EventArgs e)
{
UtilityClass.showMessageBox("Cancel Clicked", this);
SignatureText = "Cancel Clicked";
}
public void Page_Load(object sender, EventArgs e)
{
signatureTextLabel.Text = signatureText;
}
}
Here's my relevant aspx:
...
<%# Register TagPrefix="mjt" TagName="SignaturePad" Src="~/Controls/Signature_Pad.ascx" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<asp:ScriptManager ID="ScriptManager" runat="server" EnablePartialRendering="true" EnablePageMethods="true"></asp:ScriptManager>
<mjt:SignaturePad ID="SignaturePad" runat="server" Visible="true" SignatureData="" SignatureText="Test Signature Test." />
...

Adding event handlers in the code behind fixed the problem. Here's my code:
The control had three buttons that needed to trigger events (Approve, Clear, and Canceled).
In ascx.cs:
public event EventHandler Approved;
public event EventHandler Cleared;
public event EventHandler Canceled;
protected void signatureApprove_clicked(object sender, EventArgs e)
{
if(Approved != null)
Approved(this, EventArgs.Empty);
}
protected void sigClear_clicked(object sender, EventArgs e)
{
if (Cleared != null)
Cleared(this, EventArgs.Empty);
}
protected void sigCancel_clicked(object sender, EventArgs e)
{
if (Canceled != null)
Canceled(this, EventArgs.Empty);
}
In ascx:
<asp:UpdatePanel runat="server" ID="signatureUpdate" updatemode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger controlid="signatureApprove" eventname="Click" />
<asp:AsyncPostBackTrigger controlid="sigClear" eventname="Click" />
<asp:AsyncPostBackTrigger controlid="sigCancel" eventname="Click" />
</Triggers>
<ContentTemplate>
<fieldset id="SignatureFieldSet" class="fieldSetStyle" >
<p><asp:Label ID="signatureTextLabel" AutoPostBack="true" runat="server" Text=""></asp:Label></p>
<div id="canvasDiv" runat="server" >
<canvas id="canvasSignature" class="canvasStyle"></canvas>
</div>
<div id="sigButtonDiv">
<br />
<asp:Button AutoPostBack="true" runat="server" OnClick="signatureApprove_clicked" ID="signatureApprove" Text="Approve" CssClass="buttonStyle" />
<asp:Button AutoPostBack="true" runat="server" OnClick="sigClear_clicked" ID="sigClear" Text="Clear" CssClass="buttonStyle"/>
<asp:Button AutoPostBack="true" runat="server" OnClick="sigCancel_clicked" ID="sigCancel" Text="Cancel" CssClass="buttonStyle"/>
</div>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
In aspx:
<mjt:SignaturePad OnApproved="Signature_Approved" OnCanceled="Signature_Canceled" OnCleared="Signature_Cleared" ID="SignaturePad" runat="server" />
In aspx.cs:
protected void Signature_Approved(object sender, EventArgs e)
{
//Do signature approved action
}
protected void Signature_Canceled(object sender, EventArgs e)
{
//Do signature cancel action
}
protected void Signature_Cleared(object sender, EventArgs e)
{
//Do signature cleared action
}

post back of Dropdownlist in web user control all other fields become empty

i have a aspx page in which i have placeholder inside the panel
as
<div>
<div>
<div>
<div>
<div>
<div>
<asp:UpdatePanel runat="server" ID="UpdatePanelLinks">
<ContentTemplate>
<center>
<asp:Button Text="ADD" ID="btnAdd" runat="server" Width="100" OnClick="btnAdd_Click" />
<asp:Button Text="Edit" ID="btnEdit" runat="server" Width="100" OnClick="btnEdit_Click" />
<asp:Button Text="Delete" ID="btnDelete" runat="server" Width="100" OnClick="btnDelete_Click" /></center>
<asp:LinkButton ID="usercontroldata" runat="server" Text="Branches"
OnClick="usercontrol_Click"></asp:LinkButton>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
<div >
<asp:LinkButton ID="lnkDepartments" runat="server" Text="Departments" OnClick="lnkDepartments_Click"></asp:LinkButton>
</div>
<div >
</div>
<div >
<asp:LinkButton ID="lnkProjects" runat="server" Text="Projects" OnClick="lnkProjects_Click"></asp:LinkButton>
</div>
<div >
</div>
<div >
</div>
</div>
<div>
<div>
<asp:Label Text="" Visible="false" ID="lblmessage" runat="server" />
<div>
<asp:UpdatePanel ID="UpdatePanel" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="lnkBranches" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="lnkDepartments" />
<asp:AsyncPostBackTrigger ControlID="lnkProjects" />
<asp:AsyncPostBackTrigger ControlID="btnAdd" />
<asp:AsyncPostBackTrigger ControlID="btnEdit" />
<asp:AsyncPostBackTrigger ControlID="btnDelete" />
</Triggers>
<ContentTemplate>
<asp:Panel runat="server" ID="MainPanel">
<div class="padding_branch">
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</div>
</div>
</div>
</div>
<asp:UpdatePanel ID="UpdatePanel" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="lnkBranches" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="lnkDepartments" />
<asp:AsyncPostBackTrigger ControlID="lnkProjects" />
<asp:AsyncPostBackTrigger ControlID="btnAdd" />
<asp:AsyncPostBackTrigger ControlID="btnEdit" />
<asp:AsyncPostBackTrigger ControlID="btnDelete" />
</Triggers>
<ContentTemplate>
<asp:Panel runat="server" ID="MainPanel">
<div >
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
and on the aspx.cs page i am dynamically add the web user control on click of links
and on the add button click the new user control is loaded
protected void usercontrol_Click(object sender, EventArgs e)
{
if (ViewState["controlname"] != null)
{
PlaceHolder pl = MainPanel.FindControl(ViewState["controlname"].ToString()) as PlaceHolder;
if (pl.Controls.Count > 0)
{
pl.Controls.RemoveAt(0);
}
}
Control uc = (Control)Page.LoadControl("~/usercontrol_Data.ascx");
ViewState["path"] = "~/usercontrol_Data.ascx";
ViewState["controlname"] = "PlaceHolder1";
ViewState["name"] = "usercontrol";
PlaceHolder1.Controls.Add(uc);
}
i am also mainaining the web user control on Page_Load
if (Page.IsPostBack)
{
if (ViewState["path"] != null)
{
Control uc1 = (Control)Page.LoadControl(ViewState["path"].ToString());
PlaceHolder pl = MainPanel.FindControl(ViewState["controlname"].ToString()) as PlaceHolder;
pl.Controls.Add(uc1);
}
}
and there is dropdown list on the form user control when iam selecting any of the option from the user control it post back and all the other fields become empty for textboxes etc . this happans for the first time and for next time all the fields retain there values
please help
thanks

i have done this by assigning the same ID to the control every time when the control loads dynamically. this is because when the control added dynamically every time it get the new ID that is creating the problem for me
uc1.ID="Web_User_Control_ID";
every time the control load asign this ID to it will resole the problem

Try changing Page.IsPostBack to !Page.IsPostback in your Page_Load event.

Dynamically added controls are not persisted between post backs; you have to re-add your dynamically added controls on each post back. On each page request, asp.net will parse your aspx file, build the html structure of your page, then fill in any previously filled-in values via ViewState and posted values, then serve it up. That's it. It will never automatically re-add dynamically added content.
So once you run this code
protected void usercontrol_Click(object sender, EventArgs e)
{
//...
Control uc = (Control)Page.LoadControl("~/usercontrol_Data.ascx");
ViewState["path"] = "~/usercontrol_Data.ascx";
ViewState["controlname"] = "PlaceHolder1";
ViewState["name"] = "usercontrol";
PlaceHolder1.Controls.Add(uc);
}
you need to somehow know to re-run it every time the user posts back

ASP.NET: ModalPopupExtender prevents button click event from firing

Here is what I'm trying to do: Click a button on my page, which in turn makes (2) things happen:
Display a ModalPopup to prevent the user from pressing any buttons or changing values
Call my code behind method, hiding the ModalPopup when finished
Here is the ASP markup:
<asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="true"
UpdateMode="Always">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSaveData" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Panel ID="pnlHidden" runat="server" style="display: none;">
<div>
<h1>Saving...</h1>
</div>
</asp:Panel>
<cc1:ModalPopupExtender ID="modalPopup"
BackgroundCssClass="modalBackground" runat="server"
TargetControlID="btnSaveData" PopupControlID="pnlHidden"
BehaviorID="ShowModal">
</cc1:ModalPopupExtender>
<asp:Button ID="btnSaveData" runat="server" Text="Save Data"
OnClick="btnSaveData_Click" />
</ContentTemplate>
</asp:UpdatePanel>
Now, here is my code behind C# code:
protected void btnSaveData_Click(object sender, EventArgs e)
{
UpdateUserData(GetLoggedInUser());
modalPopup.Enabled = false;
}
Why doesn't this work? The ModalPopup displays perfectly, but the btnSaveData_Click event NEVER fires.
UPDATE: The first suggestion did not work for me. I also tried your second suggestion (insofar as it applied to me). One minor difference on my end is that there is no button on my modal panel (pnlHidden) -- it's just a message. I did try using Javascript events on the client side, which at least did fire concurrently with my server-side event. This was good news, but I can't seem to find or grab a handle on the ModalPopupExtender or its BehaviorID. This doesn't work:
function showOverlay() {
var popup = $find('modalPopup');
popup.show();
}
popup is ALWAYS equal to null.
FINAL UPDATE: This is my final solution for getting this to work (Take specific note of the use of OnClientClick AND OnClick):
<asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="true"
UpdateMode="Always">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSaveData" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Panel ID="pnlHidden" runat="server" style="display: none;">
<div>
<h1>Saving...</h1>
</div>
</asp:Panel>
<cc1:ModalPopupExtender ID="modalPopup"
BackgroundCssClass="modalBackground" runat="server"
TargetControlID="hdnField" PopupControlID="pnlHidden"
BehaviorID="ShowModal">
<asp:HiddenField ID="hdnField" runat="server" />
</cc1:ModalPopupExtender>
<asp:Button ID="btnSaveData" runat="server" Text="Save Data"
OnClientClick="showModal();" OnClick="btnSaveData_Click" />
</ContentTemplate>
</asp:UpdatePanel>
Using this Javascript function:
function showModal() { $find('ShowModal').show(); }
... And this code behind:
protected void btnSaveData_Click(object sender, EventArgs e)
{
UpdateUserData(GetLoggedInUser());
modalPopup.hide();
}

Try this.
Create a dummy hidden field:
<asp:HiddenField ID="hdnField" runat="server" />
Set the TargetcontrolID = "hdnField" in your Modal Popup declaration.
In your btnSaveData_Click event, do this:
modalPopup.Show();

Try this. It is 100% working
<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>
Server side code
protected void Btnshow_Click(object sender, EventArgs e)
{
ModalPopupExtender1.Show();
}
protected void BtnHide_Click(object sender, EventArgs e)
{
ModalPopupExtender1.Hide();
}

First attempt: Try to set your ButtonID into OkControlID Tag and try again
OR
Second attempt: Call your event over javascript there seems to be some problems with click events
<div>
<cc1:ModalPopupExtender PopupControlID="Panel1"
ID="ModalPopupExtender1"
runat="server" TargetControlID="LinkButton1" OkControlID="Ok"
OnOkScript="__doPostBack('Ok','')">
</cc1:ModalPopupExtender>
<asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
</div>
<asp:Panel ID="Panel1" runat="server">
<asp:Button ID="Ok" runat="server" Text="Ok" onclick="Ok_Click" />
</asp:Panel>

From this example you can easily control panel show up depends on conditions instead of just immediately show up panel once you click button.
<asp:Button ID="btnAdd" runat="server" OnClick="btnAdd_Click"/>
<asp:HiddenField ID="hdnField" runat="server" />
<ajaxToolkit:ModalPopupExtender runat="server"
TargetControlID="hdnField"
ID="btnAdd_ModalPopupExtender"
PopupControlID="pnlPrintName">
</ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="pnlPrintName" runat="server">
.
.
</asp:Panel>
//Server side code:
protected void btnAdd_Click(object sender, EventArgs e)
{
if( dt.Rows.Count == 0 )
{
btnAdd_ModalPopupExtender.Show();
}
else
{
add();
}
}

In code behind, you can do this:
if (true)
{
var script = #"Sys.Application.add_load(function() { $find('behavoirIDModal').show(); });";
ScriptManager.RegisterStartupScript(this, GetType(), "Show", script, true);
}
Change this 'behavoirIDModal'