jquery - Simple Automatic Refresh using JavaScript in a Razor Page -
i want know how simple refresh of html table, without re-loading whole page.
i timer set refresh every 5 seconds.
the razor code 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>  <a href="~/record/@record.uri">@record.title</a> <br> <label style="font-weight:bold;">record number:</label>  @record.number<br> <label style="font-weight:bold;">media format:</label>  @record.getpropertyorfieldstring("mediaformat")<br> <label style="font-weight:bold;">author:</label>  @record.getpropertyorfieldstring("recordauthor")<br /> <label style="font-weight:bold;">tags:</label>  @record.notes </td> </tr> } } </tbody> </table>
well don't know if have tried give setinterval
javascript , partial views reload table.
first create partial view this: (create partialview called "_results" or whatever want)
public actionresult getpartialresults() { results yourmodel = new results(); //your logic here populate model return partialview("_results", yourmodel); }
then partial view put code:
@model yourproject.models.results //or whatever model <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>  <a href="~/record/@record.uri">@record.title</a> <br> <label style="font-weight:bold;">record number:</label>  @record.number<br> <label style="font-weight:bold;">media format:</label>  @record.getpropertyorfieldstring("mediaformat")<br> <label style="font-weight:bold;">author:</label>  @record.getpropertyorfieldstring("recordauthor")<br /> <label style="font-weight:bold;">tags:</label>  @record.notes </td> </tr> } } </tbody> </table>
then in view create
renderaction
call partialview<div id="tableresults"> @{html.renderaction("getpartialresults", "yourcontroller");} <!--you pass parameters if need them: , new{ param1 = "yourvalue" } after controller --> </div>
now below create simple script execute every 5 seconds jquery , javascript
<script> $(function(){ setinterval(function(){ //this code execute after page loads every 5 seconds, change on click event or whatever need var url = "@html.raw(url.action("getpartialresuls", "yourcontroller", new { param1 = "-param1" }))"; //this part neccesary if using querystring parameters, if not can ignore it. url = url.replace("-param1", yourvariableorvaluehere); //your partialview reload every 5 seconds method calling in controller $("#tableresults").load(url); }, 5000); }); </script>
and think that's need. hope helps.
Comments
Post a Comment