ASP.NET MVC - Controller-Aktion ohne Umleitung ausführen

Question

Ich versuche, eine Aktion auf einem Controller auszuführen, ohne auf die zugehörige Ansicht für diese Aktion umzuleiten. Für ein gutes Beispiel dessen, was ich erreichen möchte, werfen Sie einen Blick auf die Website music.xbox.com. Wenn Sie einer ausgewählten Wiedergabeliste einen Titel aus einem Popup-Menü hinzufügen, wird auf der Seite nur eine Benachrichtigung ohne Umleitung oder Aktualisierung angezeigt. wie ist das möglich?

Was ich habe, ist die folgende: ich eine _playlistPopupMenu Teilansicht, die die Liste der Wiedergabelisten macht wie folgt:

_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> 
    } 
} 

Die PlaylistController AddSong Aktion ist wie folgt:

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

Ich kämpfe mit was in der Teilansicht _AddToPlaylist setzen, die ich denke, ich muss in der Lage sein zu disp Legen Sie eine Benachrichtigung an (eventuell mit PNotify add in für Bootstrap). MVC will immer ../Playlist/AddSong?playlistId=1 umleiten & songID = 1

Alle Ideen, wie dieser letzten Teil des Problems wären toll zu vervollständigen.

Answer 1

Wenn Sie nicht möchten, dass die Seite vollständig neu geladen wird, müssen Sie das Problem etwas anders angehen, indem Sie Javascript verwenden, um die Seite dynamisch zu ändern. Eine Bibliothek wie JQuery könnte die Manipulation der DOM ein wenig einfacher machen.

1. Zeigen Sie das Popup dynamisch mit Javascript an.
2. Wenn der Benutzer im Popup auf OK/Senden klickt, posten Sie die Daten mit Javascript zurück auf den Server und lassen Sie den Controller, den Sie veröffentlichen, etwas HTML zurückgeben.
3. Den zurückgegebenen HTML-Block (Teilansicht) an ein vorhandenes div mit Playlist-Titeln anhängen.

Der schwierigste Teil davon ist der asynchronous post. Hilfe bei der Aktualisierung eines Div ohne Neuladen der ganzen Seite finden Sie in this question.

EDIT - Beispiel

Wenn Sie eine Controller-Aktion (Annahme POSTs) haben mit der URL myapp.com/PlayList/AddSong/, dann würden Sie JQuery auf diese URL zu schreiben einzurichten. Sie würden auch die data Eigenschaft mit allen Formulardaten einrichten, die Sie posten möchten, in Ihrem Fall würden Sie playistId und songId der data Eigenschaft hinzufügen.

Sie würden dann das Ergebnis der AJAX-Abfrage (HTML) verwenden und es an die vorhandene Wiedergabeliste HTML auf der Seite anhängen. So unter der Annahme, dass Sie die Teilansicht des HTML in ein div mit der ID playlistDiv und unter der Annahme, dass Ihre Teilansicht kehrt HTML angehängt werden soll, die dann gültig ist, wenn an die bestehende Playlist angehängt, dann Javascript etwas wie folgt aussehen:

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 
}); 

Haftungsausschluss: Ich kann nicht garantieren, dass dieser Code 100% funktioniert (es sei denn, ich schreibe das Programm selbst). Es kann Unterschiede in der Version von JQuery, die Sie verwenden, usw. geben, aber mit ein wenig Feinabstimmung sollte es das gewünschte Ergebnis erzielen.

Answer 2

• System.Web.Mvc verwendet;

• mit 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(); 
  }