Geek Answers Handbook

How to update repeater after 1 minute using javascript?

I created one repeater, and now I want to update this repeater after every 1 minute. blow my code:

 <asp:Repeater ID="gvd" runat="server">

                <ItemTemplate>
                    <tr class="gradeA">
                        <td>
                            <asp:Label ID="lblcategory" runat="server" Text='<%#Eval("Firstname")%>'></asp:Label>

                        </td>
                        <td>
                            <asp:Label ID="lblcontent" runat="server" Text='<%#Eval("Lastname")%>'></asp:Label>
                        </td>

                     </tr>
                </ItemTemplate>

            </asp:Repeater>

This is a great result, but now I want to update this entire relay through javascript, because using updatepanel the load on the server is increased

so how can i do this with javascript?

+4
source share
3 answers

SignalR was created to precisely solve the problem you are describing.

Here is your situation: You need a way to display information that can change constantly. The latest information should be displayed at any time.

Web Forms UpdatePanel. . , . "", , .

, deostroll, AJAX . , , . / , . , :

Client -> Server - Send me the entire table.
Server -> Client - Here a 1MB table.
Client -> Server - Send me the entire table.
Server -> Client - Here an 1MB table.
Client -> Server - Send me the entire table.
Server -> Client - Here a 1.5MB table.
Client -> Server - Send me the entire table.
Server -> Client - Here a 1MB table.

AJAX :

3:30PM Client -> Server - The last data I have is from 3:30PM. Got anything new?
3:30PM Server -> Client - No.
3:31PM Client -> Server - The last data I have is from 3:30PM. Got anything new?
3:31PM Server -> Client - No.
3:32PM Client -> Server - The last data I have is from 3:31PM. Got anything new?
3:32PM Server -> Client - No.
3:33PM Client -> Server - The last data I have is from 3:32PM. Got anything new?
3:33PM Server -> Client - Yes, two new records. Here you go, 10KB.
3:34PM Client -> Server - The last data I have is from 3:33PM. Got anything new?
3:34PM Server -> Client - No.

. , , , deostroll.

, SignalR. SignalR - " ". "" . , , -, . -, SignalR . , .

SignalR. , , JavaScript , .

.

public class TableHub : Hub
    {
    }

, :

 $(function () {
    var tableHub= $.connection.tableHub;
    tableHub.client.tableChanged= function (html) {
    //append the html markup to your DOM
    };
});

, , , :

var context = GlobalHost.ConnectionManager.GetHubContext<TableHub >();
string html="<table><tr><td>Some data</td></tr></table>"; //obviously you'd built the HTML table up here
context.Clients.All.TableChanged(html); //call tableChanged() on the client!

tableChanged() , ! . , (-, Server Sent, Long Polling), dynamics .

. HTML , . , AJAX- API , . , , -, , .

+5

, , . , , .

javascript , . ajax / (ashx) .

(.. ), usercontrol . ( ).

- -

public class refresh : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        context.Response.Cache.SetCacheability(HttpCacheability.NoCache);
        FormlessPage page = new FormlessPage();
        Control ctrl = page.LoadControl("~/RepeaterHoster.ascx");
        StringWriter sw = new StringWriter();
        HtmlTextWriter hw = new HtmlTextWriter(sw);
        page.Controls.Add(ctrl);
        page.RenderControl(hw);
        context.Server.Execute(page, hw, false);
        context.Response.Write(sw.ToString());
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

, . :

public class FormlessPage : Page
{
    public override void VerifyRenderingInServerForm(Control control)
    {
        //keeping it empty

        //base.VerifyRenderingInServerForm(control);
    }
}

aspx :

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApp.DynamicRepeater.WebForm1" %>

<%@ Register Src="RepeaterHoster.ascx" TagName="RepeaterHoster" TagPrefix="uc1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Repeater Refresh Demo</title>
    <style>
        #content {

            border:1px dotted;
            line-height:2em;
        }

            #content div {

                background-color:#00ff90;
                padding:3px;
                display:inline;
                margin:3px;
                text-align:center;

            }
    </style>
    <script src="Scripts/jquery-2.1.1.min.js"></script>
    <script>
        $(function () {
            var content = $('#content');
            setInterval(function () {
                content.load('refresh.ashx');
            }, 5000);
        });
    </script>
</head>
<body>
    <h2>Repeater Refresh Demo</h2>
    <form id="form1" runat="server">
        <div id="content">
            <%-- content here (in this div) refreshes every 5 seconds--%>
            <uc1:RepeaterHoster ID="RepeaterHoster1" runat="server" />

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

. 5 db (northwind) - mdf. , , , .

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="RepeaterHoster.ascx.cs" Inherits="WebApp.DynamicRepeater.RepeaterHoster" %>
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
    <ItemTemplate>
        <div>
            <%# ((System.Data.DataRowView)Container.DataItem)[0] %>
        </div>
    </ItemTemplate>
</asp:Repeater>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
    ConnectionString="<%$ ConnectionStrings:NorthwindDB %>" 
    SelectCommand="SELECT TOP (5) ProductName FROM [Alphabetical list of products] ORDER BY NEWID()"></asp:SqlDataSource>

, ? ?

, , .:)

...

+1

setTimeout (functionName, milliseconds) sets the specific function to run after the {millisecond} argument.

You can just have setTimeout (refreshFunction, 60000) at the end of this update function

You can also use the __doPostBack ('UpdatePanel1', '') method; to update the panel in this update method.

So your code might look like this:

function() RefreshPanelEveryMinuteLoop {
    __doPostBack('UpdatePanel1', '');
    setTimeout(RefreshPanelEveryMinuteLoop, 60000);
}
0
source

More articles:


All Articles