Showing posts with label event. Show all posts
Showing posts with label event. Show all posts

Wednesday, March 28, 2012

Dynamic controls in Ajax UpdatePanel

I created a dynamic button and want to add the button click event as update panel trigger.
But does not work. Any idea ?
Thanks

String clientID;

protectedvoid Page_Init(object sender,EventArgs e)

{

Button btn =newButton();

btn.Text ="Write Hello";

btn.Click +=newEventHandler(Button1_Click);

Page.Form.Controls.Add(btn);

clientID = btn.ClientID;

}

protectedvoid Button1_Click(object sender,EventArgs e)

{

Label1.Text ="hello";

}

protectedvoid Page_PreRender(object sender,EventArgs e)

{

AsyncPostBackTrigger trigger =newAsyncPostBackTrigger();

trigger.ControlID = clientID;

trigger.EventName ="Click";

UpdatePanel1.Triggers.Add(trigger);

}

Try this instead of your code.

protected void Page_Load(object sender, EventArgs e)
{

Button btn = new Button();
btn.Text = "Write Hello";
btn.ID = "Button1";
btn.Click += new EventHandler(Button1_Click);
UpdatePanel1.ContentTemplateContainer.Controls.Add(btn);
//Page.Form.Controls.Add(btn);
// clientID = btn.ClientID;

AsyncPostBackTrigger trigger = new AsyncPostBackTrigger();
trigger.ControlID = "Button1";
trigger.EventName = "Click";
UpdatePanel1.Triggers.Add(trigger);

}
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "hello";

}


This works. But actually what I want is : when click on the Button1, the the UpdatePanel1 will be hide and a UpdateProgress (with a loading image) will show until the loading complete. And the UpdatePanel1 will show again with some updated info.


Try this code. I dont think its a perfect way. I am using some hack mentioned in

http://dotnetslackers.com/community/blogs/simoneb/archive/2006/09/02/481.aspx

<%@. Page Language="C#" %
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{

Button btn = new Button();
btn.Text = "Write Hello";
btn.ID = "Button1";
btn.Click += new EventHandler(Button1_Click);
UpdatePanel1.ContentTemplateContainer.Controls.Add(btn);
//Page.Form.Controls.Add(btn);
// clientID = btn.ClientID;

AsyncPostBackTrigger trigger = new AsyncPostBackTrigger();
trigger.ControlID = "Button1";
trigger.EventName = "Click";
UpdatePanel1.Triggers.Add(trigger);
}
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "hello";
System.Threading.Thread.Sleep(4000);
}
</script
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID=sc1 runat=server ScriptPath="ScriptLibrary"></asp:ScriptManager>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server"Text="Label"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgressrunat=server AssociatedUpdatePanelID=Updatepanel1 ID=up1DynamicLayout=true DisplayAfter=4 >
<ProgressTemplate>
<table>
<tr>
<td>
Loading......
</td>
</tr>
<tr>
<td>
<img src="http://pics.10026.com/?src=" alt="image" />
</td>
</tr>
</table>
</ProgressTemplate>
</asp:UpdateProgress>
</div>
</form>
</body>
</html>
<script language=javascript>
Sys.Application.add_load(ApplicationLoadHandler)
function ApplicationLoadHandler(sender, args)
{
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(HidePanel);
Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(ShowPanel);
}
function HidePanel(sender, args)
{
for (var j = sender._updatePanelIDs.length - 1; j >= 0; j--)
{
varupdatePanel =document.getElementById(sender._uniqueIDToClientID(sender._updatePanelIDs[j]));
var postbackElement = args.get_postBackElement();
if(updatePanel && updatePanel.contains(postbackElement)) {
updatePanel.style.visibility='hidden';
}
}
}
function ShowPanel(sender, args)
{
var updatedPanels = args.get_panelsUpdating();
for (var j = updatedPanels.length - 1; j >= 0; j--)
{
updatedPanels[j].style.visibility='visible';
}
}
</script>


Is it posible to put the button outside the UpdatePanel ?

UpdatePanel1.ContentTemplateContainer.Controls.Add(btn);

Because I would not want the button to be hide while 'Ajax'.

Thanks

Dynamic controls and problem with UpdateProgress

I dynamically create several LinkButtons, and attach enenthandler for command event, and assign it for triggering Updatepanel. It works, but UpdateProgress doesn't show. I tried to add static button and assign it to updatepanel for triggering, and in this case updateprogress works, so i guess that's everything ok with ajax.

This is code in aspx:

1<asp:PlaceHolder ID="phMenu" runat="server"></asp:PlaceHolder>2<asp:UpdateProgress ID="UpdateProgress1" AssociatedUpdatePanelID="UpdatePanel1" runat="server" DisplayAfter="10">3 <ProgressTemplate>4 <span style="color: #ff0066">5 loading... </span>6</ProgressTemplate>7</asp:UpdateProgress>89<asp:UpdatePanel ID="UpdatePanel1" runat="server" >10<ContentTemplate>11<table width="100%" cellpadding=2 cellspacing=0 border=0>12 <asp:Repeater ID="rptFeeds" runat="server" EnableViewState=false>13 <ItemTemplate>14 <tr>15 <td>16 ... some data from db...17 </td>18 </tr>19 </ItemTemplate>20 </asp:Repeater>21 </table></ContentTemplate>22</asp:UpdatePanel>

code-behind in void OnInit:

1foreach (Category catin list)2{3 Panel pnl =new Panel();4 pnl.ID ="menu_" + cat.Id.ToString() ;5 pnl.CssClass ="menu_item";67 LinkButton lb =new LinkButton();8 lb.CommandArgument = cat.Id.ToString();9 lb.Command +=new CommandEventHandler(Clicked);10 lb.ID="trigger_"+cat.Id.ToString();11 lb.Text = cat.Name;12 lb.CssClass ="menu_a";1314 AsyncPostBackTrigger trigger =new AsyncPostBackTrigger();15 trigger.ControlID ="trigger_" + cat.Id.ToString();16 trigger.EventName ="Command";17 UpdatePanel1.Triggers.Add(trigger);1819 pnl.Controls.Add(lb);20 phMenu.Controls.Add(pnl);21}2223protected void Clicked(object sender, CommandEventArgs e)24{25 ChangeCat(Convert.ToInt32(e.CommandArgument));26}

Can you see why UpdateProgess doesn't work?

Hi,hudo

I think it's a normal issue.

You can set the clientclick property of theDynamic controls to show the UpdateProgess.

Thanks


The problem is that the control you want to trigger the UpdateProgress control is not inside the UpdatePanel.

See my post here:http://smarx.com/posts/why-the-updateprogress-wont-display.aspx for an explanation of why that doesn't work.

Monday, March 26, 2012

Dynamic Accordion with Paging

hi there; using asp.net 2.0 (vb) i've just created a page that, in the page load event, retreives a number of records from the database.

as each record is read into a dataset, a new accordon panel is created. the panel header displays the fldName and the panel content displays the fldContent from the table.

this all works great. the issue i'm having is that it currently displays all the records (approx 200) and i only want 10 records displayed at a time.

my question is, is there somehow a way to implement paging? i found the following article:

http://rolf-cerff.de/blogs/dotnet/archive/2007/03/08/ajax-control-toolkit-paging-with-databound-accordion-control.aspx

but i'm not familiar enough with C# to understand.

also, any idea if paging for the accordion is in the works?

thanks all.

You can use a paged data source...

Basically, create a datatable from your recordset, and then...
Dim pds As New PagedDataSource
pds.DataSource = (whatever then dataset is called).Tables(0).DefaultView
pds.AllowPaging = True
pds.PageSize = 10
pds.CurrentPageIndex = curpage (passed into the databind sub, optional value that = 0 at first)
CurrentPage (see below) = pds.CurrentPageIndex + 1

What I do is to create a viewstate item called CurrentPage to keep track of the pages...
Public Property CurrentPage() As Integer
Get
Dim o As Object = Me.ViewState.Item("_CurrentPage")
If o Is Nothing Then
Return 0
Else
Return o
End If
End Get
Set(ByVal value As Integer)
Me.ViewState.Item("_CurrentPage") = value
End Set
End Property

You can then have linkbuttons to guide through pages... Just rebind using your sub and pass in CurrentPage as the curpage to advance or CurrentPage - 1 to go back.

Dydfunctional behavior of the control HoverMeuExtender

Hi

With the ajax control HoverMenuExtender
i have a problem.


After have launch the page in Internet Explorer
with the onmouseover event on the linkbutton (as opportunely setted)
appears the popup.


The dydfunctional behavior is that
justlaunch the page,
little moments after than it opens the tab,
all the popups relative at the controls HoverMeuExtender
they open for some moments and then they close.
The effect isunpleasant.

Happen at you too?

Here are some sample codes about ajax:HoverMenuExtender for your reference.
<div>
<ul>
<li>
<asp:LinkButton runat="server" id="lnkParent" text="Parent Menu Item"/>
</li>
<asp:panel runat="server" id="pnlChild">
<ul>
<li>Child Item 1</li>
<li>Child Item 2</li>
</ul>
</asp:panel>
<ajax:HoverMenuExtender ID="hoverMenu"
PopupControlID="pnlChild"
TargetControlID="lnkParent"
PopupPosition="Bottom"
runat="server" />
</ul>
</div>
Wish the above can help you.

Saturday, March 24, 2012

DropDownList SelectedIndexChanged event not firing

I have a dropdown list that has many items in it - so in order to reduce viewstate size I have shut off viewstate for that control. But since doing so - the selectedindexchanged event is not firing (I guess because without view state the control does not know if there was a change in the selected value so it can't determine if it should fire the changed event.

Is there any way I can detect this change on the client and fire the selectedindexchanged event on the server?

thanks
Michael

May be you can try to bind the dropdown list in the Page_Init event handler.. Then you do not have to worry about viewstate.. Give it a try..


I tried that but that means everytime there is a postback (async or sync) it has to hit the db to re-populate that list.

I tried keeping track of the previously selected value in viewstate manually to detect a change and it detected the change correctly but I get an event validation error.

thanks
Michael


ok. I guess we are missing the pieces of information here... So you do not care about re-populating the list again? so what is going to be in the list.. after the postback is finished?

What event validation error you are talking about? Do you even care about the SelectIndexChanged event? Or you can simply explain more about what exactly you are trying to do?


I have a drop down list with autopostback = true and when an item is selected an update panel will refresh based on the selected item in the dropdown list. So I don't need to reload the dropdown list once it is loaded initially.

I actually solved the issue by looking at the event source in the forms collection and if it is the dropdown list - I know that the selected item was changed because the dropdown list won't do a postback unless the selected item was changed. I couldn't use the selecteditemchanged event because with the viewstate disabled - the server side does not know if the selected item changed.

I thought I had to store the previously selected item in viewstate to detect if a new item was selected but it turns out that a postback only occurs when the selected item is changed - which makes sense - the browser know that the item was changed - even though the server does not.

thanks
Michael

DropdownList OnSelectedIndexChanged event within ModalPopupExtender

I have aModalPopupExtender with two DropdownLists. I want to populate the second dropdownlist dynamically base on the user selection in the first dropdownlist. Once user selects values from both dropdown lists, then I want to postback the entire page.

But the OnSelectedIndexChanged event of the dropdownlist is not firing whenever the selection is changed.

Is this possible withinModalPopupExtender? Appreciate your help.

You may want AutoPostBack="true" and an UpdatePanel.

Wednesday, March 21, 2012

DropDownList event handler serevr side not called

Hello,

this is driving me crazy, below code does a post back to the server but DropDownList1_SelectedIndexChanged1 is never called on the server !
All other buttons work just fine !
If I remove the drop down list from the trigger, than it is called. What is going on here ?

<asp:dropdownlist id="DropDownList1" runat="server" autopostback="True" onselectedindexchanged="DropDownList1_SelectedIndexChanged1"
width="170px"></asp:dropdownlist>
<asp:updatepanel runat="server" id="upAvailability" updatemode="Conditional">
<ContentTemplate>
<asp:Label id="lbSearchResults" runat="server"/>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btSearch"></asp:AsyncPostBackTrigger>
<asp:AsyncPostBackTrigger ControlID="btNavigateHotels"></asp:AsyncPostBackTrigger>
<asp:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged"></asp:AsyncPostBackTrigger>
</Triggers>
</asp:updatepanel>

Hi

I recreated your page and linked up some events and it works fine. Here is what I ended up with, if you want to compare to yours.

HTML

<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged1" Width="170px">
<asp:ListItem Value="1" Text="option 1"></asp:ListItem>
<asp:ListItem Value="2" Text="option 2"></asp:ListItem>
<asp:ListItem Value="3" Text="option 3"></asp:ListItem>
</asp:DropDownList>
<asp:UpdatePanel runat="server" ID="upAvailability" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="lbSearchResults" runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btSearch" EventName="Click"></asp:AsyncPostBackTrigger>
<asp:AsyncPostBackTrigger ControlID="btNavigateHotels" EventName="Click"></asp:AsyncPostBackTrigger>
<asp:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged">
</asp:AsyncPostBackTrigger>
</Triggers>
</asp:UpdatePanel>
<asp:Button runat="server" ID="btSearch" Text="search" OnClick="btSearch_Click" />
<asp:Button runat="server" ID="btNavigateHotels" Text="navigate hotels" OnClick="btNavigateHotels_Click" />
</form>

Codebehind

protected void Page_Load(object sender, EventArgs e)
{

}
protected void DropDownList1_SelectedIndexChanged1(object sender, EventArgs e)
{
lbSearchResults.Text = DropDownList1.SelectedItem.Text;
}
protected void btSearch_Click(object sender, EventArgs e)
{
lbSearchResults.Text = "Search";
}
protected void btNavigateHotels_Click(object sender, EventArgs e)
{
lbSearchResults.Text = "Navigate Hotels";
}

All the events fire correctly. When I attached to the aspnet_wp I could step through the events, and the label control reflected the text I wrote into it.

I even tried calling DataBind() on the DropDownList to see if that killed the event, but it still worked.

I bet thats even more frustrating? :)

Could you post more of your code/page so i can replicate exactly what you have?

Thanks

PaulTAG


Paul.

thanks for your great help on this. I worked around the problem by calling the event handler myself via checking the __EVENTTARGET of the form.

It is very weird because if I add another drop down list this one gets called ! Looking into the Forms collection on the server I cant find the method names there, also not for the buttons which do work (meaning I do not find any Button1_Click in any form value). How does this work, how does ASP know what method to call on the server ? I could than see why this is not happening in my case

Thanks

Joe

DropDownList causes a full page postback instead of only updating the UpdatePanel

I have a code for updating a DropDownList with items whenever another DropDownList triggers a SelectedIndexChanged event.

When I select an item in the DDLSelect dropdown, it causes a full page postback instead of just updating the UpdatePanel. This problem only occurs when I try to implement it in an existing project, and it works fine when if I try it in a new project.

I've updated my Web.config file to make my project compatible with AJAX, so I don't believe that's the problem.

I should add that I'm trying to use this inside an ascx UserControl file, so maybe there are known issues there.

Thanks in advance.

Please post the usercontrol code

OK, problem solved!

It was the Web.config after all. I had this line which caused the problem:

<

xhtmlConformancemode="Legacy"/>

I removed it and everything is fine.

Cheers.