Replace partial view after action in ASP.Net MVC

Question

I am still new to ASP.NET MVC and wondering how to achieve the following: In the regular view, as part of my main page, I create a variable number of partial views with a loop, each of which represents an element that the user should be capable of. After clicking the vote button, the rating should be sent to the database, and then the specific partial view that the user clicked should be replaced with the same view with some visual properties. What is the best practice to achieve this?

Here's how I started: 1. I defined a partial view with an if statement, distinguishing between the visual appearance, depending on the flag in a particular model. Therefore, if the flag is positive, voting controls are displayed, if they are negative, this is not so.

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

• In the controller method, I return a PartialView with an updated ViewModel. CONTINUOUSLY, the whole look is replaced not only by a partial representation.

Any suggestions on how to solve this particular problem or how to achieve all of this would be greatly appreciated.

Thanks a lot Chris

Answer 1

A trivial (but certainly correct and useful) solution to your problem is the Ajax.BeginForm () helper for voting. Thus, you change your vote to ajax calls and you can easily indicate that the result returned by this call (from your voting action, which will return a partial view with only one element changed), will be used to replace the old content (for example, one specific div containing the old item before the vote).

Update - 11/30/2016

For instance:

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

Answer 2

ASP.NET MVC is the ideal foundation for such needs. What would I do if I were at your disposal is to work with the jQuery Ajax API.

The following blog post should give you a hint about 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 was proposed to introduce a brief introduction, 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 the 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 for a string inside the controller.

The following is a summary of how you can invoke it using 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"); } }); 

Some additional steps should be taken. So, check out the blog post for a complete walkthrough.