在 MVC 5 中刷新局部视图 Div
Posted
技术标签:
【中文标题】在 MVC 5 中刷新局部视图 Div【英文标题】：Refresh Partial View Div in MVC 5 【发布时间】：2015-09-13 23:19:47 【问题描述】：我正在尝试刷新 MVC 5 中的部分视图 div，以便表格显示新的 SQL 数据。但是，我遇到了一个问题。现在的方式是，当我在页面加载后将任何新数据添加到我的 SQL 表中时，div 不会刷新以包含新数据......只是页面加载时表中的数据。
这是我的控制器：
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>
索引视图：
@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;
【问题讨论】：
你的load()函数正在调用一个静态文件。您需要调用一个控制器方法来生成数据并根据该数据返回部分视图
【参考方案1】：
您的.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。
【讨论】：
谢谢！这行得通！我没想过只返回部分而不是索引视图！另外...我最初使用的是 SignalR，但它不适合我的 CRUD 模型。此代码用于“通知”组件，因此我需要 2 秒更新...以上是关于在 MVC 5 中刷新局部视图 Div的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 java 脚本在 MVC 中单击按钮时调用相同的局部视图