0

I have a <div> on my html page that is filled with html helpers that are getting their contents from the Model of the page.

<div id="ChatArea">
@Html.DisplayFor(a => Model.ChatReferenceTime) <br />
@Html.DisplayFor(a => Model.ChatReferenceContent)
...
</div>

i want to refresh this div every 5 seconds to get updated info from the controller... - is there a way to do this without having the whole page refreshed every 5 seconds with an updated Model?

Anonymous
  • 21
  • 9
  • I would do something along the lines of create it as a partial and then create an action to serve that partial and then do an ajax call to that action – Pete Mar 02 '17 at 14:14
  • Ok thanks. you're saying that i should make that div as a partial - how exactly? The action i will make in the controller, but how do i call it with ajax? - i'm not really familiar with ajax – Anonymous Mar 02 '17 at 14:28
  • I used the second answer from this: http://stackoverflow.com/questions/7430976/rendering-partial-views-using-ajax – Pete Mar 02 '17 at 15:26

1 Answers1

1

You must refresh your div html with ajax call 

<script>
//Call the getData() function every 1000 millisecond
setInterval("getData()",1000);
function getData(){
$.ajax({
type: "Get",
dataType: "json",
url:'Home/GetChatData',//Your action link
contentType:"application/json;charset=utf-8",
success: function(data) {
    $("#ChatArea").html('<span>'+data.ChatReferenceTime+ '</span><br/><span>'+data.ChatReferenceContent+'</span>');
}
});
}
</script>
M.Azad
  • 3,673
  • 8
  • 47
  • 77