Solved

Ajax Update Panel with Control outside the panel.

Posted on 2009-04-14
9
688 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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 500 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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

In this Article, I will provide a few tips in problem and solution manner. Opening an ASPX page in Visual studio 2003 is very slow. To make it fast, please do follow below steps:   Open the Solution/Project. Right click the ASPX file to b…
I recently went through the process of creating a Calendar Control of events with the basis of using a database to keep track of the dates that are selectable, one requirement was to have the selected date pop-up in a simple lightbox.  At first this…
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…

749 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