Question

我想知道如何简单刷新HTML表格，而无需重新加载整个页面。

我希望将计时器设置为每5秒刷新一次。

Razor代码是：

<table class="table trim-list search-results" id="res">
    <tbody>

   @foreach (Record record in Model.Results)
   {

       var renditionuri = getRendition(record);                                     

                <tr style="float:left;">                                 
                    <td class="row-icon">
                        <div id="thumb_col" style="margin-right:10%;">
                            <img class="thumbnail" style="padding:3px;" src="~/record/@record.Uri/recordrendition/@renditionuri"/>                        
                        </div>
                    </td>
                    <td class="prop-val">   
                        <label style="font-weight:bold;">Title: </label>&thinsp;
                            <a href="~/Record/@record.Uri">@record.Title</a>&thinsp;<br>                            
                        <label style="font-weight:bold;">Record Number:</label>&thinsp;
                            @record.Number<br>
                        <label style="font-weight:bold;">Media Format:</label>&thinsp;
                            @record.GetPropertyOrFieldString("MediaFormat")<br>
                        <label style="font-weight:bold;">Author:</label>&thinsp;
                            @record.GetPropertyOrFieldString("RecordAuthor")<br />
                        <label style="font-weight:bold;">Tags:</label>&thinsp;
                            @record.Notes
                    </td>
                </tr>
       }
   }
    </tbody>
</table>

Answer 1

好吧，我不知道你是否尝试过任何东西，但是你可以用javascript和一些部分视图来查看setInterval来重新加载你的表格。

首先你可以创建一个这样的局部视图:(创建一个名为“_Results”的部分视图或任何你想要的）

 public ActionResult GetPartialResults()
 {
      Results yourModel = new Results();
      //your logic here to populate your model
      return PartialView("_Results", yourModel);
 }

然后你的部分视图就是你的代码：

@model YourProject.Models.Results //or whatever your model is
<table class="table trim-list search-results" id="res">
    <tbody>

    @foreach (Record record in Model.Results)
    {

       var renditionuri = getRendition(record);                                     

            <tr style="float:left;">                                 
                <td class="row-icon">
                    <div id="thumb_col" style="margin-right:10%;">
                        <img class="thumbnail" style="padding:3px;" src="~/record/@record.Uri/recordrendition/@renditionuri"/>                        
                    </div>
                </td>
                <td class="prop-val">   
                    <label style="font-weight:bold;">Title: </label>&thinsp;
                        <a href="~/Record/@record.Uri">@record.Title</a>&thinsp;<br>                            
                    <label style="font-weight:bold;">Record Number:</label>&thinsp;
                        @record.Number<br>
                    <label style="font-weight:bold;">Media Format:</label>&thinsp;
                        @record.GetPropertyOrFieldString("MediaFormat")<br>
                    <label style="font-weight:bold;">Author:</label>&thinsp;
                        @record.GetPropertyOrFieldString("RecordAuthor")<br />
                    <label style="font-weight:bold;">Tags:</label>&thinsp;
                        @record.Notes
                </td>
            </tr>
        }
     }
   </tbody>
</table>

然后在您的视图中，您可以轻松创建RenderAction来调用该部分视图

<div id="tableResults">
   @{Html.RenderAction("GetPartialResults", "YourController");}
   <!--you could pass parameters if you need them: , new{ param1 = "yourvalue" } after the controller -->
 </div>

现在，您可以创建一个使用jquery和javascript每5秒执行一次的简单脚本

<script>
$(function(){
    setInterval(function(){
       //this code will execute after page loads every 5 seconds, you could change on a click event or whatever you need
       var url = "@Html.Raw(Url.Action("GetPartialResuls", "YourController", new { param1 = "-param1" }))";
       //This part is only neccesary if you are using querystring parameters, if not you can ignore it.
       url = url.replace("-param1", yourVariableOrValueHere);
       //your partialview will reload every 5 seconds with the method you are calling in the controller
       $("#tableResults").load(url);
     }, 5000);
 });
</script>

我认为这就是你需要的一切。希望它有所帮助。

Answer 2

您可以使用SignalR。请查看更多详细信息here

在Razor页面中使用JavaScript进行简单的自动刷新

2 个答案: