Please help after loading webpage it comes out empty only showing headers I am using MVC5ADMNONAMECLASSSTREAMHOUSESTDTYPEACNOSltDOCTYPE htmlgtlthtmlgtltheadgt ltmeta name34viewport34 content34widthdevicewidth34 gt lttitlegtIndexlttitlegt ltstyle type34textcss34gt body fontfamily Arial fontsize 10pt ltstylegtltheadgtltbodygt ltdiv style34width 500px34gt

[Solved] jQuery DataTable records are not displaying (Showing) in ASP.Net MVC

makumbi

SOLVED CLOSED ACTIVE ANSWERED
User: makumbi
Posted: on Feb 18, 2022 09:47 PM
Forum: ASP.Net MVC
Answer: 1
Views: 2742
Sample Code: Download

Please help after loading webpage it comes out empty only showing headers. I am using MVC5

ADMNO	NAME	CLASS	STREAM	HOUSE	STDTYPE	ACNOS

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <style type="text/css">
        body {
            font-family: Arial;
            font-size: 10pt;
        }
    </style>
</head>
<body>
    <div style="width: 500px">
        <table id="tblCustomers" cellpadding="0" cellspacing="0" border="1" style="border-collapse:collapse">
            <thead>
                <tr>
                    <th>ADMNO</th>
                    <th>NAME</th>
                    <th>CLASS</th>
                    <th>STREAM</th>
                    <th>HOUSE</th>
                    <th>STDTYPE</th>
                    <th>ACNOS</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(function () {
            $.ajax({
                type: "POST",
                url: "/StudentList/AjaxMethod",
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                failure: function (response) {
                    alert(response.d);
                },
                error: function (response) {
                    alert(response.d);
                }
            });
        });
        function OnSuccess(response) {
            $("#tblCustomers").DataTable(
            {
                bLengthChange: true,
                lengthMenu: [[5, 10, -1], [5, 10, "All"]],
                bFilter: true,
                bSort: true,
                bPaginate: true,
                data: response,
                columns: [{ 'data': 'ADMNO' },
                          { 'data': 'NAME' },
                          { 'data': 'CLASS' },
                          { 'data': 'STREAM' },
                          { 'data': 'HOUSE' },
                          { 'data': 'STDTYPE' },
                          { 'data': 'ACNOS' }]
            });
        };
    </script>
</body>
</html>

Imports System.Web.Mvc
Imports System.Web
Imports System.Linq
Imports System.Data.SqlClient
Imports System.Data
Imports System.Configuration
Imports System.Collections.Generic

Public Class StudentListController
    Inherits Controller
    ' GET: Home
    Public Function Index() As ActionResult
        Return View()
    End Function

    Public Function Index2() As ActionResult
        Return View()
    End Function

    <HttpPost>
    Public Function AjaxMethod() As JsonResult
        Dim entities As New STOREEntities
        Dim customers As List(Of STUDENT) = (From customer In entities.STUDENTs).ToList()
        Return Json(customers)

    End Function
End Class

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 2

Reply
ANSWER
User: dharmendr
Replied: on Feb 19, 2022 12:42 AM
Modified: on Feb 19, 2022 12:42 AM
Report

Hi makumbi,

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

Controller

Public Class HomeController
    Inherits Controller

    ' GET: Home
    Function Index() As ActionResult
        Return View()
    End Function

    <HttpPost>
    Public Function AjaxMethod() As JsonResult
        Dim entities As New NorthwindEntities
        Dim customers As List(Of Customer) = (From customer In entities.Customers).ToList()
        Return Json(customers)
    End Function
End Class

View

@Code
    Layout = Nothing
End Code

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div style="width: 500px">
        <table id="tblCustomers" cellpadding="0" cellspacing="0" border="1" style="border-collapse:collapse">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Designation</th>
                    <th>Address</th>
                    <th>City</th>
                    <th>Country</th>
                    <th>Phone</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css" />
    <script type="text/javascript">
        $(function () {
            $.ajax({
                type: "POST",
                url: "/Home/AjaxMethod",
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                failure: function (response) {
                    alert(response.d);
                },
                error: function (response) {
                    alert(response.d);
                }
            });
        });
        function OnSuccess(response) {
            $("#tblCustomers").DataTable({
                bLengthChange: true,
                lengthMenu: [[5, 10, -1], [5, 10, "All"]],
                bFilter: true,
                bSort: true,
                bPaginate: true,
                data: response,
                columns: [
                    { 'data': 'CustomerID' },
                    { 'data': 'ContactName' },
                    { 'data': 'ContactTitle' },
                    { 'data': 'Address' },
                    { 'data': 'City' },
                    { 'data': 'Country' },
                    { 'data': 'Phone' }
                ]
            });
        };
    </script>
</body>
</html>

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

[Solved] jQuery DataTable records are not displaying (Showing) in ASP.Net MVC

Company

Explore

Follow us

Contact Us