Showing posts with label buttons. Show all posts
Showing posts with label buttons. Show all posts

Wednesday, March 28, 2012

dinamically adding a webuser control to a Modal Pop Up Extender

I have a page that has two buttons and a text box on it. It also has a panel named pnlPopUp and an modalpopupextender which has 'pnlPopUp' as the PopupControlID.

If you Click Button1 it will display webusercontrol1 and if you click button2 it will display webusercontrol2.

Each user control has two buttons on tem (btnOK and btnCancel).

The web user controls are added dinamically to the panel when I click button1 or button2 (using Page.LoadControl("~/WebUserControl.ascx") andpnlPopup.Controls.Add(webusercontrol) );

I am trying to fill the text of teh textbox in the page according to which button is clicked on the pop-up (if I click Ok it writes "OK" in the textbox),

but my button events aren′t firing!


P.S.: If I load the controls in the page′s Page_Load and making them visible when I need them it will work fine but I didn′t want to do that because in my actual web site i will have too many user controls.

Here′s the sample code. (I′m using the exact code for both user controls):

==================== Default.aspx=============================

<%@dotnet.itags.org. Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@dotnet.itags.org. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<%@dotnet.itags.org. Register src="http://pics.10026.com/?src=~/WebUserControl.ascx" TagName="WebUserControl" TagPrefix="wuc" %
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<link rel="stylesheet" href="http://links.10026.com/?link=back.css" type="text/css" media="screen" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" EnableViewState="true">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<asp:Button ID="btnPopup" runat="server" Text="PopUp" />

<input type="hidden" runat="server" id="hdnPopUp" />

<asp:Panel ID="pnlPopUp" runat="server" CssClass="modalPopup">
</asp:Panel>

<cc1:ModalPopupExtender ID="mpeTestePopUp" runat="server" TargetControlID="hdnPopUp"
PopupControlID="pnlPopUp" DropShadow="true" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>

===========================================================

==================== Default.aspx.cs============================

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using AjaxControlToolkit;

public partial class _Default : System.Web.UI.Page
{
WebUserControl ucTestePopUp;

protected void Page_Load(object sender, EventArgs e)
{
}

void Page_Init(object sender, EventArgs e)
{
this.btnPopup.Click += new EventHandler(btnPopup_Click);
}

void btnPopup_Click(object sender, EventArgs e)
{
ucTestePopUp = (WebUserControl)Page.LoadControl("~/WebUserControl.ascx");
this.pnlPopUp.Controls.Add(ucTestePopUp);
this.mpeTestePopUp.Show();
}
}

============================================================

==================== WebUserControl.ascx============================

<%@dotnet.itags.org. Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="WebUserControl" %>
<table>
<tr>
<td>
<asp:Button runat="server" ID="btnSim" Text="Sim" />
</td>
<td>
<asp:Button runat="server" ID="btnNao" Text="Nao" />
</td>
</tr>
</table>

==================================================================

==================== WebUserControl.ascx.cs============================

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class WebUserControl : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
}

void Page_Init(object sender, EventArgs e)
{
this.btnSim.Click += new EventHandler(btnSim_Click);
this.btnNao.Click += new EventHandler(btnNao_Click);
}

protected void btnNao_Click(object sender, EventArgs e)
{
((TextBox)this.Parent.FindControl("txtTeste")).Text = "Clicou N?o";
}

protected void btnSim_Click(object sender, EventArgs e)
{
((TextBox)this.Parent.FindControl("txtTeste")).Text = "Clicou Sim";
}
}

=================================================================

Hi,

to handle events you need a control with an event handler to instantiated. If you only load your user control once in the click event handler, the button (textbox) in your user control does not exist on the page when postback caused by this button in user control is processed at the server.

Therefore, as you said you need to load your user control in page_load to handle events.

However, you don't need to load all controls. You just need to remeber which control was created last time and create this single control. You can store this information in the ViewState property.

Once you handled events from controls insode user control you can safely remove it from the page.

ALSO: You need to assign ID to your dynamically loaded user control. Otherwise, you will occasionally get problems with events firing from the second click.

-yuriy
http://couldbedone.blogspot.com

Digg-Like Button Animation, Easy Way?

Hi,

I've been trying to create a button with fading/morphing effect for a while now (kind of like digg buttons), but so far I'm not very happy with the results.

I almost got there, but not quite. Any help would be appreciated.

I have the buttons inside a Repeater control. So getting the button's client id is not the simplest thing. I also wanted to change the source image of the button (src attribute), this can't be done thru the StyleAction, so I used a Javascript/ScriptAction solution. The solution works greatly for hover effects, but not for client-side click events.

Here's the code (all client-side):

//first the fake button and animation to init everything, I know there are other ways, but this works fine.

<asp:Button EnableViewState="false" ID="FakeTarget" runat="server" Style="display: none" />
<cc1:AnimationExtender ID="aex" runat="server" TargetControlID="FakeTarget" /
//the repeater and the individual updatepanels:
<asp:Repeater ID="rpt" runat="server" OnItemCommand="rpt_ItemCommand" EnableViewState="False" OnItemDataBound="rpt_ItemDataBound">
<ItemTemplate>
<atlas:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:LinkButton id="btn" runat="server" OnMouseOver="attach(this)"/>
</ContentTemplate>
</atlas:UpdatePanel>
</ItemTemplate>
</asp:Repeater
//the javascript code
function attach(v)
{
if (v != null)
{
//scriptaction to execute (basically change the button's image)
var s = "var x = document.getElementById('" + v.id + "');if (x) x.src = 'img/new.gif';";
var effects = new Array();
effects[0] = new AjaxControlToolkit.Animation.FadeOutAnimation(v, .5, 30, .1, 1, false);
effects[1] = new AjaxControlToolkit.Animation.ScriptAction(v, .1, 20, s);
effects[2] = new AjaxControlToolkit.Animation.FadeInAnimation(v, .5, 30, .2, 1, false);

AjaxControlToolkit.Animation.SequenceAnimation.play(v, 0, 24, effects, 1);
return false;
}
}

this works perfectly, but substituting OnMouseOver for OnClientClick messes things up, as I think it's a timing issue with the updatepanel returning too quickly. The only fix I've found so far is force the Server-side Command Event to sleep for the animation time, but I hope there's a more elegant way of doing this.

Thanks,

Alexbump

Could you explain in more detail what the desired effect looks like?

Is there an example of what you want in the web?

Difficult problem with the UpdatePanel and State

Hi,

I have a page with an UpdatePanel that display 5 news story headlines, within the UpdatePanel there are two buttons, back and next, to move the to the next 5 headlines set or to move previous 5 headlines set. Each headline has a link that goes to a new page where the full news story is shown. All this is working great, but if the user is on the second or third set of headlines, then clicks on one of the headlines to go to the page that shows the entire news story, then the user click the back button on the browser to get back to the news story headlines, the news story headlines page will display the first set of news story headlines, not the second or third set where the user originally left from.

How I can let the news story headlines page or the UpdatePanel know on which set the user left the page, so when the user came back via the back browser button, the set they left is displayed?

Hope this makes sense! Thank you.

Please, let me know if I should explain this better or differently, need help with it!

Monday, March 26, 2012

Determine what element caused the Postback when handling the endRequest event

Hi All,

I have an UpdatePanel with 2 buttons. Pressing either of them causes a Postback and the panel gets refreshed.

I'm handling the endRequest event on the client side. Is there a way to determine which of the page elements caused the Postback?

Thanks,

Uzi

Try here:

http://www.eggheadcafe.com/articles/20050609.asp


Hi,

you can determine the postback element on the client side with the PageRequestManager. Attach to the beginRequest event and you can save the postback control. More information here:

http://ajax.asp.net/docs/ClientReference/Sys.WebForms/BeginRequestEventArgsClass/default.aspx

Regards
Marc André


Here is a neat way to get it done:

In the 'BeginRequest' event handler insert the postback element to the UserContext of the WebRequest:

function BeginRequestHandler(sender, args)

{

var elemName = args.get_postBackElement().id;var request = args.get_request();

request.set_userContext(elemName);

}

Then, when the request ends, at the 'EndEvent' get the information from the Response object:

function EndRequestHandler(sender, args)

{

var response = args.get_response();

alert(response._webRequest.get_userContext());

}

Thanks,

Uzi