ASP.NET MVC - 执行控制器操作而不重定向

Question

我试图在控制器上执行操作,而不重定向到该操作的关联视图.有关我想要实现的一个很好的例子,请查看music.xbox.com网站.从弹出菜单向选定的播放列表添加歌曲时 - 该页面只显示没有任何重定向或刷新的通知.这怎么可能？

我有以下内容:我有一个_playlistPopupMenu局部视图,呈现播放列表列表如下:

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

PlaylistController的AddSong操作如下:

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

我正在努力放置_AddToPlaylist局部视图,我认为我需要能够显示某种通知(Possiblly使用PNotify添加为Bootstrap).MVC希望始终重定向到../Playlist/AddSong?playlistId=1&songId=1

关于如何完成问题的最后部分的任何想法都会很棒.

Answer 1

如果您不想"完整页面重新加载",那么您需要稍微区别地解决问题,使用javascript动态更改页面.像JQuery这样的库可能会让DOM操作变得容易一些.

1. 使用javascript动态显示弹出窗口.
2. 当用户在弹出窗口中点击"确定/提交"时,使用javascript将数据发布回服务器,并让您发布的控制器返回一些HTML.
3. 将返回的HTML块(部分视图)附加到包含播放列表轨道的现有div.

最困难的部分是异步帖子.在这个问题中可以找到帮助更新div而无需重新加载整个页面.

编辑 - 示例

如果您有一个控制器操作(接受POST)与URL myapp.com/PlayList/AddSong/,那么您将设置JQuery发布到此URL.你想也设置了data与您想发布任何形式的数据,你的情况,你会添加属性playistId,并songId在data属性.

然后,您将使用AJAX查询(HTML)的结果并将其附加到页面上的现有播放列表HTML.因此,假设您要将部分视图的HTML附加到具有ID的div playlistDiv,并假设您的部分视图返回HTML,该HTML在附加到现有播放列表时有效,那么您的javascript将如下所示:

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

免责声明:我无法保证此代码可以100%工作(除非我自己编写程序).您使用的JQuery版本可能存在差异等,但稍微调整它应该可以达到预期的效果.