Showing posts with label usercontrols. Show all posts
Showing posts with label usercontrols. Show all posts

Saturday, March 24, 2012

Trigger PostBack to an UpdatePanel from a separate UserControl?

Hi,

I like putting stuff in separate usercontrols, since i do a lot of gridview templatefields and putting several of these gridviews in one page messes up my .aspx. with user controls, i can just worry about the layout and design on my .aspx pages.

i have one problem though with my new personal approach,

example is i created a "Picture Gallery" site:

1. I put a FileUpload Control (which does NOT work in an UpdatePanel), a button that contains upload tasks (save file, add records to sql db), and an SQLDataSource control, in an AjaxControlToolkit ModalPopup. I then put them all in a UserControl, ill call it Upload.ascx.

2. I create another UserControl, which i shall call Gallery.ascx. This contains a DataList control, that displays the pictures and relative info from the sql db. DataList is connected to an SQLDataSource control. I put them in an UpdatePanel, so i can add an UpdateProgress control.

3. I then put Upload.ascx and Gallery.ascx in my Default.aspx

Ok it works fine, File uploads, records get inserted to the sql database, ModalPopup works! I have one major problem though, everytime I press the Upload Button from Upload.ascx, I need to call DataList.DataBind() from Gallery.ascx's Page_Load event, or simply UpdatePanel.Update(), since it will cause Page_Load to fire from Gallery.ascx UserControl. How do I do this?

Hi,wreck_of_u

We have a few cases were we use a button on our pages that aren't visible, and they are being programatically clicked to refresh our page.

Do it like this:

PageA.aspx:

<%@. Page Language="C#" %>

<%@. Register src="http://pics.10026.com/?src=Gallery.ascx" TagName="Gallery" TagPrefix="uc1" %>
<%@. Register src="http://pics.10026.com/?src=Upload.ascx" TagName="Upload" TagPrefix="uc2" %>

<!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)
{
Upload1.Button1clientID = Gallery1.Button1clientID;
}
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

</div>
<uc1:Gallery ID="Gallery1" runat="server" />
<uc2:Upload ID="Upload1" runat="server" />
</form>
</body>
</html>

Gallery.ascx:

<%@. Control Language="C#" ClassName="Gallery" %>

<script runat="server">

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

protected void Page_Load(object sender, EventArgs e)
{
Label1.Text = DateTime.Now.ToString();
}

public string Button1clientID
{
get
{
return Button1.ClientID;
}
}

</script>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<div style="visibility:hidden"><asp:Button ID="Button1" runat="server" OnClick="Button1_Click" UseSubmitBehavior="false" Text="Button" /></div>
</ContentTemplate>
</asp:UpdatePanel>

Upload.ascx:

<%@. Control Language="C#" ClassName="Upload" %>

<script runat="server">
private string buttonclientID = "";
public string Button1clientID
{
set
{
buttonclientID = value;
}
}
</script>

<script type="text/javascript">
function submitForm(frameName,upload){
// document.forms[0].action="PageA.aspx"
// document.forms[0].target=frameName;
// window.setTimeout(function(){
// var uploadE=document.getElementById(upload);
// uploadE.parentElement.appendChild(document.createTextNode(uploadE.value));
// uploadE.parentElement.replaceChild(uploadE.cloneNode(true),uploadE);
// },100);
// document.forms[0].submit();
document.getElementById("<%=buttonclientID %>").click();
}
</script>

<div id="Div1">
<input type="file" name="upload" id="upload" />
<button onclick="javascript:submitForm('hiddenFrame','upload')">Upload</button>
<iframe name="hiddenFrame" src="http://pics.10026.com/?src=blank.htm" id="hiddenFrame" style="display: none">
</iframe>
</div>

I have used this mothod to fix some problems :

http://forums.asp.net/t/1117770.aspx

http://forums.asp.net/t/1115934.aspx

http://forums.asp.net/t/1116851.aspx

You can also see these threads for more help.

Let me know if you need more info.

If this help you,don't forget mark it as a answer.Thanks!

An Ajax Alternative for FileUpload!!!!

We've all embraced Ajax as a revolutionary technology, but many of us forget (or are not aware) of asynchronous posts in the times before XmlHttp requests. Our good old friend the IFrame used to be the preferred option for asynchronous http communications. Because an iframe is in essence it's own browser window, it can be used to fire off asynchronous requests (both POST and GET). However, even more important is an IFrame's ability to be a 'target' of a form POST. By adding an IFrame to the page and setting it as the target of the form post, you can in essence create an asynchronous file transfer.

For more help about Ajax Alternative for FileUpload, Please check: http://blogs.infragistics.com/blogs/tony_lombardo/archive/2007/04/09/file-uploads-where-s-the-ajax.aspx


You can see this post

http://forums.asp.net/p/1123812/1770607.aspx#1770607


Hi, This is a great technique.


But it does not work for me in Firefox. Does it work for you in FF? works fine in IE7

Wednesday, March 21, 2012

trouble finding a sample using usercontrols and updatepanels

Hi all,

We have created a menu system primairy based on inserting usercontrols inside one single designed page with several areas's. This works very nice for our sites. Of coarse postback occurs on every click or change.

Some functionality inside usercontrols do a lot of postback, so I would be nice to use the update panel for this type of change.

When trying to implement this I ran into all sorts of trouble, so my first step is to hit this forum. From what i find i'm not the only one having some trouble using usercontrols in combination with the update panel.

So question: Does anyone have a working sample which i could have a look at. Probably can't use it 1 on 1 but well it would a nice starting point.

thanks,

-- jan willem

ps. Does anyone notice .. that all the the ajax stuff (including of coarse atlas) looks REAL nice but when u start to implement it it does realy really takes a lot of time learning to program again :-) Well it's new (ehh well kinda), better and customers do love it.

I wrote a sample to have a test with Ajax and User Control.

http://www.box.net/public/static/q4ltbl5an9.zip

It's simple and straight forward:

1. One user control is linkbutton group, auto generated during runtime;

2. Another user control is to display information according to the user control above;

3. Event subscription is used for information delivery.

4. The link which clicked should be set into different style.

Hope it's helpful.

This was researched days before, now I'm running into the problem of Atlas in live.com. It seems doesn't work with EFP at all!


Thanks for the sample it is usefull!

The only trouble is that the atlas controls (scriptmanager, updatepanel) are still created in the page and not in the usercontrol.

I've created a very simplistic sample of what i'm looking for. Just a page and a usercontrol. I put them in the link below.

http://www.bataviagroep.nl/sampleAtlasUC.zip

- default.aspx --> no atlas, just page and usercontrol doing what it should do .. handling click
- atlas-page.aspx --> same as above, all in one page using atlas and working fine (i added the picture so it's very clear that only the notfication changes

- default-atlas.apsx (same as the first default.aspx) but with the atlas inserted in the usercontrol. This one throws the following exeption:

"The UpdatePanel 'UpdatePanel1' was not present when the page's InitComplete event was raised. This is usually caused when an UpdatePanel is placed inside a template."

For those who don't like downloading stuff from a different server:

default.aspx
<body>
<formid="form1"runat="server">
<div>
<asp:PanelID="panel1"runat="server"/>
</div>
</form>
</body
code behind:
ProtectedSub Page_Load(ByVal senderAsObject,ByVal eAs System.EventArgs)HandlesMe.Load

panel1.Controls.Add(Page.LoadControl("~/uc-atlas.ascx"))

EndSub

The usercontrol uc.ascx
<asp:LinkButtonID="LinkButton1"runat="server">click A</asp:LinkButton>
<asp:LinkButtonID="LinkButton2"runat="server">click B</asp:LinkButton>
<br/><br/>
<asp:LabelID="Label1"runat="server"Text="Label">not clicked</asp:Label
code behind:

ProtectedSub LinkButton1_Click(ByVal senderAs System.Object,ByVal eAs System.EventArgs)Handles LinkButton1.Click

Label1.Text ="clicked A"

EndSubProtectedSub LinkButton2_Click(ByVal senderAs System.Object,ByVal eAs System.EventArgs)Handles LinkButton2.Click

Label1.Text =

"clicked B"EndSub

The same user control but then with atlas stuff added:

<atlas:ScriptManagerID="ScriptManager1"runat="server"EnablePartialRendering="true">

</atlas:ScriptManager>

<asp:LinkButtonID="LinkButton1"runat="server">click A</asp:LinkButton>

|

<

asp:LinkButtonID="LinkButton2"runat="server">click B</asp:LinkButton>

<

br/>

<

br/>

<

atlas:UpdatePanelID="UpdatePanel1"runat="server"><ContentTemplate><asp:LabelID="Label1"runat="server"Text="Label">not clicked</asp:Label></ContentTemplate><Triggers><atlas:ControlEventTriggerControlID="LinkButton1"EventName="Click"/><atlas:ControlEventTriggerControlID="LinkButton2"EventName="Click"/></Triggers>

</

atlas:UpdatePanel>

code behind is the same as above.

--> the above doesn't work and throws an expection.

I would love a sample or idea how to fix this

thanks,

-- jan willem

ps. all the code is in the zipfile


load the custom user control in the Page_Init event, it will work then

wow that worked ...

great that was th easy asnwer i kept missing thanks!

--jw


You might try putting a Placeholder control inside the content template of the UpdatePanel, use FindControl() on the UpdatePanel to locate the Placeholder, and use Placeholder.Controls.Add() to add your dynamically created user control from LoadControl().

The key here is that the container for the user control must exist before OnInit(), and the only way to accomplish this is the declaratively put something there first.

I have gotten this scenario to work. Adding anything directly to the UpdatePanel after OnInitComplete() will not work.