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.

Try this similar post : http://stackoverflow.com/questions/17776929/refresh-only-partial-view-in-mvc4 — kelsier, Mar 19 '14 at 09:31
Have you thought about using ajax to post the upvote or downvote action and on success to increase or decrease the counter? It looks to me that you are over-complicating things. Your ajax method(s) can be triggered by the Up and Down action links using jQuery. — Chris, Mar 19 '14 at 09:34

score 1 · Answer 1 · answered Mar 19 '14 at 09:34

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)

...

answered Mar 19 '14 at 09:34

Ilya Sulimanov

7,636
6
47
68

Ty for your input, but with ActionLink, in the Controller i have to link somewhere, if i link to _Jokes it just shows the partialview, if i linkt to index, it loads the whole page. Can you explain how i have to do this? – WTFisOssi Mar 19 '14 at 10:01
allows the use of links Ajax.ActionLink not Html.ActionLink to update only part of a page, provided that you return a partial view – Ilya Sulimanov Mar 19 '14 at 10:44

Reload just the Partial View

1 Answers1