Как загрузить динамическую таблицу в Razor Page с помощью ajax

Question

Я создаю одну страницу отчета для всех отчетов на основе @RouteData.Values.Все мои отчеты поступают с HomeController, и я просто хочу отобразить их на #table1 на странице Razor.

Отчеты имеют динамический размер в строке и столбце.

Отчеты RazorPageView

@page "{id}"
@model Test.Pages.Reports.IndexModel

<table id="table1" class="table table-responsive">        
</table>

@section Scripts {
<script type="text/javascript">
$(document).ready(function () {
        var id = @RouteData.Values["id"];        
        switch (id) {
            case 'Customers':
                apipath = 'GetAllCustomers';
                break;
            case 'Vendors':
                apipath = 'GetAllVendors';
                break;
            default:
                apipath = 'SomeOtherReport';
        }
        $.ajax({            
                url: "/Home/" + apipath,                
                type: "GET",
                contentType: "application/json; charset=utf-8",
                datatype: JSON,
                success: function (result) {
                    //Here i want to load dynamic type table data to #table1
                }
        });
    });
  </script>
}

Домашний контроллер

public class HomeController : Controller  
   {  
       [HttpGet]
        public ActionResult GetAllCustomers()
        {
            var result = _Context.Customers.ToList();
            return Json(result);
        }

    [HttpGet]
        public ActionResult GetAllVendors()
        {
            var result = _Context.Vendors.ToList();
            return Json(result);
        } 
   }

, чтобы мой URL выглядел "~ / Отчеты / Клиенты" или "~ / Отчеты / Продавцы"

Answer 1

Добавьте ниже к вашему успешному обратному вызову.

var allProperties = Object.getOwnPropertyNames(result[0]);
var tableHeader ='<tr>';
for(var i=0; i<allProperties.length; i++)
    {
        tableHeader += '<th>'+allProperties[i]+'</th>'
    }

var allRows = tableHeader + '</tr>';
for(var index =0;index<result.length; index++)
{
    var row = '<tr>';
    for(var i=0; i<allProperties.length; i++)
    {
        row += '<td>'+result[index][allProperties[i]]+'</td>'
    }
    row += '</tr>';
allRows  += row;
}
$('#table1').append(allRows);

Answer 2

Попробуйте выполнить

, если ваша функция ajax success соответствует следующим, и предположим, что в result ur получено столбцов (идентификатор, имя, адрес)

success: function (result) {
   var reportBody='';  
   $('#table1').empty();//clear table body               
   if(result.d.length>0)
   {
   //create body using $.each
   $.each(result.d,function(i,info){
   reportBody+='<tr><td>'+info.id+'</td><td>'+info.name+'</td><td>'+info.address+'</td></tr>'  
   });
   }
   else
   {
   reportBody+='<tr><td>There is no Record</td></tr>'
   }
   //append body to table table1 as follow
   $('#table1').append('<thead><tr><th>ID</th><th>Name</th><th>Address</th></tr></theah><tbody>'+reportBody+'</tbody>');
                }