Trigger PostBack to an UpdatePanel from a separate UserControl?

Home ›

ASP.NET Forums » ASP.NET AJAX » ASP.NET AJAX UI » Trigger PostBack to an UpdatePanel from a separate UserControl?

Previous Next

Trigger PostBack to an UpdatePanel from a separate UserControl?

Last post 12-17-2007 1:37 PM by raklos. 3 replies.

Sort Posts:

Trigger PostBack to an UpdatePanel from a separate UserControl?

06-03-2007, 1:52 AM

Contact

Loading...
wreck_of_u
Joined on 11-07-2006, 4:55 AM
Posts 73

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?

Filed under: User Control UpdatePanel PostBack

Re: Trigger PostBack to an UpdatePanel from a separate UserControl?

06-05-2007, 2:53 AM

Contact

Answer

Loading...
Jin-Yu Yin - MSFT
Joined on 04-30-2007, 7:41 AM
Posts 1,824

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="Gallery.ascx" TagName="Gallery" TagPrefix="uc1" %>
<%@ Register 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="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

Sincerely,
Jin-Yu Yin
Microsoft Online Community Support