Как заполнять записи базы данных в таблице ajax

Question

Итак, я перехожу к этой информации и имею таблицу с таблицей с пустыми таблицами, поэтому мне нужно иметь записи, хранящиеся в категорииList, для работы нижеприведенного кода. так что я пишу в categoryList, который является извлечение записи из моей категории менеджера и отображать данные из SQL

</table> 


<script> 
    $(document).ready(function() { 
     var categoryList = []; 


     var $courseTableElement = $('#categoryTable'); 
     var $rowElement; 
     var $cellElement; 
     var index = 0; 
     for (index = 0; index < categoryList.length; index++) { 
      $rowElement = $('<tr></tr>'); 
      $cellElement = $('<td></td>', { text: categoryList[index].CategoryName }); 
      $rowElement.append($cellElement); 
      $cellElement = $('<td></td>', { text: categoryList[index].CategoryId }); 
      $rowElement.append($cellElement); 
      $courseTableElement.append($rowElement); 


     } 
    }); 

</script> 

public List<Category> getAllCategory(string inUserId) 
    { 

     DataSet ds = new DataSet(); 

     List<Category> categoryList = new List<Category>(); 
     string sqlText = ""; 
     using (SqlConnection cn = new SqlConnection()) 
     { 
      cn.ConnectionString = 
      ConfigurationManager.ConnectionStrings["DefaultConnection"].ToString(); 
      using (SqlCommand cmd = new SqlCommand()) 
      { 
       cmd.Connection = cn; //setup the 
       cn.Open(); 
       using (SqlDataAdapter da = new SqlDataAdapter(cmd)) 
       { 
        sqlText = "SELECT CategoryId,CategoryName,CreatedBy,CreatedAt,UpdatedBy,UpdatedAt " + 
       " FROM Category "; 
        cmd.CommandText = sqlText; 
        cmd.Parameters.Add("@inCurrentUserId", SqlDbType.VarChar, 200).Value = inUserId; 


        da.Fill(ds, "CategoryData"); 
        cmd.CommandText = sqlText; 
       }//using SqlDataAdapter da 
       cn.Close(); 

      }//using SQLCommand cmd 
     }//using SQLConnection cn 

     foreach (DataRow dr in ds.Tables["CategoryData"].Rows) 
     { 

      Category category = new Category(); 
      category.CategoryId = Int32.Parse(dr["CategoryId"].ToString()); 
      category.CategoryName = dr["CategoryName"].ToString(); 
      category.CreatedBy = dr["CreatedBy"].ToString(); 
      category.CreatedAt = DateTime.Parse(dr["CreatedAt"].ToString()); 
      category.UpdatedBy = dr["UpdatedBy"].ToString(); 
      category.UpdatedAt = DateTime.Parse(dr["UpdatedAt"].ToString()); 
      categoryList.Add(category); 
     } 


     return categoryList; 
    } 

Answer 1

Вам просто нужно сделать Ajax запрос на ваш сервер и захват этих данных. Я делаю пару предположений.

1. Эта getAllCategory доступна для внешнего интерфейса через webapi или что-то в этом роде.

2. Эта getAllCategory вернет правильный json.

   function getDataFromServer(url, callback){ 
        var xmlhttp = new XMLHttpRequest(); 
        xmlhttp.open("get",url); 
        xmlhttp.onreadystatechange = function(){ 
        if(xmlhttp.readystate === 4 && xmlhttp.status === 200){ 
         //data was retrieved successfully. 
         callback(JSON.parse(xmlhttp.response)); 
        } 
        } 
        xmlhttp.send(); 
       } 
   
       $(document).ready(function() { 
       //the path to action must include the id in querystring 
       var url = 'path_to_action' 
       getDataFromServer(url, function(data){ 
        var courseTableElement = $('#categoryTable'); 
        for(var i = 0; i < data.length; i++){ 
         var row = $('<tr></tr>'); 
         var cell1 = $('<td></td>, { text: data[i].CategoryName }); 
         var cell2 = $('<td></td>, { text: data[i].CategoryId }); 
         row.append(cell1); 
         row.append(cell2); 
         courseTableElement.append(row); 
        } 
       } 
       });