ASP.NET - Recarga tabla html usando ajax

 
Vista:
sin imagen de perfil
Val: 36
Ha disminuido su posición en 2 puestos en ASP.NET (en relación al último mes)
Gráfica de ASP.NET

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.


image-1

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
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder