ASP.NET MVC - Execute controller action without redirecting

If you don't want "full page reloads" then you need to approach the problem slightly differently, using javascript to alter the page dynamically. A library such as JQuery might make manipulating the DOM a little easier.

  1. Display the popup dynamically using javascript.
  2. When the user hits OK/Submit on the popup, post the data back to the server using javascript, and have the controller you are posting to return some HTML.
  3. Append the returned HTML block (partial view) to an existing div containing playlist tracks.

The most difficult part of this is the asynchronous post. Help with updating a div without reloading the whole page can be found in this question.

EDIT - Example

If you have a controller action (accepting POSTs) with the URL myapp.com/PlayList/AddSong/, then you'd set up JQuery to post to this URL. You'd also set up the data property with any form data which you'd like to post, in your case you'd add playistId and songId to the data property.

You'd then use the result of the AJAX query (HTML) and append it to the existing playlist HTML on the page. So assuming that you want to append the partial view's HTML to a div with ID playlistDiv, and assuming that your partial view returns HTML which is valid when appended to the existing playlist, then your javascript will look something like this:

var data = { playlistId: 1, songId: 1 };
$.ajax({
  type: "POST",
  url: 'http://myapp.com/PlayList/AddSong/',
  data: data,
  success: function(resultData) {
      // take the result data and update the div
      $("#playlistDiv").append(resultData.html)
  },
  dataType: dataType
});

Disclaimer: I can't guarantee that this code will work 100% (unless I write the program myself). There may be differences in the version of JQuery that you use, etc, but with a little tweaking it should achieve the desired result.

Tags:

Asp.Net Mvc