2011-05-03 51 views
10

Razor中是否有像UpdatePanel(在ASPX中)?Razor中的“UpdatePanel”(mvc 3)

我想每30秒自动刷新一次数据(例如表格,图表等)。 到点击以下链接每30秒类似:

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

感谢托比

编辑:

我可以补充一点,动作链接呈现的局部视图。

守则CSHTML:

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

守则控制器:

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

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

      return RedirectToAction("Index"); 
     } 
    } 

这将是创建如果PartielView能刷新自己。

回答

10

可以尝试类似于以下使用jQuery东西(未虽然测试)

<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> 

上述代码应放置在包含页即,不是局部视图页面。请记住,部分视图不是完整的html页面。

我最初的猜测是,这个脚本可以放在部分和修改如下。确保ajax数据类型设置为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> 

另一种方法是对JavaScript存储在一个单独文件js并使用AJAX成功回调Jquery getScript功能。

+0

$(document).ready()是否也适用于部分视图? – Tobias 2011-05-03 09:02:27

+0

非常感谢。 – Tobias 2011-05-03 09:57:52

4

如果有人想为selfupdating的完整代码局部视图看看!

代码的控制器:

偏(_SelfUpdatingPartial的
[HttpPost] 
public ActionResult RefreshSelfUpdatingPartial() { 

      // Setting the Models Content 
      // ... 

      return PartialView("_SelfUpdatingPartial", model); 
} 

代码。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> 

代码整合在 “主” - 视图(ViewWithSelfupdatingPartial.cs的部分):

@Html.Partial("_FlatschelOverview", Model) 
2

在HTML的标签<meta refresh ..>会为你工作。它是最好的选择