CODEWITHSUNDEEP
javascriptasp.netuser-controlsupdatepanel
tanweer
tanweer

Reputation: 83

Refresh user control inside an update panel from javascript

I am working on a project where I want to refresh a part of the web page where i have a user control that contain dynamic data.user control will load data from a text file as this text file will update frequently. I need to refresh the user control alone not the whole page using javascript. I tried the following but it did not worked for me.

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

<%@ Register src="ucTest.ascx" tagname="ucTest" tagprefix="uc1" %>

<script runat="server">

   void button_Click(object sender, EventArgs e)
   {
         lbltest.Text = "Refreshed by server side event handler at " + DateTime.Now + ".<br>";
   }

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>How to update an UpdatePanel with JavaScript</title>

   <script type="text/javascript">
   function UpdPanelUpdate()
   {
         __doPostBack("<%= button.ClientID %>","");
   }
   </script>

</head>
<body>
   <form id="form1" runat="server">
         <asp:ScriptManager ID="ScriptManager1" runat="server" />
         <div>


   <a href="javascript:UpdPanelUpdate()">Update the Panel</a>

      <asp:Button ID="button" runat="server" OnClick="button_Click" style="display:none;"/>

            <asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional">
                  <ContentTemplate>
                        <uc1:ucTest ID="ucTest1" runat="server" />
                        <asp:Label ID="lbltest" runat="server"></asp:Label>
                  </ContentTemplate>
                  <Triggers>
                     <asp:AsyncPostBackTrigger ControlID="button" EventName="Click" />
                  </Triggers>
            </asp:UpdatePanel>
         </div>
   </form>
</body>
</html>

my user control is.

    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="ucTest.ascx.cs" Inherits="ucTest" %>
<table border="3">
      <tr>
            <td>
                  <%   Response.WriteFile("TextFile.txt"); %>
            </td>
      </tr>
</table>

Here TextFile.txthas some information that will be changed frequently.

any help would be greatly appreciated.

Upvotes: 1

Views: 6443

Answers (1)

VinayC
VinayC

Reputation: 49165

To make things simpler, you can put the hidden button within the UpdatePanel so that you don't have to put async triggers. First keep the button visible and see if the update panel is refreshing or not. If yes then you can hide the button.

Next part is triggering the button by simulating click event. I will suggest you to use library such as jquery from cross-browser solution. For example, 

function UpdPanelUpdate()
{
   $("<%= button.ClientID %>").click();
}

For code __doPostBack("<%= button.ClientID %>",""); to work, you should try setting button's UseSubmitBehavior property as false.

Upvotes: 2

Related Questions