如何自动刷新网页的div

Question

我正在解析 RSS 提要的 xml 并显示它。我想刷新一个显示最近新闻的 div。我正在使用更新面板和 asp 计时器来执行此操作（请参阅下面的代码） 但每次刷新整个页面都会刷新。

谁能告诉我哪里出错了

protected void Page_Load(object sender, EventArgs e)
{

    string loggedinuser = "experiment4";
    Read_Rss(loggedinuser);
    var rssFeed = from el in doc.Elements("rss").Elements("channel").Elements("item")
                  orderby datetime(el.Element("pubDate").Value) descending

                  select new
                  {
                      Title = el.Element("title").Value,
                      Link = el.Element("link").Value,
                      Description = replace_other(el.Element("description").Value),
                      // Image = regex(el.Element("description").Value),
                      Image =
                      el.Element(media + "thumbnail") != null ?
                      el.Element(media + "thumbnail").Attribute("url").Value :
                      el.Element(media + "content") != null ?
                      el.Element(media + "content").Attribute("url").Value :
                      regex(el.Element("description").Value) != null ?
                      regex(el.Element("description").Value) : null,
                      PubDate = datetime(el.Element("pubDate").Value),
                  };
    lvFeed.DataSource = rssFeed;
    lvFeed.DataBind();
    Data_Load(sender, e);
}   


protected void Data_Load()
{
    //  try
    //{
    string loggedinuser = "experiment4";
    Read_Rss(loggedinuser);
    var rssFeed = from el in doc.Elements("rss").Elements("channel").Elements("item")
                  orderby datetime(el.Element("pubDate").Value) descending

                  select new
                  {
                      Title = el.Element("title").Value,

                  };
    newFeed.DataSource = rssFeed;
    newFeed.DataBind();

}



  <div id="leftcolumn">
            <asp:ListView runat="server" ID="lvFeed">
                <LayoutTemplate>
                    <ul>
                        <li runat="server" id="itemPlaceHolder"><a></li>
                    </ul>
                </LayoutTemplate>
                <ItemTemplate>
                    <div class="box">
                        <strong>
                            <%#Eval("Title") %>
                            : </strong>
                        <br />
                        <br />
                        <img src="<%#Eval("Image")%>" alt="" id="photo" class="photo" onload="imageload(this,0,100)"
                            onerror="onImgError(this,0)"></img>
                        <%#Eval("Description")%><a href="<%#Eval("Link") %>">readmore</a><br />
                        <br />
                        <br />
                    </div>
                </ItemTemplate>
            </asp:ListView>
        </div>

        <div id='rightcolumn'> 
            <div id='side'>
                <asp:ScriptManager ID="ScriptManager1" runat="server">
                </asp:ScriptManager>
                <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
                    <ContentTemplate>
                        <asp:Timer ID="Timer2" OnTick="Data_Load" runat="server" Interval="300">
                        </asp:Timer>
                        <asp:ListView runat="server" ID="newFeed">
                            <LayoutTemplate>
                                <ul>
                                    <li runat="server" id="itemPlaceHolder"><a></li>
                                </ul>
                            </LayoutTemplate>
                            <ItemTemplate>
                            <div class="small">
                                <%#Eval("Title") %>
                                :<a href="<%#Eval("Link") %>">readmore</a><br />

                                </div>
                                <br />
                            </ItemTemplate>
                        </asp:ListView>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
        </div>
    </div>
</div>

Answer 1

如果我是你，我会在位于更新面板中的隐藏按钮上设置一个触发器，然后在该触发器上使用 javascript 计时器调用 button.click()，我以前做过这个，奇怪的技巧有效。

触发示例： http://www.asp.net/web-forms/tutorials/aspnet-ajax/understanding-asp-net-ajax-updatepanel-triggers

Answer 2

如果要刷新更新面板，可以在将其 UpdateMode 设置为条件后对其调用 Update。其实看看这个例子就不错了：

http://msdn.microsoft.com/en-us/library/system.web.ui.updatepanel.update.aspx

Answer 3

检查以下示例，使用 jquery 完成。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $("#changePanel").click(function() {
    var data = "foobar";
    $("#panel").hide().html(data).fadeIn('fast');
    })
  });
    </script>
    <style type="text/css">
    div {
    padding: 1em;
    background-color: #00c000;
     }

    input {
    padding: .25em 1em;
     }​
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="panel">test data</div>
    <input id="changePanel" value="Change Panel" type="button"/>​

    </form>
</body>
</html>

或者你可以使用类似jQuery Auto refresh div messing up

Answer 4

<asp:ScriptManager ID="ScriptManager1" runat="server" />
 <asp:Timer runat="server" id="Timer1" interval="900000" ontick="Timer1_Tick" />
 <asp:UpdatePanel runat="server" id="TimedPanel" updatemode="Conditional">
    <Triggers>
        <asp:AsyncPostBackTrigger controlid="Timer1" eventname="Tick" />
    </Triggers>
    <ContentTemplate>
        <div>
             //your div content goes here
        </div>
    </ContentTemplate>
 </asp:UpdatePanel>

the interval attribute of timer control is in milisecond... so for 15 minutes interval would be 900000 ((15*60) * 1000) -> 1 sec=1000 milisecond

now, create an event in codebehind which will be called after interval period

protected void Timer1_Tick(object sender, EventArgs e)
{
    //update div content
}