Razor (mvc 3) 中的“UpdatePanel”答案

【问题标题】："UpdatePanel" in Razor (mvc 3)Razor (mvc 3) 中的“UpdatePanel”
【发布时间】：2011-05-03 07:16:24
【问题描述】：

是否有类似 Razor 的 UpdatePanel（在 ASPX 中）？

我想每 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 可以自行刷新，它就会被创建。

【问题讨论】：

标签： ajax asp.net-mvc-3 razor

【解决方案1】：

您可以使用 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 页面。

我最初的猜测是这个脚本可以放在partial中，修改如下。确保将 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 函数。

【讨论】：

【解决方案2】：

好吧，如果你不需要 AJAX 体验，不如使用 HTML 标签：

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

去这里：http://www.programmingfacts.com/auto-refresh-page-after-few-seconds-using-javascript/

【讨论】：

如果我不需要 Ajax 体验，为什么要使用 UpdatePanel？

【解决方案3】：

如果有人想要自我更新部分视图的完整代码，请查看！

控制器代码：

[HttpPost]
public ActionResult RefreshSelfUpdatingPartial() {

            // Setting the Models Content
            // ...

            return PartialView("_SelfUpdatingPartial", model);
}

部分代码（_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>

将 Partial 集成到“主”视图中的代码 (ViewWithSelfupdatingPartial.cs)：

 @Html.Partial("_FlatschelOverview", Model)

【讨论】：

什么是_FlatschelOverview？和Aktualisieren - RefreshFlatschels ？ FlatschelList ?
使用$('#SelfUpdatingPartialDiv').html(data);你丢失了代码链接到每次点击刷新：@Ajax.ActionLink("Aktualisieren", "RefreshFlatschels"

【解决方案4】：

HTML 中的<meta refresh ..> 标记对您有用。这是最好的选择

【讨论】：

【解决方案5】：

传统控件在 ASP MVC 中不起作用

您可以使用 Jquery 计时器 http://plugins.jquery.com/project/timers

其他选项可能是使用Delay 函数

在你的目标就像刷新整个页面一样简单，这个 SO 链接会引起你的兴趣：Auto refresh in ASP.NET MVC

希望对您有所帮助。

【讨论】：

当然。您可以在局部视图中使用此技术。