“更新面板"在剃刀 (mvc 3) [英] "UpdatePanel" in Razor (mvc 3)

问题描述

是否有适用于 Razor 的 UpdatePanel(在 ASPX 中)之类的东西?

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

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

我应该补充一点，操作链接呈现部分视图.

cshtml 中的代码:

@Html.Partial("_ItemList", 模型)

控制器中的代码:

 [HttpPost]公共 ActionResult RefreshItems() {尝试 {//填充列表/模型...//返回部分返回 PartialView("_ItemList", 模型);}捕获(异常前){return RedirectToAction("索引");}}

如果 PartielView 可以自行刷新，它就会被创建.

解决方案

您可以使用 Jquery 尝试类似以下内容(尚未测试)

上面的代码应该放在包含页面中，即不是部分视图页面.请记住，部分视图不是完整的 html 页面.

我最初的猜测是，这个脚本可以放在partial中，修改如下.确保 ajax 数据类型设置为 html.

另一种选择是将 javascript 存储在单独的 js 文件中并使用 Jquery getScript ajax 成功回调函数.

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.

解决方案

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.

这篇关于“更新面板"在剃刀 (mvc 3)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！