Show more and less in HTML Table using jQuery AJAX in ASP.Net

Last Reply 3 months ago By dharmendr

Posted 3 months ago

how to show less/show more for table using jquery ajax json webmethod using below code...

Javascript -

function getdata() {
    $.ajax({
        type: "POST",
        url: "/WebService.asmx/Getdata",

        data: '{}',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            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); }
    });
}

 Code -

 [System.Web.Services.WebMethod]
public Products[] Getdata()
{
    List<Products> details = new List<Products>();
    using (var con = new SqlConnection(ConfigurationManager.ConnectionStrings["conn"].ConnectionString))
    {
        SqlCommand cmd = new SqlCommand("sp_getProducts", con);
        cmd.CommandType = CommandType.StoredProcedure;

        using (var sda = new SqlDataAdapter())
        {
            cmd.Connection = con;
            sda.SelectCommand = cmd;
            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["productaddress"].ToString();
                user.productname = dtrow["productname"].ToString();
                details.Add(user);
            }
        }
    }
    return details.ToArray();
}
public class Products
{
    public int Productid;
    public string productname;
    public string productaddress;
} 

 

You are viewing reply posted by: dharmendr 3 months ago.
Posted 3 months ago Modified on 3 months ago

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