Solución:
Si no desea “recargas de página completa”, debe abordar el problema de manera ligeramente diferente, utilizando javascript para alterar la página dinámicamente. Una biblioteca como JQuery podría facilitar un poco la manipulación del DOM.
- Muestre la ventana emergente dinámicamente usando javascript.
- Cuando el usuario presione Aceptar / Enviar en la ventana emergente, publique los datos en el servidor usando javascript y haga que el controlador que está publicando devuelva algo de HTML.
- Agregue el bloque HTML devuelto (vista parcial) a un div existente que contenga pistas de la lista de reproducción.
La parte más difícil de esto es la publicación asincrónica. En esta pregunta se puede encontrar ayuda para actualizar un div sin recargar toda la página.
EDITAR – Ejemplo
Si tiene una acción de controlador (aceptar POST) con la URL myapp.com/PlayList/AddSong/, luego configuraría JQuery para publicar en esta URL. También configuraría el data propiedad con cualquier dato de formulario que le gustaría publicar, en su caso, agregaría playistId y songId al data propiedad.
Luego, usaría el resultado de la consulta AJAX (HTML) y lo agregaría al HTML de la lista de reproducción existente en la página. Entonces, asumiendo que desea agregar el HTML de la vista parcial a un div con ID playlistDiv, y suponiendo que su vista parcial devuelva HTML que es válido cuando se agrega a la lista de reproducción existente, entonces su javascript se verá así:
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
});
Descargo de responsabilidad: no puedo garantizar que este código funcione al 100% (a menos que yo mismo escriba el programa). Puede haber diferencias en la versión de JQuery que usa, etc., pero con un pequeño ajuste debería lograr el resultado deseado.