How to append data to the repeater control from client side

Usf Noor Published at Dev

Usf Noor

I want to append data to the repeater, the repeater has some data already on page load. But i want to remaing load data while Scrolling Page down.

<script type="text/javascript">


        $(window).scroll(function () {
            if ($(window).scrollTop() + $(window).height() == $(document).height()) {
                showData();
            }
        });


        function showData() {
            PageMethods.getData(onSuccess, onError);  // getData is a page webmethod thats return five record in json string.
            function onSuccess(data) {
                alert(data); // data has all five record.
            }
            function onError(data) {
                alert('Problem');
            }
        }

    </script>

.NET

        <div id="Posts" class="container-fluid padded">
            <asp:Repeater ID="PostsRepeater" runat="server">
                <ItemTemplate>
                    <section>
                        <div class="col-md-2">
                            <img src="images/" <%#("ImagePath") %> alt="<%#Eval("username") %>" class="img-circle img-responsive" />
                        </div>
                        <div class="col-md-10">
                            <div>
                                <b><%#Eval("username") %></b><p><span class="glyphicon glyphicon-time"></span>Posted on Feb <%#Eval("CreationDate") %></p>
                            </div>
                            <hr>
                            <p><%#Eval("Status") %></p>
                            <img src="images/1451285316491.jpg" class="img-responsive">
                        </div>
                        <div class="row commentbox">
                            <div class="col-sm-2">
                                <div class="thumbnail">
                                    <img class="img-responsive user-photo img-circle" src="images/1451285316491.jpg">
                                </div>
                                <!-- /thumbnail -->
                            </div>
                            <!-- /col-sm-1 -->
                            <div class="col-sm-10">
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <strong>Ali</strong> <span class="text-muted">commented 5 days ago</span>
                                    </div>
                                    <div class="panel-body">
                                        This Is awsome post
                                    </div>
                                    <!-- /panel-body -->
                                </div>
                                <!-- /panel panel-default -->
                            </div>
                            <!-- /col-sm-6 -->
                        </div>
                        <!-- /row commentbox -->
                    </section>
                </ItemTemplate>
            </asp:Repeater>
            <img id="loader" class="img-responsive col-md-offset-4" alt="" src="images/loading.gif" style="display:none" />
        </div>

Satinder singh

On window scroll, you can make a jQuery Ajax call which returns data and on success method get the response and bind it to your parent Div Posts (i.e. repeator control)

Edited: Code to bind data .i.e( Ajax success method)

function OnSuccess(response) {
    var items = response.d;
    var fragment='';
    $.each(items, function (index, val) {

    var aData_imgSRC= val.imgSRC;
    var aData_USERNAME= val.USERNAME;        

     // ..... 

   fragment += "<section> <div class='col-md-2'>  <img src='"+aData_imgSRC+"'   class='img-circle img-responsive' />  </div>   <div class='col-md-10'>    <div>   <b>"+aData_USERNAME+"</b><p><span class='glyphicon glyphicon-time'></span>Posted on Feb "+aData_Date+"></p> </div>  <hr>   <p>"+aData_Status+"</p>    <img src='images/1451285316491.jpg' class='img-responsive'></div>  </section>";
    });
    $('#Posts').append(fragment);
}

Link: How to consume Webmethod in Asp.net C#

Collected from the Internet

Please contact [email protected] to delete if infringement.