刷新MVC中的部分視圖div 5

我想刷新MVC 5中的部分視圖div，以便表格顯示新的SQL數據。但是，我遇到了一個問題。現在的方式是，當我在加載頁面之後向SQL表中添加任何新數據時（包括加載頁面時表中的數據），div不會刷新以包含新數據。刷新MVC中的部分視圖div 5

這裏是我的控制器：

public ActionResult Index() 
    { 

     List<List<object>> result = DataAccess.DataAccess.Read(Build.StringArray("Notifications")); 

     Notifications Notify = new Notifications(); 
     Notify.Update = new List<Notification>(); 

     foreach (List<object> row in result) 
     { 
      Notification x = new Notification(); 
      x.notificationMessage = (string)row[1]; 
      x.ID = (int)row[0]; 
      x.TimeStamp = (DateTime)row[2]; 
      Notify.Update.Insert(0,x); 
     } 


     return View("Index",Notify); 

    }

這裏是我的局部視圖：

@model inConcert.Models.Notifications 

<table class="table"> 
    <tr> 

     <th> 
      <h3>Update</h3> 
     </th> 
    <th> 
     <h3>TimeStamp</h3> 
    </th> 

</tr> 


@foreach (var item in Model.Update) 
{ 
    <tr> 
     <td> 
      @item.notificationMessage 
     </td> 

     <td> 
      @item.TimeStamp 
     </td> 

    </tr> 
} 

</table>

Index視圖：

@model inConcert.Models.Notifications 

<head> 
    <title></title> 
    <link href="@Url.Content("~/Content/Notifications.css")" rel="stylesheet" type="text/css" /> 

</head> 



<div id="notificationsTable"> 
    @Html.Partial("~/Views/Shared/NotificationPartial.cshtml") 
</div> 


<script type="text/javascript" src="~/Scripts/jquery-2.1.4.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
    setInterval(function() { 
     $("#notificationsTable").load("~/Views/Shared/NotificationPartial.cshtml"); 
    }, 2000); 
});

而且我的模型：

public class Notification 
{ 
    [Key] 
    public int ID { get; set; } 

    public string notificationMessage { get; set; } 

    public DateTime TimeStamp { get; set; } 
} 
public class Notifications : DbContext 
{ 
    public List<Notification> Update { get; set; } 
}

來源

2015-06-26 Erik

你'load（）'函數正在調用一個靜態文件。您需要調用控制器方法來生成數據並根據該數據返回部分視圖 –

你函數試圖調用將默認拋出403（禁止）錯誤靜態文件，並沒有數據被更新（我強烈建議你學會使用你的瀏覽器的工具 - 這應該是很明顯）

您需要創建一個控制器方法來生成模型並返回數據的局部視圖。例如

public ActionResult Fetch() 
{ 
    Notifications model = new Notifications(); 
    .... // populate your model from the repository 
    return PartialView("_Notifications", model); 
}

_Notifications.cshtml

@model inConcert.Models.Notification 
@foreach (var item in Model.Update) 
{ 
    <tr> 
    <td>@item.notificationMessage</td> 
    <td>@item.TimeStamp</td> 
    </tr> 
}

在主視圖中，最初加載它，你可以使用

@{Html.RenderAction("Fetch");}

，這意味着你不必創建和傳遞模型Index()方法

然後在腳本中

var url = '@Url.Action("Fetch")'; 
var notifications = $("#notificationsTable"); // cache it to avoid repeatedly searching the DOM 
setInterval(function() { 
    notifications.load(url); 
}, 2000);

備註：除非您希望數據每2秒不斷變化，否則此方法可能效率很低。作爲一個說服者，您應該考慮使用SignalR，以便您的服務器端代碼實時將內容推送到連接的客戶端。另請參閱this tutorial。

來源

2015-06-27 03:17:38

謝謝！這工作！我沒想過只返回部分索引視圖！另外...我最初使用SignalR，但它不符合我的CRUD模型。此代碼適用於「通知」組件，因此我需要2秒更新... – Erik

刷新MVC中的部分視圖div 5

回答

相關問題