单击javascript时如何更新视图？答案

【问题标题】：How to update the view when clic in javascript?单击javascript时如何更新视图？
【发布时间】：2013-02-07 18:32:19
【问题描述】：

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

@model Contoso.MvcApplication.ViewModels.QuizCompletedViewModel

<p>@Model.Property1</p>

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

【问题讨论】：

需要为此使用 ajax
我明白了，那么我如何调用来更新标签，因为 jquery 使用 ajax？
stackoverflow.com/questions/5410055/… 这里有一个很好的解释
对不起，但我不明白如何表明我只是对 ajax 方法的该属性感兴趣？在最后一个示例中，使用 form

标签： asp.net asp.net-mvc jquery asp.net-mvc-4

【解决方案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);
    });
});

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

【讨论】：