nischalinn Ответов: 2

отображение данных из файла .json в табличную форму в ASP.NET страница

I've to show the data in a table importing the data from a JSON file. I can not proceed further with this. Since I am new to asp.net, do not how to display the imported data in a table in ASP.NET.


//// json file
{"employees":[
    {"firstName":"Anna","lastName":"Meyers"},
    {"firstName":"Betty","lastName":"Layers"},
    {"firstName":"Carl","lastName":"Louis"},
]}


<%@ Page Title="About" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="About.aspx.cs" Inherits="ReadDataJSON.About" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
  
            $("#Result").click(function() {
                $.ajax({
                    type: "GET",
                    url: "C:\Users\NISCHALINN\Documents\test.json",
                    beforeSend: function() {
                        $.blockUI({
                            fadeIn : 0,
                            fadeOut : 0,
                            showOverlay : false
                        });
                    },
                    dataType: "json",
			
                    success: function(data)
                    {
                        alert(data);
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert("Request: " + XMLHttpRequest.toString() + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown);
                    },
                    complete: function ()
                    {
                        $.unblockUI();
                    }
            });
        });
        });
 </script>


    <h2><%: Title %>.</h2>
    <h3>Your application description page.</h3>
    <h4>JSON Object Creation in JavaScript</h4>


    <p>Use this area to provide additional information.</p>

     
    <div>
        <% ------- display the JSON data in tabular format ------ %>
    </div>
   
</asp:Content>


Выходной формат таков:

FirstName 	LastName
------------------
Anna		Meyers
Betty		Layers
Carl		Louis
------------------


Как я могу это сделать? Пожалуйста помогите мне я новичок в этом деле ASP.NET.

С уважением!

2 Ответов

Рейтинг:
2

Peter Leow

Попробуйте это и адаптируйтесь:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){

// json String
var text = '{"employees":[' +
'{"firstName":"Anna","lastName":"Meyers" },' +
'{"firstName":"Betty","lastName":"Layers" },' +
'{"firstName":"Carl","lastName":"Louis" }]}';

// data returned as jsonObject
data = JSON.parse(text);

$.each(data.employees, function () {
        $("#table1").append("<tr><td>"+this.firstName+"</td><td>"+this.lastName  + "</td></tr>");
      });

});
</script>
</head>
<body>
<div>
<table id='table1' border="1">
</table>
</div>
</body>
</html>

Рейтинг:
0

sandeshjkota

Все, что вам нужно сделать, это передать данные в нижеприведенную функцию

function BuildTable(data) {
   // Parse only if its needed
   var jo = $.parseJSON(data);
   for (i = 0; i < jo.employees.length; i++) {
     var emp = jo.employees[i];
     var row = "<table><tbody><tr><td>" + emp.firstName +"</td><td>"+ emp.lastName+"</td></tr></tbody></table>";
     $('#resultTable').append(row);
   }
}


И измените свой HTML-код, как показано ниже. 
<div>
   <table id="resultTable">
       <tr>
          <th>FirstName</th>
          <th>LastName</th>
       </tr>
   </table>
</div>


Или вы также можете создать вышеупомянутый HTML (заголовки) динамически