asp.net - 在javascript中单击时如何更新视图？

Question

在我看来，我的模型有一个仅由 a 组成的属性get。

@model Contoso.MvcApplication.ViewModels.QuizCompletedViewModel

<p>@Model.Property1</p>

默认情况下，此属性以值 10 开头。并且所有时间都在查看该值。我想当我在img标签上按 clic 时，可以更新此属性（因为值始终保持不变），如何在不刷新页面的情况下更新属性？

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);
    });
});

代码未经测试，但我认为非常接近，希望这能给出正确的想法。