ASP.NET MVC - Esegue l'azione del controller senza reindirizzamento

Question

Sto tentando di eseguire un'azione su un controller senza reindirizzare alla vista associata per quell'azione. Per un buon esempio di ciò che sto cercando di dare un'occhiata al sito web music.xbox.com. Quando aggiungi un brano a una playlist selezionata da un menu a comparsa, la pagina mostra solo una notifica senza alcun reindirizzamento o aggiornamento. com'è possibile?

Quello che ho è il seguente: Ho una parziale vista _playlistPopupMenu che rende l'elenco dei brani come segue:

_PlaylistPopupMenu

@model List<OneMusic.Models.GetPlaylists_Result> 
@if (Model.Count > 0) 
{ 
    <li style="height:2px" class="divider"></li> 
    foreach (var item in Model) 
    { 
     <li style="height:30px">@Html.DisplayFor(p => item.Name) 
      @Html.ActionLink(item.Name, "AddSong", "Playlist", new { playlistId = @item.PlaylistId, songId = 1 }, "") 
     </li> 
    } 
} 

L'azione PlaylistController addSong è la seguente:

public PartialViewResult AddSong(int? playlistId, int? songId) 
{ 
    if (ModelState.IsValid) 
    { 
     db.AddSongToPlaylist(playlistId, songId); 
     db.SaveChanges(); 
     return PartialView("_AddToPlaylist", ""); 
    } 
    return PartialView("_AddToPlaylist", ""); 
} 

Sono in difficoltà con cosa inserire nella vista parziale _AddToPlaylist che penso di dover essere in grado di disp effettuare una notifica di qualche tipo (possibilmente utilizzando PNotify add in per Bootstrap). MVC vuole sempre reindirizzare a ../Playlist/AddSong?playlistId=1 & songId = 1

Qualsiasi idea su come completare questa ultima parte del problema sarebbe ottima.

Answer 1

Se non si desidera "ricaricare la pagina intera", è necessario affrontare il problema in modo leggermente diverso, utilizzando javascript per modificare la pagina in modo dinamico. Una libreria come JQuery potrebbe rendere un po 'più semplice la manipolazione dello DOM.

1. display pop-up in modo dinamico utilizzando JavaScript.
2. Quando l'utente fa clic su OK/Invia nel popup, invia i dati al server utilizzando javascript e dispone del controller che si sta pubblicando per restituire del codice HTML.
3. Aggiunge il blocco HTML restituito (vista parziale) a un div esistente contenente tracce di playlist.

La parte più difficile di questa è la asynchronous post. Aiuto con l'aggiornamento di un div senza ricaricare l'intera pagina può essere trovato in this question.

EDIT - Esempio

Se si dispone di un'azione di controllo (accettando POSTs) con l'URL myapp.com/PlayList/AddSong/, allora si sarebbe configurato jQuery per inviare a questo URL. Inoltre, hai impostato la proprietà data con qualsiasi dato di modulo che desideri pubblicare, nel tuo caso dovresti aggiungere playistId e songId alla proprietà data.

Dovresti quindi utilizzare il risultato della query AJAX (HTML) e aggiungerlo alla playlist HTML esistente nella pagina. Quindi, supponendo che si desidera aggiungere HTML della vista parziale ad un div con ID playlistDiv, e assumendo che il parziale vista rendimenti HTML che è valido quando aggiunto alla playlist esistente, allora il vostro javascript sarà simile a questo:

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: Non posso garantire che questo codice funzioni al 100% (a meno che non scriva il programma da solo). Potrebbero esserci delle differenze nella versione di JQuery che usi, ecc., Ma con un piccolo ritocco si dovrebbe ottenere il risultato desiderato.

Answer 2

• utilizzando System.Web.Mvc;

• utilizzando System.Web.Mvc.Html;

  public ActionResult Index() 
  { 
      HtmlHelper helper = new HtmlHelper(new ViewContext(ControllerContext, new WebFormView(ControllerContext, "Index"), new ViewDataDictionary(), new TempDataDictionary(), new System.IO.StringWriter()), new ViewPage()); 
      helper.RenderAction("Index2"); 
  
      return View(); 
  } 
  
  public ActionResult Index2(/*your arg*/) 
  { 
      //your code 
      return new EmptyResult(); 
  }