[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Ajax Update Panel with Control outside the panel.

Posted on 2009-04-14
9
Medium Priority
?
696 Views
Last Modified: 2012-05-06
I have a treeview on the left side of my master page I need when I click the node I need to trigger the following( this is an example of a button control semi working):
div id="dvContent" style="overflow: auto;">
               
                    <asp:ScriptManager ID="scriptMgr" runat="server" />
                   
                     <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Generate random names"
                                    Width="200px" />
                               
                   
                    <asp:UpdatePanel ID="updatePnl" runat="server">
                        <ContentTemplate>
                            <fieldset>
                                <legend>Panel with random names</legend>
                                <br />
                                <br />
                                <div style="height: 35px; padding-top: 5px; padding-bottom: 5px">
                                    <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="updatePnl"
                                        DisplayAfter="100" DynamicLayout="true">
                                        <ProgressTemplate>
                                            <img border="0" src="../Images/loading.gif"/>
                                        </ProgressTemplate>
                                       
                                    </asp:UpdateProgress>
                                </div>
                                <asp:Label Font-Bold="true" ID="lblNames" runat="server" Text="">
                                </asp:Label>
                                <br />
                            </fieldset>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </div>


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
 
namespace SIDWebClient.Secure
{
    public partial class Welcome : SIDWebClientBasePage
    {
        protected void Page_Load(object sender, EventArgs e)
        {
 
            scriptMgr.RegisterAsyncPostBackControl(Button1);
 
            if (!Page.IsPostBack)
            {
                //Button btn1 = (Button)Page.FindControl("Button1");
                System.Web.UI.WebControls.Button btn1 = FindControl<System.Web.UI.WebControls.Button>(this, "Button1");
                ScriptManager scriptManager = ScriptManager.GetCurrent(this);
                scriptManager.RegisterPostBackControl(btn1);
            }
            else
            {
                //Response.Write(LeftNavTree.SelectedNode.Value);
            }
        }
 
        private readonly string[] NAMES = new string[] { 
            "Mark", "Tom", "Harry", "Sally", "Sandra", "Paul", "Anastasia" };
 
        /// <summary>
        /// This task is running 3 seconds
        /// </summary>
        private void FillListBoxRandom()
        {
            lblNames.Text = "";
 
            List<String> names = new List<string>();
 
            int count = NAMES.Length;
 
            for (int i = 1; i < 30; i++)
            {
                System.Threading.Thread.Sleep(100);
                Random rnd = new Random();
                int number = rnd.Next(count);
                string selName = NAMES[number];
                if (!names.Contains(selName))
                {
                    names.Add(selName);
                }
            }
 
            foreach (string name in names)
                lblNames.Text += name + "<BR />";
 
        }
        protected void Button1_Click(object sender, EventArgs e)
        {
            FillListBoxRandom();
        }
 
 
        public T FindControl<T>(string id) where T : Control
        {
            return FindControl<T>(Page, id);
        }
 
        public static T FindControl<T>(Control startingControl, string id) where T : Control
        {
            T found = null;
            foreach (Control activeControl in startingControl.Controls)
            {
                found = activeControl as T;
                if (found == null)
                {
                    found = FindControl<T>(activeControl, id);
                }
                else if (string.Compare(id, found.ID, true) != 0)
                {
                    found = null;
                }
                if (found != null)
                {
                    break;
                }
            }
            return found;
        }
 
 
    }
}

Open in new window

0
Comment
Question by:mathieu_cupryk
  • 5
  • 4
9 Comments
 
LVL 16

Expert Comment

by:burakiewicz
ID: 24152372
add this before the content template of the update panel
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>

Open in new window

0
 

Author Comment

by:mathieu_cupryk
ID: 24157396
I tried this but it does no show the loading gif.
I have attached my code.
using System;
using System.Data;
using System.Configuration;
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 System.Web.UI.MobileControls;
using System.Collections.Generic;

public partial class _Default : System.Web.UI.Page
{

      private readonly string[] NAMES = new string[] {
            "Mark", "Tom", "Harry", "Sally", "Sandra", "Paul", "Anastasia" };

      /// <summary>
      /// This task is running 3 seconds
      /// </summary>
      private void FillListBoxRandom()
      {
            lblNames.Text = "";

            List<String> names = new List<string>();

            int count = NAMES.Length;

            for (int i = 1; i < 30; i++)
            {
                  System.Threading.Thread.Sleep( 100 );
                  Random rnd = new Random();
                  int number = rnd.Next(count);
                  string selName = NAMES[number];
                  if (!names.Contains(selName))
                  {
                        names.Add(selName);
                  }
            }

            foreach( string name in names )
                  lblNames.Text += name + "<BR />";
      
      }
      protected void Button1_Click(object sender, EventArgs e)
      {
            FillListBoxRandom();
      }
}
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
 
<!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>AjaxUpdatePanelTest</title>
    <style type="text/css">
        #updatePnl
        {
            width: 250px;
            text-align: center;
            padding: 5px;
        }
    </style>
</head>
<body style="font-size: small; font-family: Arial">
    <form id="form1" runat="server">
    <!-- You need to add this ScriptManager -->
    <asp:ScriptManager ID="scriptMgr" runat="server" />
    <div>
        This example demonstrates the benefits of an UpdatePanel.
    </div>
    <br />
    <br />
    <!-- Only this area is updated on PostBack -->
    <asp:UpdatePanel ID="updatePnl" runat="server">
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
        </Triggers>
        <ContentTemplate>
            <fieldset>
                <legend>Panel with random names</legend>
                <br />
                <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Generate random names"
                    Width="200px" />
                <br />
                <div style="height: 35px; padding-top: 5px; padding-bottom: 5px">
                    <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="updatePnl"
                        DisplayAfter="100" DynamicLayout="true">
                        <ProgressTemplate>
                            <img border="0" src="img/loading.gif" />
                        </ProgressTemplate>
                    </asp:UpdateProgress>
                </div>
                <asp:Label Font-Bold="true" ID="lblNames" runat="server" Text="">
                </asp:Label>
                <br />
            </fieldset>
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>
</body>
</html>

Open in new window

loading.gif
0
 
LVL 16

Expert Comment

by:burakiewicz
ID: 24167540
try something that takes more than 3 seconds, it might not be long enough to display the please wait.  Also, try it with the update progress outside of the update panel
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

Author Comment

by:mathieu_cupryk
ID: 24167711
I tried everything. Can u try?
0
 
LVL 16

Expert Comment

by:burakiewicz
ID: 24167767
yeah give me a minute to set it up
0
 
LVL 16

Expert Comment

by:burakiewicz
ID: 24167835
i copied and pasted your aspx and cs and mine works
0
 

Author Comment

by:mathieu_cupryk
ID: 24167853
if the button is out side
               <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Generate random names"
                    Width="200px" />

                    <asp:ScriptManager ID="scriptMgr" runat="server" />
                   
                     <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Generate random names"
                                    Width="200px" />
                               
                   
                    <asp:UpdatePanel ID="updatePnl" runat="server">
                        <ContentTemplate>
                            <fieldset>
                                <legend>Panel with random names</legend>
                                <br />
                                <br />
                                <div style="height: 35px; padding-top: 5px; padding-bottom: 5px">
                                    <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="updatePnl"
                                        DisplayAfter="100" DynamicLayout="true">
                                        <ProgressTemplate>
                                            <img border="0" src="../Images/loading.gif"/>
                                        </ProgressTemplate>
                                       
                                    </asp:UpdateProgress>
                                </div>
                                <asp:Label Font-Bold="true" ID="lblNames" runat="server" Text="">
                                </asp:Label>
                                <br />
                            </fieldset>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </div>
See at the top.
0
 
LVL 16

Accepted Solution

by:
burakiewicz earned 2000 total points
ID: 24170699
i found out what you can do for this to work
by adding this after the html for your scriptmanager . see attached code
<script type="text/javascript">
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_initializeRequest(InitializeRequest);
    prm.add_endRequest(EndRequest);
    var postBackElement;
    function InitializeRequest(sender, args) {
        if (prm.get_isInAsyncPostBack())
            args.set_cancel(true);
        postBackElement = args.get_postBackElement();

        if (postBackElement.id == 'Button1')
            $get('UpdateProgress1').style.display = 'block';
    }
    function EndRequest(sender, args) {
        if (postBackElement.id == 'Button1')
            $get('UpdateProgress1').style.display = 'none';
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
</head>
 
<body>
    <form id="form1" runat="server">
                   <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Generate random names"
                    Width="200px" />
 
                    <asp:ScriptManager ID="scriptMgr" runat="server" />
                   
                                <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="updatePnl"
                                        >
                                        
                                        <ProgressTemplate>
                                        
                                            <img border="0" src="../Images/loading.gif"/>
                                        </ProgressTemplate>
                                       
                                    </asp:UpdateProgress>
                   
                    <asp:UpdatePanel ID="updatePnl" runat="server">
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
                    
                    </Triggers>
                        <ContentTemplate>
                            <fieldset>
                                <legend>Panel with random names</legend>
                                <br />
                                <br />
                                <div style="height: 35px; padding-top: 5px; padding-bottom: 5px">
                                 
                                </div>
                                <asp:Label Font-Bold="true" ID="lblNames" runat="server" Text="">
                                </asp:Label>
                                <br />
                            </fieldset>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </div>
    </form>
</body>
<script type="text/javascript">
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_initializeRequest(InitializeRequest);
    prm.add_endRequest(EndRequest);
    var postBackElement;
    function InitializeRequest(sender, args) {
        if (prm.get_isInAsyncPostBack())
            args.set_cancel(true);
        postBackElement = args.get_postBackElement();
 
        if (postBackElement.id == 'Button1')
            $get('UpdateProgress1').style.display = 'block';
    }
    function EndRequest(sender, args) {
        if (postBackElement.id == 'Button1')
            $get('UpdateProgress1').style.display = 'none';
    }
</script>
</html>

Open in new window

0
 

Author Comment

by:mathieu_cupryk
ID: 24172257
super job!!!
Excellent work.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In an ASP.NET application, I faced some technical problems. In this article, I list them out and show the solutions that I found.  I hope it will be useful. Problem: After closing a pop-up window, the parent page should be refreshed automaticall…
Today is the age of broadband.  More and more people are going this route determined to experience the web and it’s multitude of services as quickly and painlessly as possible. Coupled with the move to broadband, people are experiencing the web via …
In a question here at Experts Exchange (https://www.experts-exchange.com/questions/29062564/Adobe-acrobat-reader-DC.html), a member asked how to create a signature in Adobe Acrobat Reader DC (the free Reader product, not the paid, full Acrobat produ…
This lesson discusses how to use a Mainform + Subforms in Microsoft Access to find and enter data for payments on orders. The sample data comes from a custom shop that builds and sells movable storage structures that are delivered to your property. …
Suggested Courses
Course of the Month17 days, 21 hours left to enroll

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question