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
}
Related
SelectedIndexChanged event of dropDownList not firing in Update Panel and also set AutoPostBack="true".
Below is my Design Code:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DropDownList ID="ddl_TypeofCampaign" runat="server" CssClass="form-control" AutoPostBack="true" OnSelectedIndexChanged="ddl_TypeofCampaign_SelectedIndexChanged" AppendDataBoundItems="true" ViewStateMode="Enabled" EnableViewState="true" >
<asp:ListItem Text="Select" Value="0"></asp:ListItem>
<asp:ListItem Text="Email" Value="Email"></asp:ListItem>
<asp:ListItem Text="SMS" Value="SMS"></asp:ListItem>
<asp:ListItem Text="Voice SMS" Value="Voice SMS"></asp:ListItem>
</asp:DropDownList>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1"
DisplayAfter="1">
<ProgressTemplate>
<div id="IMGDIV" runat="server" align="center" style="visibility: visible; vertical-align: middle; position: absolute; background-color: #fafbf6"
valign="middle">
<asp:Image ID="Image001" runat="server" ImageUrl="~/assets/img/ajax-loader.gif" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>
</asp:UpdatePanel>
Code behind:
protected void ddl_TypeofCampaign_SelectedIndexChanged(object sender, EventArgs e)
{
Thread.Sleep(2000);
FillTemplates();
btn_Preview.Visible = false;
}
My page Load code.
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
FillGrid();
FillTypeofSourcing();
FillCampaignNames();
FillTemplates();
}
}
Fill Template method where I am getting templates name base on selection.
protected void FillTemplates()
{
if (ddl_TypeofCampaign.SelectedItem.ToString() != "Select")
{
bo.Para1 = ddl_TypeofCampaign.SelectedItem.ToString();
bo.Para2 = "Stage1";//StageValue in TemplateMasterInfo Table
DataTable dt = bl.Get_Templates(bo);
ddl_TypeofTemplateName.DataSource = dt;
ddl_TypeofTemplateName.DataTextField = "TemplateName";
ddl_TypeofTemplateName.DataValueField = "TemplateId";
ddl_TypeofTemplateName.Items.Clear();
ddl_TypeofTemplateName.Items.Add(new ListItem("Select", "0"));
ddl_TypeofTemplateName.DataBind();
}
else
{
ddl_TypeofTemplateName.Items.Clear();
ddl_TypeofTemplateName.Items.Add(new ListItem("Select", "0"));
ddl_TypeofTemplateName.DataBind();
}
}
In Page Tag I mention viewStateEncryptionMode="Never" and I am using Visual Studio 2013. Below is my Page Tag details.
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="ViewCandidate.aspx.cs" Inherits="ViewCandidate" validateRequest="false" enableEventValidation="false" viewStateEncryptionMode="Never" %>
Try to add Trigger to your Update Panel like shown as below
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddl_TypeofCampaign"
EventName="SelectedIndexChanged" />
</Triggers>
UPDATE
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers> //this is missing in your code posted
<asp:AsyncPostBackTrigger ControlID="ddl_TypeofCampaign" EventName="SelectedIndexChanged" />
</Triggers>
<ContentTemplate>mydropcode </ContentTemplate> </asp:UpdatePanel>
I was working on AsyncPostback trigger which is working fine when I type url
localhost:49208/default.aspx
but when I remove default.aspx from url event handler not call.
here is my code
<asp:UpdatePanel ID="UPCompanyNews" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
<div id="ComUploaderImgDiv" class="cr-lodr" runat="server">
<asp:Image ID="ComUploaderImg" runat="server" ImageUrl="~/Images/busy.gif" />
</div>
<div id="ComCarouselDiv" style="background-color: #FFFFFF;" runat="server">
<carousel:CompanyNews ID="CarouselCompanyNews" runat="server" EnableViewState="true" />
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="hiddenComNewsAsyTrigger" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:Button ID="hiddenComNewsAsyTrigger" runat="server" Text="AsyncUpdate" Style="display: none;" OnClick="LoadCompanyCarouselTrigger" />
event handler code
protected void LoadCompanyCarouselTrigger(object sender, EventArgs e)
{
try
{
CarouselCompanyNews.LoadCompanyNewsCarousel();
ComUploaderImgDiv.Style["display"] = "none";
ComCarouselDiv.Style["display"] = "block";
LoadClientActivityTrigger();
LoadMyStatTrigger(sender, e);
LoadEventTrigger(sender, e);
}
catch (Exception ex)
{
throw ex;
}
}
I am currently using a multiview control within a web forms user control page, navigating between views, our data does not persist.
Three view, last view contains a summary of what was entered within the first two view, If I click through to the summary view on ly data from the seconds view is available.
Clicking back and forth between views, our form data is lost.
Any ideas where to begin?
.ascx Page
<asp:MultiView ID="MultiView1" ActiveViewIndex="0" EnableViewState="true" runat="server">
<asp:View ID="View1" runat="server">
Name:<br />
<asp:TextBox ID="txtName" runat="server" />
</asp:View>
<asp:View ID="View2" runat="server">
Surname:<br />
<asp:TextBox ID="txtSurname" runat="server" />
</asp:View>
<asp:View ID="View3" runat="server">
<b>Summary</b><br />
Name:
<asp:Label ID="lblName" runat="server" /><br />
Surname:
<asp:Label ID="lblSurname" runat="server" /><br />
</asp:View>
</asp:MultiView>
<asp:Button ID="btnBack" runat="server" Text="< Back " OnClick="btnBack_Click" />
<asp:Button ID="btnNext" runat="server" Text="Next >" OnClick="btnNext_Click" />
<asp:Button ID="btnSend" runat="server" Text="Submit" OnClick="btnSend_Click" />
ascx.cs Codebehind
protected void btnBack_Click(object sender, EventArgs e)
{
MultiView1.ActiveViewIndex--;
}
protected void btnNext_Click(object sender, EventArgs e)
{
MultiView1.ActiveViewIndex++;
}
protected void btnSend_Click(object sender, EventArgs e)
{
}
protected override void OnPreRender(EventArgs e)
{
if (MultiView1.ActiveViewIndex == MultiView1.Views.Count - 1)
{
FillSummary();
}
btnBack.Visible = MultiView1.ActiveViewIndex > 0;
btnNext.Visible = MultiView1.ActiveViewIndex < MultiView1.Views.Count - 1;
btnSend.Visible = MultiView1.ActiveViewIndex == MultiView1.Views.Count - 1;
base.OnPreRender(e);
}
private void FillSummary()
{
lblName.Text = txtName.Text;
lblSurname.Text = txtSurname.Text;
}
I am facing a problem. I place a control ascx at aspx page. At aspx page i am using UpdatePanel. And at ascx page i use a Formview. In Formview <InsertItemTemplate> i use a control asp:FileUpload for File upload. After Selecting file, when i check FileUpload.HasFile it gives me false always. I try to fire <Triggers> but not
success because file upload is on my ascx page. In below example i am showing my problem parts.
code
FileUpload _fileUpload = FormView1.FindControl("FileUpload1") as FileUpload;
if (_fileUpload != null && _fileUpload.HasFile)
{
/// some code i write here
}
ASPX
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true" UpdateMode="Always">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="GridView1" />
<asp:PostBackTrigger ControlID="imagAddNew" />
<asp:AsyncPostBackTrigger ControlID="EditProduct1" />
<asp:PostBackTrigger ControlID="ImageButton1" />
</Triggers>
<ContentTemplate>
<asp:Panel ID="pnl_grid" Style="width: 100%; overflow: auto;" runat="server">
<uc1:EditProduct ID="EditProduct1" runat="server" />
</asp:Panel>
ASCX
<asp:FormView ID="FormView1" runat="server" Width="100%" ondatabinding="FormView1_DataBinding">
<InsertItemTemplate>
<table>
<tr>
<td class="label-col">
Image
</td>
<td class="data-col">
<asp:FileUpload ID="FileUpload1" runat="server" />
</td>
<td>
<asp:ImageButton ID="ImageButton1" runat="server" CausesValidation="True" CommandName="Insert"
ImageUrl="~/images/save.gif" ValidationGroup="Inser" />
</td>
</tr>
</table>
</InsertItemTemplate>
</asp:FromView>
try this 100% working
Here Your FileUpload Control is Nested Inside the FormView so i find that control ImageButton and then added PostBackTrigger to that control. So you can Apply Same logic to GridView,Repeater,DataList,etc and your can use either ToolScriptManager
or ScriptManager to Register a PostBackControl
use Image Button like this
<asp:ImageButton ID="ImageButton1" runat="server"
OnClick="ImageButton1_OnClick" CausesValidation="True" CommandName="Insert"
ImageUrl="~/images/save.gif" ValidationGroup="Inser" />
in Your .aspx page where your are importing user control on page load use this
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
FormView ProductsFormView = (FormView)EditProduct1.FindControl("ProductsFormView");
FindAllTextBoxes(ProductsFormView);
}
}
private void FindAllTextBoxes(Control parent)
{
foreach (Control c in parent.Controls)
{
if (c.GetType().ToString() == "System.Web.UI.WebControls.ImageButton")
{
ImageButton ImageButton1 = (ImageButton)c.FindControl("ImageButton1");
if (ImageButton1 != null)
{
ToolScriptManager1.RegisterPostBackControl(ImageButton1);
//or ScriptManager.RegisterPostBackControl(ImageButton1);
}
}
if (c.Controls.Count > 0)
{
FindAllTextBoxes(c);
}
}
}
protected void ImageButton1_OnClick(object sender, EventArgs e)
{
ImageButton ImageButton1 = (ImageButton)sender;
FormViewRow row = (FormViewRow)ImageButton1.Parent.Parent;
FileUpload FileUpload1 = (FileUpload)row.FindControl("FileUpload1");
if (FileUpload1.HasFile)
{
}
}
if You are using ContentPlace Holder with Master page then
ContentPlaceHolder ContentPlaceHolder1 = (ContentPlaceHolder)this.Master.FindControl("ContentPlaceHolder1");
ToolkitScriptManager ToolScriptManager1 = (ToolkitScriptManager)ContentPlaceHolder1.FindControl("ToolScriptManager1");
ToolScriptManager1.RegisterPostBackControl(ImageButton1);
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
}