“UpdatePanel” in Razor (mvc 3)

Question

Is there something like UpdatePanel (in ASPX) for Razor?

I want to refresh data (e.g. table, chart, ...) automaticly every 30 seconds. Similar to clicking the following link every 30 seconds:

 @Ajax.ActionLink("Refresh", "RefreshItems", new AjaxOptions() {
     UpdateTargetId = "ItemList",
     HttpMethod = "Post"})

Edit:

I may should add that the action link renders a partial view.

Code in cshtml:

<div id="ItemList">
  @Html.Partial("_ItemList", Model)
</div>

Code in Controller:

    [HttpPost]
    public ActionResult RefreshItems() {
        try {
            // Fill List/Model
            ... 

            // Return Partial
            return PartialView("_ItemList", model);
        }
        catch (Exception ex) {

            return RedirectToAction("Index");
        }
    }

It would be create if the PartielView could refresh itself.

Answer 1

You can try something similar to the following using Jquery (have not tested though)

<script type="text/javascript">
   $(document).ready(function() {
        setInterval(function()
        {
         // not sure what the controller name is
          $.post('<%= Url.Action("Refresh", "RefreshItems") %>', function(data) {
           // Update the ItemList html element
           $('#ItemList').html(data);
          });
        }
        , 30000);
   });
</script>

The above code should be placed in the containing page i.e. not the partial view page. Bear in mind that the a partial view is not a complete html page.

My initial guess is that this script can be placed in the partial and modified as follows. Make sure that the ajax data type is set to html.

<script type="text/javascript">
    setInterval(function()
    {
      // not sure what the controller name is
      $.post('<%= Url.Action("Refresh", "RefreshItems") %>', function(data) {
        // Update the ItemList html element
        $('#ItemList').html(data);
      });
    }
    , 30000);
</script>

Another alternative is to store the javascript in a separate js file and use the Jquery getScript function in ajax success callback.

Answer 2

The <meta refresh ..> tag in HTML will work for you. Its the best option

Answer 3

Well, if you don't need the AJAX expierience than use the HTML tag:

<meta http-equiv=”refresh” content=”30; URL=http://www.programmingfacts.com”>

go here: http://www.programmingfacts.com/auto-refresh-page-after-few-seconds-using-javascript/

Answer 4

Traditional controls don't works in ASP MVC

You could do it using Jquery timers http://plugins.jquery.com/project/timers

Other option could be to use the Delay function

In your target is as simple as refresh the whole page, this SO link will be of your interest: Auto refresh in ASP.NET MVC

Hope It Helps.

Answer 5

If someone wants the complete code for a selfupdating partial view have a look!

Code of the Controller:

[HttpPost]
public ActionResult RefreshSelfUpdatingPartial() {

            // Setting the Models Content
            // ...

            return PartialView("_SelfUpdatingPartial", model);
}

Code of the Partial (_SelfUpdatingPartial.cshtml):

@model YourModelClass

<script type="text/javascript">
setInterval(function () {
    $.post('@Url.Action("RefreshSelfUpdatingPartial")', function (data) {
            $('#SelfUpdatingPartialDiv').html(data);
        }
    );
}, 20000);
</script>
// Div
<div id="SelfUpdatingPartialDiv">

// Link to Refresh per Click
<p>
@Ajax.ActionLink("Aktualisieren", "RefreshFlatschels", new AjaxOptions() {
UpdateTargetId = "FlatschelList",
HttpMethod = "Post", InsertionMode = InsertionMode.Replace
})
</p>

// Your Code
// ...

</div>

Code to integrate the Partial in the "Main"-View (ViewWithSelfupdatingPartial.cs):

 @Html.Partial("_FlatschelOverview", Model)