Ciao,
dovrai separare la tabella dal suo contenuto, che invece verrà recuperato tramite chiamata ajax.
Puoi seguire questi passi (a grandi linee).
Nella view attuale, quella di cui hai postato il codice, lascia soltanto questo.
<table id="tableContacts" class="uk-table uk-table-hover uk-table-striped" style="width:100%">
<thead>
<tr>
<th>Cognome</th>
<th>Nome</th>
<th>Nazione</th>
</tr>
</thead>
<tbody id="tt">
</tbody>
<tfoot>
<tr>
<th>Cognome</th>
<th>Nome</th>
<th>Nazione</th>
</tr>
</tfoot>
</table>
<script>
$(document).ready(function() {
setInterval(ajaxd, 3000); //Non è una soluzione ideale ma per ora ok
});
//Qui metti la definizione di ajaxd
</script>
Come vedi ho tolto anche la tipizzazione forte (cioè la direttiva @model). In pratica questa diventa una view che non visualizza nessun dato.
Ora sarà compito della funzione javascript
ajaxd fare una richiesta ajax alla tua applicazione. A questa richiesta dovrà rispondere una nuova action che creerai nel tuo controller e che si occuperà di chiamare il webservice e restituire i primi 10 risultati formattati in HTML (o in JSON se lo preferisci).
Quindi, questa nuova action può generare HTML avvalendosi di una nuova view in cui inserirai questo, cioè le righe di dati.
@model List<ContactViewModel>
@{
Layout = null;
}
@if (Model != null)
{
try
{
@foreach (var contact in Model)
{
<tr>
@if (contact.Surname != null)
{
<td>@contact.Surname</td>
}
else
{
<td></td>
}
@if (contact.Name != null)
{
<td>@contact.Name</td>
}
else
{
<td></td>
}
@if (contact.Address != null)
{
if (contact.Address.Country != null)
{
<td>@contact.Address.Country</td>
}
else
{
<td></td>
}
}
else
{
<td></td>
}
</tr>
}
}
catch(Exception ex)
{
}
}
Ora non resta che parlare della funzione javascript ajaxd. Come fa ad aggiungere queste righe alla tabella?
Puoi usare i metodi di jQuery. Ecco una soluzione rapida per accodare il contenuto ottenuto da una richiesta ajax.
var pagina = 1;
function ajaxd() {
$.get('tuoController/tuaNuovaAction?pagina' + pagina, function(data){
$('#tt').append(data);
});
//Ogni volta che ajaxd viene chiamata, la pagina si incrementa
pagina++;
}
Attenzione perché questo non è codice che ho provato e perciò potrebbe non funzionare.
Inoltre, questo è solo per darti un'idea di come realizzarlo ed è lontano dall'essere il codice finale.
Per esempio non mi è chiaro perché vuoi caricare una pagina ogni 3 secondi e non mi hai detto se effettivamente è necessario che l'utente veda tutti i risultati in un'unica pagina.
ciao,
Moreno
Modificato da BrightSoul il 02 settembre 2019 13:49 -
