Question

在我的剃刀视图中，我的模型只有一个由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);
    });
});

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

点击javascript时如何更新视图？

1 个答案: