0

我有这段代码可以加载一些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正确。

4

2 回答 2

0

您可以通过以下方式访问上面的 Divs，并根据您的要求进行更新。

 $.post("/api/apiUserNotes",{ Text : Text, Added: Added, UserID: UserID },
 function()
  { 
   //need functianality for updating the list of divs above 
   $("div.alert").each(....)
});
于 2013-02-28T10:41:19.427 回答
0

主要有两种做法：

  1. apiUserNotes返回 HTML - 这种方法更易于维护，因为您只有一个模板。但它也有更多限制，因为 HTML 有利于显示，但不利于操作它。

  2. apiUserNotes返回 JSON - 这更灵活，因为 JSON API 几乎可以被任何东西使用，从 HTML 到原生 iOS 或 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);
}

最后，您的客户端脚本简单地覆盖包含所有用户注释的 div：

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

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

当然有更有效的方法来做到这一点。例如，您不需要重新加载所有用户注释；只有你刚刚添加的那个。但希望这能让你开始。

于 2013-02-28T11:50:02.753 回答