Replace partialview after action in ASP.Net MVC

Question

I'm still quite new to ASP.NET MVC and wonder how-to achieve the following: On a normal view as part of my master page, I create a varying number of partial views with a loop, each representing an item the user should be able to vote for. After clicking the vote-button, the rating shall be submitted to the database and afterwards, the particular partial view which the user clicked shall be replaced by the same view, with some visual properties changed. What is the best practice to achieve this?

Here's how I started: 1. I defined the partial view with an if-sentence, distinguishing between the visual appearance, depending on a flag in the particular viewmodel. Hence, if the flag is positive, voting controls are displayed, if it's negative, they're not.

1. I assigned a Url.Action(..) to the voting buttons which trigger a controller method. In this method, the new rating is added to the database.

2. In the controller method, I return the PartialView with the updated ViewModel. UNFORTUNATELY, the whole view get's replaced, not only the partial view.

Any suggestions how-to solve this particular problem or how-to achieve the whole thing would be highly appreciated.

Thanks very much, Chris

Answer 1

Trivial (but by all means correct and usable) solution to your problem is Ajax.BeginForm() helper for voting. This way you change your voting to ajax calls, and you can easily specify, that the result returned by this call (from your voting action, which will return partial view with only 1 changed item) will be used to replace old content (for example one particular div containing old item before voting).

Update - 11/30/2016

For example:

@using (Ajax.BeginForm("SomeAction", "SomeController", new { someRouteParam = Model.Foo }, new AjaxOptions { UpdateTargetId = "SomeHtmlElementId", HttpMethod = "Post" }))

Answer 2

ASP.NET MVC is a perfect framework for this kind of needs. What I would do if I were in your possition is to work with JQuery Ajax API.

Following blog post should give you a hint on what you can do with PartialViews, JQuery and Ajax calls to the server :

http://www.tugberkugurlu.com/archive/working-with-jquery-ajax-api-on-asp-net-mvc-3-0-power-of-json-jquery-and-asp-net-mvc-partial-views

UPDATE

It has been asked to put a brief intro so here it is.

The following code is your action method :

    [HttpPost]
    public ActionResult toogleIsDone(int itemId) {

        //Getting the item according to itemId param
        var model = _entities.ToDoTBs.FirstOrDefault(x => x.ToDoItemID == itemId);
        //toggling the IsDone property
        model.IsDone = !model.IsDone;

        //Making the change on the db and saving
        ObjectStateEntry osmEntry = _entities.ObjectStateManager.GetObjectStateEntry(model);
        osmEntry.ChangeState(EntityState.Modified);
        _entities.SaveChanges();

        var updatedModel = _entities.ToDoTBs;

        //returning the new template as json result
        return Json(new { data = this.RenderPartialViewToString("_ToDoDBListPartial", updatedModel) });
    } 

RenderPartialViewToString is an extension method for controller. You need to use Nuget here to bring down a very small package called TugberkUg.MVC which will have a Controller extension for us to convert partial views to string inside the controller.

Then here is a brief info on how you can call it with JQuery :

var itemId = element.attr("data-tododb-itemid");
var d = "itemId=" + itemId;
var actionURL = '@Url.Action("toogleIsDone", "ToDo")';

$("#ajax-progress-dialog").dialog("open");

$.ajax({
    type: "POST",
    url: actionURL,
    data: d,
    success: function (r) {
        $("#to-do-db-list-container").html(r.data);
    },
    complete: function () {
        $("#ajax-progress-dialog").dialog("close");
        $(".isDone").bind("click", function (event) {
            toggleIsDone(event, $(this));
        });
    },
    error: function (req, status, error) {
        //do what you need to do here if an error occurs
        $("#ajax-progress-dialog").dialog("close");
    }
});

There needs to be some extra steps to be taken. So look at the blog post which has the complete walkthrough.