Обновление списка дивы после Ajax пост

Question

У меня есть этот код, который загружает некоторые div

<input class="input-large" placeholder="Notat" id="txtNewNote" type="text"> 
     <button class="btn" id="btnAddNote" type="button">Lagre</button> 

@foreach (var item in Model.UserNotes) 
    { 
     <div class="alert" id="divNote-@item.UserNoteID"> 
     <button type="button" class="close" onclick="NoteDeleteClicked(@item.UserNoteID)" id="btnCloseNote">&times;</button> 
     <strong>@item.User.Name - @item.Added</strong><br /> 
      @item.Text 
     </div> 
    } 

Затем я запускаю этот JavaScript, когда пользователь вводит больше текста:

var Text = $("#txtNewNote").val(); 
    var Added = Date.now(); 
    vvar UserID = $("#hiddenUserID").text(); 
    $.post("/api/apiUserNotes",{ Text : Text, Added: Added, UserID: UserID }, function()  { //need functianality for updating the list of divs above }); 

Любой может мне точку в прямое руководство здесь. Я не могу просто создать div после того, как сообщение будет выполнено, потому что мне нужно получить данные из базы данных, чтобы информация в div была правильной.

Answer 1

Есть в основном два подхода:

1. apiUserNotes возвращает HTML - Этот подход немного проще в обслуживании, поскольку у вас есть только один шаблон. Но он также более ограничивает в том смысле, что HTML хорош для показа, но не для манипулирования им.

2. apiUserNotes возвращает JSON - Это более гибкая поскольку JSON API может потребляться почти ничего, из HTML в родную прошивку или Android приложений, так как это гораздо легче манипулировать. Это также большая работа, поскольку у вас тогда есть шаблоны как на стороне сервера (ваш взгляд Razor), так и на стороне клиента (ваш HTML/JavaScript).

Это более или менее то, что # 1 будет выглядеть следующим образом:

Вы сначала сделать частичный вид для отображения пользовательских заметок:

_UserNotes.cshtml:

<div id="user-notes"> 
    @foreach (var item in Model.UserNotes) 
    { 
     <div class="alert" id="divNote-@item.UserNoteID"> 
      <button type="button" class="close" onclick="NoteDeleteClicked(@item.UserNoteID)" id="btnCloseNote">&times;</button> 
      <strong>@item.User.Name - @item.Added</strong><br /> 
       @item.Text 
     </div> 
    } 
</div> 

После У вас есть этот частичный просмотр, вы можете использовать его с вашего вида:

<input class="input-large" placeholder="Notat" id="txtNewNote" type="text"> 
<button class="btn" id="btnAddNote" type="button">Lagre</button> 
@Html.Partial("_UserNotes") 

И от вашего apiUserNotes действия:

public PartialViewResult apiUserNotes(string text, DateTime added, int userID) 
{ 
    // TODO: save new note 
    var notes = yourRepo.GetUserNotes(userID); 
    return PartialView("_UserNotes", notes); 
} 

Наконец, ваши сценарии на стороне клиента просто overrites в DIV, содержащий все записи пользователя:

var data = { 
    text = $("#txtNewNote").val(), 
    added = Date.now(), 
    userID = $("#hiddenUserID").text() 
}; 

$.post("/apiUserNotes", data, function (result) { 
    $('#user-notes').html(result); 
}); 

Есть, конечно, гораздо более эффективные способы сделать это , Например, вам не нужно перезагружать все примечания пользователя; только тот, который вы только что добавили. Но, надеюсь, это заставляет вас начать.

Answer 2

Вы можете получить доступ к следующим разделам следующим образом и обновить в соответствии с вашими требованиями.

$.post("/api/apiUserNotes",{ Text : Text, Added: Added, UserID: UserID }, 
function() 
    { 
    //need functianality for updating the list of divs above 
    $("div.alert").each(....) 
});