Question

我正在尝试使用JSON和C＃.net将值从数据库加载到html表。我没有显示超过1427的记录并显示错误＆＃34;意外的令牌＆lt;＆＃34;。我在网上查了但是我得不到结果。

提前致谢

我尝试过：

// JSON

$(document).ready(function () {
      bindData();
});

function bindData() {
$.ajax({
    type: "POST",
    url: "MyTestForm.aspx/getData",
    data: "{}",
    contentType: "application/json;charset=utf-8",
    datatype: "jsondata",
    async: "true",
    success: function (response) {

        var msg = eval('(' + response.d + ')');

        if ($('#tblResult').length != 0) {
            $("#tblResult").remove();
        }

        var table = "<table class='tblResult' id='tblResult'><thead><tr><th>Name</th><th>Address</th><th>Age</th><th>Action</th></tr></thead> <tbody>";

        for (var i = 0; i <= (msg.length - 1) ; i++) {
            var row = "<tr>";
            row += '<td>' + msg[i].Name + '</td>';
            row += '<td>' + msg[i].Address + '</td>';
            row += '<td>' + msg[i].Age + '</td>';
            row += '<td><img src="edit.png" title="Edit Record." onclick="bindRecordToEdit(' + msg[i].Id + ')" /> ';
            row += '    <img src="delete.png" title="Delete Record." onclick="deleteRecord(' + msg[i].Id + ')" /></td>';
            row += '</tr>';
            table += row;

        }

        table += "</tbody></table>";
        $('#divData').html(table);
        $('#divData').slideDown("slow");

    },
    error: function (response) {
        alert(response.status + ' ' + response.statusText);
    }
});

}

// C＃

[WebMethod]
public static string bindRecordtoEdit(int id)
{
    string data = string.Empty;
    try
    {
        using (MyTestDatabaseEntities context = new MyTestDatabaseEntities())
        {
            var obj = (from r in context.MstNewTests select r).ToList();
            JavaScriptSerializer serializer = new JavaScriptSerializer();
            data = serializer.Serialize(obj);
        }
        return data;
    }
    catch (Exception)
    {
        return data;
    }
}

Answer 1

要解析您的JSON数据，请使用内置的JSON对象

var data = JSON.parse(input);

以下是使用table，createTHead，insertRow()，insertCell和textContent构建表格的示例。

function makeTable(input) {
  "use strict";

  // Declare the used variables;
  var table, thead, tbody, tr, data, td, img, i, length;

  // Create the table element as an object, in plain javascript.
  table = document.createElement('table');
  table.class = 'tblResult';
  table.id = 'tblResult';

  // Create a header, automatically inserted into the table.
  thead = table.createTHead();

  // Create a row, automatically inserted into the thead.
  tr = thead.insertRow();

  // Insert cells into the row. By using textContent it doesn't matter if
  // the text has special charactes like <, > and &. It will be treated
  // as text, not HTML. You will not get TH-elements here, but TD-elements
  // but you can style "thead td" in CSS if you want it bold and centered.
  tr.insertCell().textContent = 'Name';
  tr.insertCell().textContent = 'Address';
  tr.insertCell().textContent = 'Age';
  tr.insertCell().textContent = 'Action';

  // Create a tbody, automatically inserted into the table.
  tbody = table.createTBody();


  length = input.length; // Get the length, only onte time.
 for ( i = 0; i < length ; i=i+1) {
    // Get the current data at one time. No need to use [i] on every row.
    // Less typing and less chance to get it wrong.
    data = input[i];

    // Creates a row, automatically linked to tbody.
    tr = tbody.insertRow();

    // Insert the data into cells, as TEXT, not HTML. Doesn't matter
    // what the content is.
    tr.insertCell().textContent = data.Name;
    tr.insertCell().textContent = data.Address;
    tr.insertCell().textContent = data.Age;

    // Creates a cell for your images.
    td = tr.insertCell();

    img = new Image();
    img.src = 'edit.png';
    img.dataset.name = 'edit';
    img.dataset.value = data.id;
    img.title = 'Edit Record';
    td.appendChild(img); // Add image to td


    img = new Image();
    img.src = 'delete.png';
    img.dataset.name = 'edit';
    img.dataset.value = data.id;
    img.title = 'Delete Record';
    td.appendChild(img); // Add image to td

  }

  // Instead of using a lot of eventhandlers, that will use a lot of
  // memory and other resources, I use one eventhandler for everything.
  // Yes, ONE.
  table.addEventListener(
    'click',
    function (event) {
      var target = event.target;

      // If if isn't an image, then return.
      if (target.nodeName != 'IMG') return;
      console.log(target);

      switch(target.dataset.name) {
        case 'edit':
         yourEditFunction(target.dataset.value);
         break;
        case 'delete':
         yourDeleteFunction(target.dataset.value);
         break;
      }
    }
  );
  return table;
};

这当然是你自己的功能。我只是把它们包括在内有一个完整的例子。

function yourEditFunction(id) {
  console.log('edit ', id)
};

function yourDeleteFunction(id) {
  console.log('delete ', id)
};

Answer 2

尝试jquery模板插件，它对重复代码很有用。

<script id="trTemplate" type="text/x-jquery-tmpl">
            <tr>
                {{each $data}}
                    <td>${Col}</td>
                {{/each}}
            </tr>
</script>


<table id="containerTable">
</table>

在Ajax中添加此行sucess将数据替换为数据。

$('#trTemplate').tmpl(data).appendTo('#containerTable');

没有显示超过1427的记录

2 个答案: