asp.net - JavaScriptでクリックしたときにビューを更新するには?

Question

私のカミソリ ビューでは、私のモデルにはget.

@model Contoso.MvcApplication.ViewModels.QuizCompletedViewModel

<p>@Model.Property1</p>

デフォルトでは、このプロパティは値 10 で始まります。そして常にその値が表示されます。タグをクリックするimgと、このプロパティを更新できます (常に値が保持されるため)。ページを更新せずにプロパティを更新するにはどうすればよいですか?

Answer 1

ステップ 1) ビューを変更して、カウンタを jquery でアドレス指定できるようにします。

@model Contoso.MvcApplication.ViewModels.QuizCompletedViewModel

<p id="my-counter">@Model.Property1</p>

さて、サーバー上でこの増加した値が必要ですか?

この増分値をサーバーに送信する必要がない場合:

ステップ 2) javascript/jquery を使用して、クライアントの値を増やします。

$("#my-image").click(function () { 
    var theValue = parseInt($("#my-counter").html());
    theValue = theValue + 10;
    $("#my-counter").html(theValue);
});

サーバー上でインクリメントする必要がある場合:

ステップ 2) インクリメントを処理するコントローラー アクションを作成する

public ActionResult Increment(int currentValue)
{
    // save to the database, or do whatever
    int newValue = currentValue + 10;
    DatabaseAccessLayer.Save(newValue);

    Contoso.MvcApplication.ViewModels.QuizCompletedViewModel model = new Contoso.MvcApplication.ViewModels.QuizCompletedViewModel();

    model.Property1 = newValue;

    // If no exception, return the new value
    return PartialView(model);
} 

ステップ 3) 新しい値のみを返す部分ビューを作成する

@model Contoso.MvcApplication.ViewModels.QuizCompletedViewModel

@Model.Property1

ステップ 4) この新しいアクションに投稿するように jquery を変更します。これにより、新しいカウントが返され、表示されます。

$("#my-image").click(function () { 
    $.get('/MyController/Increment/' + $("#my-counter").html(), function(data) {
        $("#my-counter").html(data);
    });
});

コードはテストされていませんが、かなり近いと思います。これで正しいアイデアが得られることを願っています。