CODEWITHSUNDEEP
c#htmljson
Alex
Alex

Reputation: 827

Show JSON Data in HTML Table

My controller like this: 

public JsonResult Index()
        {
            .....
            return Json(listItem, JsonRequestBehavior.AllowGet);           
        }

The result is 

[
  {
   "ExtensionData": {},
    "Code": "40",
    "Name": "Alex"
  },
  {
    "ExtensionData": {},
    "Code": "40",
    "Name": "Tom"
  } 
 // and more ...
]

How can I get and show the result of controller above in View (Index.cshtml) on the HTML table?

Upvotes: 0

Views: 1356

Answers (2)

Rahul Sharma
Rahul Sharma

Reputation: 8311

Well, there is a very good plugin called DataTables which can be used to display your data from the Controller coming in JSON form. I have prepared for you a sample code project which can be found on my repository here. You can run the project and see if it suffices to your needs. I am also sharing the code that you would require to run the project. I hope this would help you out in your requirement. You would obviously need to tailor the CSS as per your requirement for the DataTable. Cheers!

Model:

using System.Collections.Generic;

namespace DataTablesExample
{
    public class ExtensionsData
    {
        public List<string> ExtensionData=new List<string>(); 
        public string Code { get; set; }
        public string Name { get; set; }
    }
}

Controller:

    public ActionResult ExtensionData()
    {
        return View();
    }

    public JsonResult get_extensiondata()
    {
        List<ExtensionsData> extensionData = new List<ExtensionsData>();

        //Example of how you could intialize your list
        extensionData.Add(new ExtensionsData
        {
            ExtensionData = { "1", "2" },
            Code = "40",
            Name = "Alex"
        });

        extensionData.Add(new ExtensionsData
        {
            ExtensionData = { "1", "2" },
            Code = "40",
            Name = "Tom"
        });

        extensionData.Add(new ExtensionsData
        {
            ExtensionData = { "1", "2" },
            Code = "10",
            Name = "Bunny"
        });

        var data = extensionData;
        return Json(extensionData, JsonRequestBehavior.AllowGet);
    }

View:

@{
    ViewBag.Title = "Home Page";
    Layout = null;
}

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    @*<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
        <script src="~/Scripts/jquery-3.4.1.js"></script>
        <link href="~/Content/bootstrap4.min.css" rel="stylesheet" />
        <script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
        <script src="~/Scripts/DataTables/dataTables.bootstrap4.min.js"></script>*@

    <!-- CDN LINKS-->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.3.1/cerulean/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
</head>
<body>
    <div class="jumbotron">
        <h1>DataTable Example</h1>
        <p class="lead">A project dedicated to data table example in MVC</p>
    </div>
    <br />
    <center>
        <div style="width: auto; border: 1px solid black; padding: 3px" ;>
            <table id="dataTable">
                <thead>
                    <tr>
                        <th style="width: auto; border: 1px solid black; padding: 3px" ;>Extension Data</th>
                        <th style="width: auto; border: 1px solid black; padding: 3px" ;>Code</th>
                        <th style="width: auto; border: 1px solid black; padding: 3px" ;>Name</th>
                    </tr>
                </thead>
            </table>
        </div>
    </center>
    <script type="text/javascript">
            $(document).ready(function () {
                $.ajax({
                    "url": "@Url.Action("get_extensiondata", "Home")",
                    "method": "post",
                    "dataType" : "json",
                    success: function (data) {
                        $('#dataTable').DataTable({
                            paging: true,
                            sort: true,
                            searching: true,
                            data:data,
                            columns: [
                                { 'data': 'ExtensionData'},
                                { 'data': 'Code' },
                                { 'data': 'Name' }
                            ]
                        });
                    }
                });
            });
    </script>
</body>
</html>

Sample Output:

enter image description here

Upvotes: 1

Ashutosh Kushawaha
Ashutosh Kushawaha

Reputation: 791

try this, suppose you have table in html as 

<table class="table table-striped">
        <thead>
        <tr>
        <th>Code</th>
        <th>Name</th>
        </tr>
        </thead>
        <tbody></tbody>
</table>

// to get data from the server use ajax and add to table as shown below.

<script>
    $(document).ready(function () {

            var url = "url to action of controller";
            $.ajax(url).done(function (data) {
                var tr;
           //Append each row to html table
            for (var i = 0; i < data.length; i++) {
                tr = $('<tr/>');
                tr.append("<td>" + data[i].Code + "</td>");
                tr.append("<td>" + data[i].Name + "</td>");
                $('table').append(tr);
             }

            }).fail(function (data) {

            });

        });
    });
</script>

Upvotes: 0

Related Questions