Hi jochk12345,
Check this example. Now please take its reference and correct your code.
Database
For this example I have used of Northwind database that you can download using the link given below.
Download Northwind Database
HTML
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script>
<script type="text/javascript">
$(function () {
getdata();
$('#tblgrid').each(function () {
$(this).find('div[class=trclass]:gt(3)').hide();
});
$('#btnShowMoreLess').on("click", function () {
if ($(this).val() == 'view more') {
$(this).val('view less');
$('#tblgrid').each(function () {
$(this).find('div[class=trclass]:gt(3)').show();
});
} else {
$(this).val('view more');
$('#tblgrid').each(function () {
$(this).find('div[class=trclass]:gt(3)').hide();
});
}
});
});
function getdata() {
$.ajax({
type: "POST",
url: "WebService.asmx/Getdata",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
success: function (data) {
$('#tblgrid').empty();
var table = $('#tblgrid');
var rows = "";
for (var i = 0; i < data.d.length; i++) {
rows += "<div class=trclass>" + "<tr><td class=tdcolumn>"
+ "<div class=tablediv>"
+ "<div class=Productid>" + data.d[i].Productid + "</div>"
+ "<div class=Productaddress>" + data.d[i].productaddress + "</div>"
+ "<div class=sproductname>" + data.d[i].productname + "</div><br />"
}
table.append(rows);
},
failure: function (response) { alert(response.d); },
error: function (response) { alert(response.d); }
});
}
</script>
<div id="tblgrid">
</div>
<input type="button" value="view more" id="btnShowMoreLess" />
WebService
C#
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;
/// <summary>
/// Summary description for WebService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{
[System.Web.Services.WebMethod]
public Products[] Getdata()
{
List<Products> details = new List<Products>();
using (var con = new SqlConnection(ConfigurationManager.ConnectionStrings["constr"].ConnectionString))
{
SqlCommand cmd = new SqlCommand("SELECT TOP 10 * FROM Products", con);
using (var sda = new SqlDataAdapter())
{
cmd.Connection = con;
sda.SelectCommand = cmd;
DataTable TableData = new DataTable();
TableData.Clear();
sda.Fill(TableData);
foreach (DataRow dtrow in TableData.Rows)
{
Products user = new Products();
user.Productid = Convert.ToInt32(dtrow["ProductID"].ToString());
user.productaddress = dtrow["QuantityPerUnit"].ToString();
user.productname = dtrow["productName"].ToString();
details.Add(user);
}
}
}
return details.ToArray();
}
public class Products
{
public int Productid;
public string productname;
public string productaddress;
}
}
VB.Net
Imports System.Configuration
Imports System.Data
Imports System.Data.SqlClient
Imports System.Web.Services
' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
<System.Web.Script.Services.ScriptService()> _
<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
Public Class WebService
Inherits System.Web.Services.WebService
<System.Web.Services.WebMethod()>
Public Function Getdata() As Products()
Dim details As List(Of Products) = New List(Of Products)()
Using con = New SqlConnection(ConfigurationManager.ConnectionStrings("constr").ConnectionString)
Dim cmd As SqlCommand = New SqlCommand("SELECT TOP 10 * FROM Products", con)
Using sda = New SqlDataAdapter()
cmd.Connection = con
sda.SelectCommand = cmd
Dim TableData As DataTable = New DataTable()
TableData.Clear()
sda.Fill(TableData)
For Each dtrow As DataRow In TableData.Rows
Dim user As Products = New Products()
user.Productid = Convert.ToInt32(dtrow("ProductID").ToString())
user.productaddress = dtrow("QuantityPerUnit").ToString()
user.productname = dtrow("productName").ToString()
details.Add(user)
Next
End Using
End Using
Return details.ToArray()
End Function
Public Class Products
Public Productid As Integer
Public productname As String
Public productaddress As String
End Class
End Class
Screenshot
