How to update the view when clic in javascript?

Question

In my razor view, my model has one property composed only by a get.

@model Contoso.MvcApplication.ViewModels.QuizCompletedViewModel

<p>@Model.Property1</p>

By default, this property starts with the value: 10. And all the time has that value in view. I would like when I press clic on a img tag, this property can be updated (because all the time the value persisted), how can I update the property without refresh the page?

I see, so how can I invoke to update the label since jquery using ajax? — Darf Zon, Feb 07 '13 at 18:43
http://stackoverflow.com/questions/5410055/using-ajax-beginform-with-asp-net-mvc-3-razor here is a good explanation — COLD TOLD, Feb 07 '13 at 18:48
Excuse but I haven't understand how can indicate that I'm just interested in that property to ajax method? In the last example, uses the `form` — Darf Zon, Feb 07 '13 at 19:00

score 1 · Accepted Answer · answered Feb 07 '13 at 23:08

Step 1) Modify the view to make the counter addressable by jquery:

@model Contoso.MvcApplication.ViewModels.QuizCompletedViewModel

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

Now, do you need this incremented value on the server?

IF YOU DO NOT need this incremented value sent to the server:

Step 2) Increment the value on the client using javascript/jquery:

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

IF YOU DO NEED TO INCREMENT ON THE SERVER:

Step 2) Create a controller action to handle the increment

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

Step 3) Create a partial view which will return ONLY the new value

@model Contoso.MvcApplication.ViewModels.QuizCompletedViewModel

@Model.Property1

Step 4) Modify the jquery to post to this new action, which returns the new count, and displays it

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

Code is untested, but I think pretty close, and hopefully this gives the right idea.

How to update the view when clic in javascript?

1 Answers1