Refer Below sample code for your referenvce and implement it as per your code logic. Here I am making use of Microsoft’s Northwind Database.
SQL
-- EXEC GetCustomerDetails
CREATE PROCEDURE [GetCustomerDetails]
AS
BEGIN
SELECT TOP 10 CustomerID
,ContactName
,Country
FROM Customers
END
GO
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$.ajax({
type: "POST",
url: "CS.aspx/GetCustomers",
data: {},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failuer: function (response) {
alert(resposnse.d);
},
error: function (response) {
alert(resposnse.d);
}
});
});
function OnSuccess(response) {
/* Add List Value Returen from WebMethod to customers variable*/
var customers = response.d;
/* save row as clone from the dummy row from ListView*/
var row = $("[id*=tblCustomers] tr:last-child").clone(true);
/* Remove Dummy row from ListView*/
$("[id*=tblCustomers] tr").not($("[id*=tblCustomers] tr:first-child")).remove();
/*Itrate loop on customers*/
$(customers).each(function () {
/*Save the current Item value on customer variable*/
var customer = $(this)[0];
/* Apply values to td in listView*/
$(".CustomerId", row).html(customer.ContactName);
$(".ContactName", row).html(customer.ContactName);
$(".Country", row).html(customer.Country);
$("[id*=tblCustomers]").append(row);
row = $("[id*=tblCustomers] tr:last-child").clone(true);
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ListView ID="lvCustomers" runat="server" GroupPlaceholderID="groupPlaceHolder1"
ItemPlaceholderID="itemPlaceHolder1">
<LayoutTemplate>
<table cellpadding="0" id="tblCustomers" cellspacing="0">
<tr>
<th>
CustomerId
</th>
<th>
ContactName
</th>
<th>
Country
</th>
</tr>
<asp:PlaceHolder runat="server" ID="groupPlaceHolder1"></asp:PlaceHolder>
</table>
</LayoutTemplate>
<GroupTemplate>
<tr>
<asp:PlaceHolder runat="server" ID="itemPlaceHolder1"></asp:PlaceHolder>
</tr>
</GroupTemplate>
<ItemTemplate>
<td class="CustomerId">
<%# Eval("CustomerId") %>
</td>
<td class="ContactName">
<%# Eval("ContactName") %>
</td>
<td class="Country">
<%# Eval("Country") %>
</td>
</ItemTemplate>
</asp:ListView>
<br />
<br />
</div>
</form>
</body>
</html>
NameSpaces
C#
using System;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.Configuration;
using System.Web.Services;
using System.Data;
VB.Net
Imports System.Data.SqlClient
Imports System.Data
Imports System.Web.Services
Code
C#
public partial class CS : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
// To Bind Dummy data to listView To get clone on Jquery OnSuccess method.
this.BindDummyRow();
}
}
private void BindDummyRow()
{
DataTable dummy = new DataTable();
dummy.Columns.Add("CustomerId");
dummy.Columns.Add("ContactName");
dummy.Columns.Add("Country");
dummy.Rows.Add();
lvCustomers.DataSource = dummy;
lvCustomers.DataBind();
}
[WebMethod]
public static List<Customer> GetCustomers()
{
string constr = ConfigurationManager.ConnectionStrings["ConStr1"].ConnectionString;
SqlConnection con = new SqlConnection(constr);
SqlCommand cmd = new SqlCommand("GetCustomerDetails");
cmd.CommandType = CommandType.StoredProcedure;
cmd.Connection = con;
List<Customer> customers = new List<Customer>();
con.Open();
SqlDataReader sdr = cmd.ExecuteReader();
while (sdr.Read())
{
customers.Add(new Customer
{
CustomerId = sdr["CustomerId"].ToString(),
ContactName = sdr["ContactName"].ToString(),
Country = sdr["Country"].ToString()
});
}
con.Close();
return customers;
}
}
public class Customer
{
public string CustomerId { get; set; }
public string ContactName { get; set; }
public string Country { get; set; }
}
VB.Net
Partial Class VB
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
' To Bind Dummy data to listView To get clone on Jquery OnSuccess method.
Me.BindDummyRow()
End If
End Sub
Private Sub BindDummyRow()
Dim dummy As DataTable = New DataTable()
dummy.Columns.Add("CustomerId")
dummy.Columns.Add("ContactName")
dummy.Columns.Add("Country")
dummy.Rows.Add()
lvCustomers.DataSource = dummy
lvCustomers.DataBind()
End Sub
<WebMethod()>
Public Shared Function GetCustomers() As List(Of Customer)
Dim constr As String = ConfigurationManager.ConnectionStrings("ConStr1").ConnectionString
Dim con As SqlConnection = New SqlConnection(constr)
Dim cmd As SqlCommand = New SqlCommand("GetCustomerDetails")
cmd.CommandType = CommandType.StoredProcedure
cmd.Connection = con
Dim customers As List(Of Customer) = New List(Of Customer)()
con.Open()
Dim sdr As SqlDataReader = cmd.ExecuteReader()
While sdr.Read()
customers.Add(New Customer With {.CustomerId = sdr("CustomerId").ToString(), .ContactName = sdr("ContactName").ToString(), .Country = sdr("Country").ToString()})
End While
con.Close()
Return customers
End Function
End Class
Public Class Customer
Public Property CustomerId As String
Public Property ContactName As String
Public Property Country As String
End Class
Screenshot
