Hi nauna,
ListView is not rendered as any control in the page. Only the ItemTemplate content rendered repeatedly.
So to append the content ListView is placed inside Div.
Refer below sample.
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
function loadMoreData() {
var currentPage = parseInt($('[id*=hdnCurrentPage]').val());
var nextPage = currentPage + 1;
$.ajax({
type: "POST",
url: "Default.aspx/GetRecords",
data: "{'pageNumber': " + nextPage + ", 'pageSize': 2 }",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var data = JSON.parse(response.d);
if (data.length > 0) {
var itemsHtml = "";
$.each(data, function (index, item) {
itemsHtml += '<div class="myItemTemplate">';
itemsHtml += '<h3>' + item.Name + '</h3>';
itemsHtml += '<h3>' + item.Price + '</h3>';
itemsHtml += '</div>';
});
$('[id*=dvProducts]').append(itemsHtml);
$('[id*=hdnCurrentPage]').val(nextPage);
}
},
error: function (response) {
alert(response.responseText)
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="dvProducts">
<asp:ListView ID="lvProducts" runat="server">
<ItemTemplate>
<div class="myItemTemplate">
<h3><%# Eval("Name") %></h3>
<p><%# Eval("Price") %></p>
</div>
</ItemTemplate>
</asp:ListView>
</div>
<button type="button" onclick="loadMoreData()">Load More</button>
<asp:HiddenField ID="hdnCurrentPage" runat="server" Value="1" />
</form>
</body>
</html>
Namespaces
C#
using System.Data;
using Newtonsoft.Json;
using System.Web.Services;
VB.Net
Imports System.Data
Imports Newtonsoft.Json
Imports System.Web.Services
Code
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
string jsonData = GetRecords(1, 2); // Get the first set of records
lvProducts.DataSource = JsonConvert.DeserializeObject<List<Product>>(jsonData);
lvProducts.DataBind();
}
}
[WebMethod]
public static string GetRecords(int pageNumber, int pageSize)
{
TestEntities entities = new TestEntities();
var q = (from p in entities.Products
select new Product
{
Name = p.Name,
Price = p.Price.ToString()
}).OrderBy(p => p.Name)
.Skip((pageNumber - 1) * pageSize)
.Take(pageSize)
.ToList();
return JsonConvert.SerializeObject(q);
}
public class Product
{
public string Name { get; set; }
public string Price { get; set; }
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not IsPostBack Then
Dim jsonData As String = GetRecords(1, 2)
lvProducts.DataSource = JsonConvert.DeserializeObject(Of List(Of Product))(jsonData)
lvProducts.DataBind()
End If
End Sub
<WebMethod>
Public Shared Function GetRecords(ByVal pageNumber As Integer, ByVal pageSize As Integer) As String
Dim entities As TestEntities = New TestEntities()
Dim q = (From p In entities.Products Select New Product With {
.Name = p.Name,
.Price = p.Price.ToString()
}).OrderBy(Function(p) p.Name).Skip((pageNumber - 1) * pageSize).Take(pageSize).ToList()
Return JsonConvert.SerializeObject(q)
End Function
Public Class Product
Public Property Name As String
Public Property Price As String
End Class
Screenshot
