2015-06-26 4 views
3

Я пытаюсь обновить частичный div в MVC 5, чтобы таблица отображала новые данные SQL. Однако я столкнулся с проблемой. Как сейчас, div не освежает включение новых данных, когда я добавляю новые данные в таблицу SQL после загрузки страницы ... только данные, которые были в таблице на странице-загрузке.Обновить Partial View Div в MVC 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> 

Индекс Вид:

@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; } 
} 
+0

Функция 'load()' вызывает статический файл. Вам нужно вызвать метод контроллера, который генерирует данные и возвращает частичный вид на основе этих данных. –

ответ

7

Ваша .load() функция пытается вызвать статический файл, который будет по умолчанию метнуть 403 (Forbidden) ошибки и данные не обновляются (я настоятельно рекомендую вам научиться использовать свои инструменты браузера - это должно быть очевидно)

Вам необходимо создать метод контроллера, который генерирует вашу модель и возвращает частичный вид ваших данных. Например

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 секунды, этот подход может быть очень неэффективным. В качестве aletrnative вам следует подумать об использовании SignalR, поэтому ваш серверный код нажимает контент на подключенные клиенты, как это происходит, в режиме реального времени. См. Также this tutorial.

+0

Спасибо! Это сработало! Я не думал о возвращении только частичного, а не индекса! Также ... Я изначально использовал SignalR, но это не соответствовало моей модели CRUD. Этот код предназначен для компонента «Уведомление», поэтому мне нужны 2-секундные обновления ... – Erik