Refresh Partial View Div in MVC 5

2020-02-09 19:50发布

站内问答 / JavaScript
824 1 4

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; }
}

1条回答
We Are One
2楼-- · 2020-02-09 20:37

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)