仅刷新 asp.net 网站中的指定位置（更新代码）不起作用

Question

我想每 5 秒加载一次页面，所以我的头部内容中有这个

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

因此整个页面都会刷新。我只想刷新页面中的网格视图和图表。在不刷新整个页面的情况下如何做到这一点。

  <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;
        }}

不会重新加载。我哪里错了

Answer 1

对于内置的 asp.net 解决方案，请使用 <asp:UpdatePanel> 和 <asp:Timer> 控件。

将更新面板设置为根据 Timers Tick 事件进行更新。这将只更新更新面板中的内容。

但是，这是一个快速而肮脏的解决方案（在我看来），因为即使页面上的内容仅在更新面板中更新，整个页面实际上每次都会被回发，Page_Load 方法中的任何内容将再次处理。

另一种解决方案是使用一些 javascript ajax，并且只更新您需要更新的内容。一个很棒的 javascript 库可以帮助你解决这个问题，那就是 jQuery，然后使用它的 AJAX 特性。这将允许您重新加载您需要的区域，并让您更好地控制正在发生的事情。

我会忘记 AJAX 控制工具包，并更多地研究 jQuery Ajax 和 jQuery UI。

Answer 2

将面板放在 UpdatePanel 中，并使用方法 updatePanelID.Update() 更新包含 GridView 的面板。见this for more details

您可以use a timer 代替按钮单击事件。

Answer 3

如果你只想刷新一个区域，有两种选择：

• 将其加载到<iframe> 中并让它为所欲为（通过<iframe> 内文档的元刷新
• 通过javascript重新加载受影响的区域，可能是jQuery的.load()方法，即$('#id').load(url);

整个页面上的元刷新必然会重新加载整个页面。