Reload just the Partial View

Question

I'm working on a website, where you can write and read jokes.

So on my index, i have a foreach, which shows all the jokes. Each joke displayed is a PartialView. You can vote each joke (up/down). So if somone votes a joke, i want the partial view of the joke he voted to reload.

Currently i have an actionLink, that goes to a controller action, where i check if he already voted the joke and if hasn't, I call the RateJoke() method.

But then i dont know to what view i should link him to, or how i have to do it, so that it just reloads the partial view and not the whole index.

My Index View:

@using (var db = new Witze.Context())
{
    foreach (var joke in Model)
    {
        @Html.Partial("_Jokes", joke);
    }
}

My _Jokes PartialView

@Model.Rating Punkte
@Html.ActionLink("Up", "Up", "Home", new {Model.JokeId}, null)
@Html.ActionLink("Down", "Down", "Home", new {Model.JokeId}, null)
<div class="anzeige">
    <div>@Model.JokeText</div>
</div>
<div class="left">
    @foreach (var categories in Model.Categories)
        {
            @Html.ActionLink(categories.Name, "jokes", "categorie", new {categories.CategorieId}, null)
        }
</div>
<div class="right">
        von: @Model.Creator.Name um: @Model.Date
</div>

My ActionResult Up() in the HomeController (there is a down aswell):

public ActionResult Up(int jokeId)
    {
        int LoggedInUserId = WebSecurity.CurrentUserId;
        var LoggedInUser = db.User.Single(u => u.UserId == LoggedInUserId);
        ICollection<Joke> VotedJokes = LoggedInUser.Voted;
        bool voted = false;
        foreach (var VotedJoke in VotedJokes)
        {
            if (VotedJoke.JokeId == jokeId)
            {
                voted = true;
            }
        }
        if (voted == false)
        {
            Logik.RateJoke(true, jokeId, LoggedInUserId);
        }

        Joke joke = db.Jokes.Single(j => j.JokeId == jokeId);

        return PartialView("_Jokes", joke);
    }

So can someone help/explain how i have to do it? I'm pretty new to MVC.

Maybe there is a completely diffrent way of doing it. I'm open to any solution.

Explanation what i'm trying to achieve: I want a page, with all the jokes in my DB. each joke can be voted, and if someone votes a joke, i want this one joke to be reloaded, and not the whole page.

Answer 1

Use @Ajax.ActionLink and updated with the current div joke

@Model.Rating Punkte
<div id="divjoke@Model.JokeId">    
@Ajax.ActionLink("Up", "Up", "Home", new {Model.JokeId}, new AjaxOptions {UpdateTargetId="divjoke"+Model.JokeId} null)

...