Refresh only a specified spot in asp.net website (Updated code) not working

Question

I want to do page load every 5 sec so I have this in my head content

<meta http-equiv="refresh" content="5" />

Because of this the whole page refreshes. I just want to refresh the gridview and the graph that I have in the page. How can I do that without refreshing the whole page.

  <asp:ToolkitScriptManager ID="ToolkitScriptManager1" EnablePageMethods="true" EnablePartialRendering="True"
            runat="server">
        </asp:ToolkitScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
            <ContentTemplate>
    <div id="pie">
         <canvas width="125" height="450" id="progress1">[No canvas support]</canvas>
         <canvas id="pie1" position="relative" width="400" height="400">[No canvas support]</canvas>
    </div>
    <asp:Panel runat="server" ID="Panel_Users">
       <asp:GridView ID="Grid_UserTable" runat="server" 
                    OnRowDataBound="MyGrid_RowDataBound">
       <Columns>          </Columns>
       </asp:GridView>
    </asp:Panel>
 <asp:Timer ID="TimerClickEvent" runat="server" Interval="4000" ontick="TimerClickEvent_Tick"></asp:Timer>
   </ContentTemplate>
        </asp:UpdatePanel>

  protected DateTime LastUpdate
    {
        get
        {
            return (DateTime)(ViewState["LastUpdate"] ?? DateTime.Now);
        }
        set
        {
            ViewState["LastUpdate"] = value;
        }
    }

    protected void TimerClickEvent_Tick(object sender, EventArgs e)
    {
        if (LastUpdate.AddSeconds(5.0) < DateTime.Now)
        {
            UpdatePanel1.Update();
            LastUpdate = DateTime.Now;
        }
    }
protected void Page_Load(object sender, EventArgs e)
    {
        ToolkitScriptManager1.RegisterAsyncPostBackControl(TimerClickEvent);
        if (!IsPostBack)
        {
            LastUpdate = DateTime.Now;
        }}

Doesn't reload. where am I going wrong

score 3 · Answer 1 · answered Sep 29 '11 at 08:36

3

Place the panel inside an UpdatePanel and use method updatePanelID.Update() to update the update the Panel containing GridView. See this for more details

Instead of button click event you can use a timer for that.

answered Sep 29 '11 at 08:36

Prasanth

3,029
31
44

score 1 · Answer 2 · answered Sep 29 '11 at 08:34

1

If you only want to refresh a region, there are 2 options:

load that into an <iframe> and let it do whatever it wants (via meta-refresh on the document inside the <iframe>
reload the implacted region via javascript, perhaps jQuery's .load() method, i.e. $('#id').load(url);

A meta-refresh on the entire page will, by necessity, reload the entire page.

answered Sep 29 '11 at 08:34

Marc Gravell

1,026,079
266
2,566
2,900

Ok if I use Should I put the grid and the chart inside iframe and how to set the meta-refresh. is it like <iframe><meta refresh=""/><grid..chart></grid..chart> – Mano Sep 29 '11 at 08:39
IIRC iframes are generally considered obsolete (see http://stackoverflow.com/questions/755795/are-iframes-html-obsolete) so I'd prefer and suggest the jQuery approach – fjdumont Sep 29 '11 at 08:41

score 1 · Answer 3 · answered Sep 29 '11 at 08:51

For a built in asp.net solution, use an <asp:UpdatePanel> along with an <asp:Timer> control.

Set the update panel to update based on the Timers Tick event. This will then only update the content within the update panel.

HOWEVER, this is a quick and dirty solution (in my opinion) because even though the content on the page only updates within the update panel, the whole page is actually posted back each time, and anything within the Page_Load method will be processed again.

Another solution would be to use some javascript ajax, and only update what you need to update. A great javascript library which will help you with this is jQuery, and then use the AJAX features of this. This will allow you to reload on the areas that you need, and give you far greater control over what is happening.

I would forget about the AJAX Control Toolkit, and look more into jQuery Ajax and jQuery UI.

Refresh only a specified spot in asp.net website (Updated code) not working

3 Answers3