將預填充的動態錶轉換爲AJAX填充表

Question

我有一個數據集合，我以表格的形式顯示。當前的設置是：

@using System.Collections.Generic 
@model IEnumerable<Dictionary<String,String>> 

<table id="dashboard"> 
<thead> 
    @foreach (var item in Model.FirstOrDefault()) 
    { 
    <th> 
     @Html.DisplayFor(i => item.Key) 
    </th> 
    } 
    </thead> 
    <tbody> 
     @foreach (var item in Model) 
     { 
      <tr> 
       @foreach (var i in item) 
       { 
        <td> 
         @Html.DisplayFor(i1 => i.Value) 
        </td> 
       } 
      </tr> 
     } 

    </tbody> 

</table> 

數據來自多個SQL表中的任何一個，並且在此一般地顯示。我的目標是採用這個系統，並通過下拉菜單上的按鈕按下按鈕來創建表格。我已經有下拉菜單工作。我的困難是從我的收藏中獲取數據，以便我可以顯示它。

我想這將是沿着這一線的東西：

<input type="button" id="OneBtn" value="1" /> 
<script type="text/javascript" 
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
<script language="javascript" type="text/javascript"> 
$(function() { 
    $('#dashboard').hide(); 
    $("#OneBtn").click(function() { 
     $('#dashboard').hide(); 
     $("#dashboard").empty(); 
     $.ajax({ 
      cache: false, 
      type: "GET", 
      url: "/Home/GetTableData/", 
      data: { "id": 1 }, 
      success: function (data) { 
       alert(data); 

       /*$.each(data, function (index, item) { 
        var row = $('<tr></tr>'); // create new table row 
        row.append($('<td></td>').text(item.??)); 

        $('#dashboard').append(row); // add to table 
       }); 
       $('#dashboard').show();*/ 
      }, 
      error: function (xhr, ajaxOptions, throwError) { 
       alert("Error"); 
       $('#dashboard').hide(); 
      } 
     }); 
    }); 
}); 
</script> 

我真的不知道在哪裏可以從這裏雖然走。通過AJAX命令傳遞的數據是Dictionary對象列表。警報證明通過顯示：

System.Collections.Generic.List`1[System.Collections.Generic.Dictionary`2[System.String,System.String]] 

顯示此信息的正確方法是什麼？

編輯： 我意識到我傳遞的數據是錯誤的。我忘了將它作爲JSON請求發送。之後，警報顯示它正在接收一系列對象。

Answer 1

我採用的方法是這樣的：

<script language="javascript" type="text/javascript"> 
    $(function() { 
     $('#dashboard').hide(); 
     $("#OneBtn").click(function() { 
      $('#dashboard').hide(); 
      $("#dashboard").empty(); 
      $.ajax({ 
       cache: false, 
       type: "GET", 
       url: "/Home/GetTableData/", 
       data: { "id": 1 }, 
       success: function (data) { 
        var myTable = $('#dashboard'); 

        if (data.length > 0) 
        { 
         var firstRecord = data[0]; 

         var headerRow = $('<thead>'); 
         for (var columnTitle in firstRecord) 
         { 
          headerRow.append($('<th>', {text: columnTitle})); 
         } 

         myTable.append(headerRow); 

         var record; 
         var dataRow; 
         for (var dataIndex = 0; dataIndex < data.length; dataIndex++) 
         { 
          record = data[dataIndex]; 
          dataRow = $('<tr>'); 

          for (var column in firstRecord) 
          { 
           dataRow.append($('<td>', { text: record[column] })); 
          } 

          myTable.append(dataRow); 
         } 
        } 
        $('#dashboard').show(); 
       }, 
       error: function (xhr, ajaxOptions, throwError) { 
        alert("Error"); 
        $('#dashboard').hide(); 
       } 
      }); 
     }); 
    }); 
</script> 

這將創建在列標題後面命名的行並顯示錶。希望這可以成爲其他人碰到的有用解決方案。

Answer 2

您可以使用局部視圖來顯示錶格。然後你就可以在你的Home控制器

public Action GetTableData(int id) 
{ 
//get data from database and fill it in your view model 
return PartialView("_MyTableView",model); 
} 

從GetTableData行動返回部分視圖在阿賈克斯成功呼叫你可以做到這一點

$.ajax({ 
      cache: false, 
      type: "GET", 
      url: "/Home/GetTableData/", 
      data: { "id": 1 }, 
      success: function (data) { 
       $('#dashboard').empty().html(data); 
      }, 
      error: function (xhr, ajaxOptions, throwError) { 
       alert("Error"); 
       $('#dashboard').hide(); 
      } 
     });