Sunteți pe pagina 1din 4

*How to reload part of page content regularly *(*CSASPNETReloadPartContent*) Introduction The CSASPNETReloadPartContent sample show you how to reload

part of page content regularly. One method is use meta tag to refresh page regually as show below: HtmlMeta meta = new HtmlMeta(); meta.HttpEquiv = "Refresh"; meta.Content = "5"; this.Page.Header.Controls.Add(meta); Here we want to use javascript setInterval with jquery ajax method. Running the Sample Please follow these demonstration steps below. Step 1: Open the CSASPNETReloadPartContent.sln. Step 2: Right-click the Default.aspx page then select "View in Browser". Step 3: Validation finished. Using the Code Code Logical:

Step1. Create a C# "ASP.NET Web Application" in Visual Studio 2008/Visual Web Developer. Name it as "CSASPNETReloadPartContent". Step2. Add two Web Forms then rename them to "Default.aspx" and "Refresh.aspx". The Default page is used to test part of page content regularly reload. The Refresh is used to get the latest data.Add andivto Default page, it is used to load the latest content. The main code as show below: HTML Edit|Remove <form id="form1" runat="server"> This is the main page.

</form>

Add some Data Control to "Refresh" page, they are used to bind data. In this demo, we add a RepeaterControl to show data. HTML Edit|Remove <asp:repeater id="rptResult" runat="Server"> <HeaderTemplate> </HeaderTemplate> <ItemTemplate> </ItemTemplate> <FooterTemplate> Id Time <%#Eval("Id")%><%# Eval("Time")%> </FooterTemplate> </asp:repeater>

Step3.**Now we begin to implement reload part of page content regularly. Add JavaScript reference, and write the corresponding JavaScript script.In the Default page, the JavaScript will be shown as below: JavaScript Edit|Remove <script src="jquery-1.4.1.min.js" type="text/javascript"></script> <script language="JavaScript" type="text/javascript"> function refreshConsole() { $.ajax({ type: "POST", url: "refresh.aspx", success: function(data) { $("#target").html(data); } }); } $(document).ready(function() { refreshConsole(); }); </script>

*[Note]* We need to set the value of the parameter type of jQuery Ajax method to "POST". In the Refresh Page, the script as shown below: JavaScript Edit|Remove <script type="text/javascript"> setInterval(function() { load() }, 3000); var load = function() { location.reload(); }; </script>

** Step4.**We get the latest Data and bind it to DataBind Control in the code-behind. C# Edit|Remove //Here i create a table to store the time of refresh,you can put your logic here instead of it. private void BindResult() { //In the actual scene, you may not need operating the session, here is just to test if (Session["dtResult"] != null) { dtResult = (DataTable)Session["dtResult"]; } else { dtResult = new DataTable(); dtResult.Columns.Add("Id"); dtResult.Columns.Add("Time"); } DataRow dr = dtResult.NewRow(); dr["Id"] = dtResult.Rows.Count + 1; dr["Time"] = DateTime.Now.ToString(); dtResult.Rows.Add(dr); //Save data to Session, in a Session["dtResult"]=dtResult; //Bind data to GridView rptResult.DataSource = dtResult;

rptResult.DataBind(); }

Step5.**Build the application and you can debug it.** -----------------------------------------------------------------------<http://go.microsoft.com/?linkid=9759640>

S-ar putea să vă placă și