Recarga tabla html usando ajax
Publicado por fernando (26 intervenciones) el 23/06/2019 22:27:18
Hola estaba probando actualizar una tabla html automaticamente cada 'x' tiempo sin recargar la pagina, en esta primera version estoy teniendo problemas, muestro a continuación.

A continuacion pongo el codigo:
Vista:
Controlador:
A continuacion pongo el codigo:
Vista:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
@model IEnumerable<ProyectoPuerto.Models.IndoorMonitorViewModel>
@{
ViewData["Title"] = "Monitor Depósito";
}
<table class="table">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.RetirementNumber)
</th>
<th>
@Html.DisplayNameFor(model => model.TruckRegistration)
</th>
<th>
@Html.DisplayNameFor(model => model.Status)
</th>
<th></th>
</tr>
</thead>
<tbody id="theTable">
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.RetirementNumber)
</td>
<td>
@Html.DisplayFor(modelItem => item.TruckRegistration)
</td>
<td>
@Html.DisplayFor(modelItem => item.Status)
</td>
</tr>
}
</tbody>
</table>
<input type="button" id="btnSave" value="update" />
<input type="text" id="txtSupplier" />
@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script type="text/javascript">
$(document).ready(function () {
// $.ajax({
// url:
// type: 'POST',
// datatype: 'JSON',
// success: function (data) {
// if (data != "") {
// for (var i = 0; i < data.length; i++) {
// $("#myBody").html("<tr><td>" + data[i].RetirementNumber + "</td><td>" + data[i].TruckRegistration + "</td></tr>");
// }
// }
// }
// });
$("#btnSave").click(function () {
$.ajax(
{
type: "POST", //HTTP POST Method
url: "/TruckDrivers/TableData" // Controller/View
/* data: { //Passing data
//Reading text box values using Jquery
//Line: $("#txtLine").val(),
//Supplier: $("#txtSupplier").val()
}*/
}).success(function () {
$("#theTable").load("/TruckDrivers/InternalMonitor");
//window.location.reload();
});
});
//setTimeout('document.location.reload()', 10000);
});
</script>
}
Controlador:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
[HttpPost]
public ActionResult TableData()
{
IEnumerable<TruckDriver> allTruckDrivers = GetAllTruckDrivers();
/*using (SqlConnection con = new SqlConnection(@"Server=(localdb)\\MSSQLLocalDB;Database=RetiroMercaderia;Trusted_connection=True;MultipleActiveResultSets=true"))
{
con.Open();
SqlCommand cmd = con.CreateCommand();
cmd.CommandType = CommandType.Text;
cmd.CommandText = "select * from TruckDriver";
cmd.ExecuteNonQuery();
DataTable dt = new DataTable();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
}*/
return PartialView("Index", allTruckDrivers);
}
Valora esta pregunta


0