在 MVC 5 中刷新部分视图 Div [英] Refresh Partial View Div in MVC 5
问题描述
我正在尝试刷新 MVC 5 中的部分视图 div，以便表将显示新的 SQL 数据.但是，我遇到了问题.现在的情况是，当我在页面加载后向 SQL 表添加任何新数据时，div 不会刷新以包含新数据......只是页面加载时表中的数据.
这是我的控制器:
public ActionResult Index(){列表<列表<对象>>结果 = DataAccess.DataAccess.Read(Build.StringArray("Notifications"));通知 Notify = new Notifications();Notify.Update = new List();foreach (List 这是我的部分视图:
@model inConcert.Models.Notifications<table class="table"><tr><th><h3>更新</h3></th><th><h3>时间戳</h3></th></tr>@foreach(Model.Update 中的 var 项目){<tr><td>@item.notificationMessage</td><td>@item.TimeStamp</td></tr>}索引视图:
@model inConcert.Models.Notifications<头><title></title><link href="@Url.Content("~/Content/Notifications.css")" rel="stylesheet" type="text/css"/><div id="notificationsTable">@Html.Partial("~/Views/Shared/NotificationPartial.cshtml")<script type="text/javascript" src="~/Scripts/jquery-2.1.4.min.js"></script><script type="text/javascript">$(document).ready(function () {设置间隔(函数(){$("#notificationsTable").load("~/Views/Shared/NotificationPartial.cshtml");}, 2000);});
还有我的模特:
公共类通知{[钥匙]公共 int ID { 获取；放;}公共字符串notificationMessage { 获取；放;}公共日期时间时间戳 { 获取；放;}}公共类通知:DbContext{公共列表<通知>更新{得到;放;}}您的 .load() 函数正在尝试调用静态文件，该文件默认会抛出 403 (Forbidden) 错误并且没有数据更新(强烈建议你学会使用浏览器工具)
您需要创建一个控制器方法来生成模型并返回数据的部分视图.例如
public ActionResult Fetch(){通知模型 = new Notifications();....//从存储库填充您的模型返回 PartialView("_Notifications", 模型);}_Notifications.cshtml
@model inConcert.Models.Notification@foreach(Model.Update 中的 var 项目){<tr><td>@item.notificationMessage</td><td>@item.TimeStamp</td></tr>}在主视图中，要初始加载它，您可以使用
@{Html.RenderAction("Fetch");}这意味着您不必在 Index() 方法中创建和传递模型
然后在脚本中
var url = '@Url.Action("Fetch")';var 通知 = $("#notificationsTable");//缓存它以避免重复搜索 DOM设置间隔(函数(){通知.负载(网址)；}, 2000);旁注:除非您期望数据每 2 秒不断变化，否则这种方法可能非常低效.作为替代方案，您应该考虑使用 SignalR 以便您的服务器端代码在发生时将内容推送到连接的客户端，实时.另请参阅本教程.
I am trying to refresh a partial view div in MVC 5 so a table will show new SQL data. However, I'm running into a problem. The way it is now, the div is not refreshing to include new data when I add any new data to my SQL table after page-load...just the data that was in the table on page-load.
Here is my Controller:
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);
}
Here is my Partial View:
@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>
The Index View:
@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);
});
And my Model:
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; }
}
Your .load() function is attempting to call a static file which will by default throw a 403 (Forbidden) error and no data is updated (I strongly suggest you learn to use your browser tools)
You need to create a controller method that generates your model and returns a partial view of your data. For example
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>
}
In the main view, to initially load it, you can use
@{Html.RenderAction("Fetch");}
which means you do not have to create and pass the model in the Index() method
Then in the script
var url = '@Url.Action("Fetch")';
var notifications = $("#notificationsTable"); // cache it to avoid repeatedly searching the DOM
setInterval(function () {
notifications.load(url);
}, 2000);
Side note: Unless you expecting the data to be constantly changing every 2 seconds, this approach could be very inefficient. As an aletrnative, you should consider using SignalR so your server-side code pushs content to the connected clients as it happens, in real-time. Refer also this tutorial.
这篇关于在 MVC 5 中刷新部分视图 Div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
