如何在MVC中使用Ajax每秒刷新页面？

Question

我想在我的页面中创建一个机制,以便它使用Ajax每秒刷新一次表数据.我怎样才能做到这一点？

Answer 1

假设您有一个控制器操作将表作为局部视图返回,您可以使用:

<script type="text/javascript">
    $(function() {
        setInterval(loadTable,1000);  // invoke load every second
        loadTable(); // load on initial page loaded
    });

    function loadTable() {
        $('#tablecontainer').load( '/controller/tabledata' );
    }
</script>

<div id="tablecontainer">
</div>

您的tabledata操作将返回包含该表的部分视图.

 <table>
    <thead>...</thead>
    <tbody>...</tbody>
 </table>

编辑通过点击处理程序建立(省略脚本标签)

$(function() {
     var timer;
     $('#enableCheckbox').change( function() {
         if ($(this).find(':checked').length) {
             timer = setInterval(loadTable,1000); // set up timer
             loadTable();
         }
         else if (timer) { // stop the interval timer
             clearInterval(timer);
             timer = null;
         }
     });
 });

 function loadTable() {
     $('#tablecontainer').load( '/controller/tabledata #innercontainer' );
 }

完整视图(至少包含以下内容)

 <div id="tablecontainer">
 <div id="innercontainer">
 <table>
    <thead>...</thead>
    <tbody>...</tbody>
 </table>
 </div>
 </div>