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

次の方法で上記のDivにアクセスし、必要に応じて更新できます。

 $.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

主に次の 2 つのアプローチがあります。

  1. apiUserNotesは HTML を返します- テンプレートが 1 つしかないため、このアプローチは保守が少し簡単です。しかし、HTML は表示には適していますが、操作にはそれほど適していないという意味で、より制限的でもあります。

  2. apiUserNotesJSON を返します- 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 に答える