自动刷新多个div MVC

时间:2016-03-08 11:42:58

标签: javascript jquery ajax asp.net-mvc razor

我想在MVC视图中更新表中的数据列。 这是我要更新的视图。

   mGoogleApiClient = new GoogleApiClient.Builder(this)
            .addApiIfAvailable(Drive.API)
            .addConnectionCallbacks(this)
            .addOnConnectionFailedListener(this).addApi(Plus.API, Plus.PlusOptions.builder().build())
            .addScope(Plus.SCOPE_PLUS_LOGIN).build();

我写了一个简单的脚本来更新div。只是为了尝试我决定只更新id = current4的第4个div。  

<table class="table">
<tr>

    <th>
        @Html.DisplayNameFor(model => model.CurrentTemperature)
    </th>

    <th></th>
</tr>
@{int i = 1;}
@foreach (var item in Model)
{
    <tr>
        <td align="center" @*id="@("current"+i)" data-id="@item.ID"*@>
            <div id="@("current"+i)" data-id="@item.ID">
                @{Html.RenderAction("TemperatureUpdateDeviceList", new { idDevice = item.ID });}
            </div>       
        </td>

    </tr>
    i++;
}
</table>

使用此方法我无法执行正确的请求,因为生成的URL不正确。如何拥有正确的网址?

请注意,TemperatureUpdateDeviceList函数定义为:

$(function () {

    setInterval(function () {
        var id = $(this).attr('data-id');
            $.ajax({
                url: '@Url.Action("TemperatureUpdateDeviceList")',
                type: 'GET',
                data: { idDevice: id},
            }).success(function (partialView) {
                $('#current4').html(partialView);
            });
    },3000);
});

1 个答案:

答案 0 :(得分:3)

使用var id = $(this).attr('data-id');不会传递data-id值,因为$(this)不是您的<div>元素。如果要更新所有元素,请将html更改为

<div class="container" data-id="@item.ID">
    @{Html.RenderAction("TemperatureUpdateDeviceList", new { idDevice = item.ID });}
</div>

请注意,id属性不是必需的。然后在脚本中使用

var url = '@Url.Action("TemperatureUpdateDeviceList")';

setInterval(function () {
    $('.container').each(function() {
        var id = $(this).data('id');
        var div = $(this);
        $.get(url, { idDevice: id}, function(partialView) {
            div.html(partialView);
        });
    });
},3000);