Asp.net MVC update a web page without reloading the page after 15 seconds using ajax

Question

Referring to my question i want to update a page ie refresh the page only after every 15 seconds without reloading it.For now i am using <meta http-equiv="refresh" content="15"> it updates the page while reloading it and it's not a good approach as it reloads the page which doesn't look good. So for that i want to use ajax which will update/refresh my page without reloading after every 15 seconds.

My target url is http://localhost:17104/Home/MultiGraph

I have searched many articles on it and found that the ajax is using he data to update the page. I just want to update/refresh the page without reloading

Updated Code:

I have used setInterval and in it i have placed my ajax call like bellow

setInterval(function () {
    $.ajax({
        url: '/Home/MultiGraph',
        type: "POST",
        success: function (result) {
            $("#charts").html(result);
            alert(result);
        }
    });
    //chart1.redraw();
    //alert("hello");
}, 8000);

While in my alert it's showing me some hideous data

After i press ok i get the bellow result

Also in ajax call charts is my div in which my charts are placed

 <div id="charts">
    <div id="container1" style="height: 400px; width:auto"></div>


    <div id="container2" style="height: 400px; width:auto"></div>


    <div id="container3" style="height: 400px; width:auto"></div>


    <div id="container4" style="height: 400px; width:auto"></div>
</div>

Any help would be highly appreciated

Answer 1

Problem: you are pulling the layout along with your view.

Solution: You need to return a partial view when ever you request from a Ajax call , Else the enitre HTML along with your Layout page will be passed by the server.

To check if the request was made from Ajax or not you can do as below. This is just a pseudo code.

if (Request.IsAjaxRequest())
{
   return PartialView(); //you can pass in some data into view as PartialView(myModel)
}
 return View();

So you can have the same ActionResult and all other logics in it and just add this if check at the end to toggle between a full view and a partial view.

Also point to note: Make sure your view does not have the Layout setting code .

ie: Something like below.

@{
   Layout = "~/Views/Shared/_Layout.cshtml";
}

If you have this and try to do a return PartialView(); it will not work, It will still return you the Layout. So make sure you remove the layout settings line of code.

After that has been taken care of the default layout will be used when you actually do a return View(); And a view with the layout will be returned when you use return PartialView(); .

Which is your default view? You can get that information if you look at the file _ViewStart.cshtml in your Views folder.

Answer 2

success: function (result) {
            $("#charts").html(result);
            alert(result);
        }

where "result" above is a string which represents the entire page... so it would be the same as redirecting to the same url for a refresh of the page.

problem there is no target element which you could target to do this... ie

$('html').replaceWith(result); 

is close but its not the entire page.

anyway your main problem is steamed from targeting the wrong target for the whole page $("#charts"), but the problem is that with the data in result you would not be able to achieve the effect you wanted anyway with changing this to $('html')

so i would suggest that you change the data which is returned from '/Home/MultiGraph' and create a new controller action which only renders the portion you want.

This can be archived with MVC Partialview("ViewName", viewModel)

Hope this helps