2014-08-27 22 views
7

Tôi đang cố gắng thực hiện một hành động trên bộ điều khiển mà không chuyển hướng đến chế độ xem được liên kết cho hành động đó. Để có một ví dụ điển hình về những gì tôi đang cố gắng đạt được, hãy xem trang web music.xbox.com. Khi bạn thêm bài hát vào danh sách phát đã chọn từ menu bật lên - trang sẽ chỉ hiển thị thông báo mà không có bất kỳ chuyển hướng hoặc làm mới nào. sao có thể như thế được?ASP.NET MVC - Thực hiện hành động điều khiển mà không cần chuyển hướng

gì tôi có là như sau: tôi có một cái nhìn cục bộ _playlistPopupMenu mà ám danh sách các danh sách nhạc như sau:

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

Hành động PlaylistController AddSong là như sau:

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

Tôi đang vật lộn với những gì cần đặt trong chế độ xem một phần _AddToPlaylist mà tôi nghĩ rằng tôi cần có thể phân phối đặt một thông báo của một số loại (Possiblly sử dụng PNotify thêm vào cho Bootstrap). MVC muốn luôn chuyển hướng đến ../Playlist/AddSong?playlistId=1 & songId = 1

Bất kỳ ý tưởng nào về cách hoàn thành phần cuối cùng của vấn đề sẽ rất tuyệt.

+1

Nó không chuyển hướng (HTTP 3xx), nó trở về một cái nhìn cục bộ. Bạn nên cân nhắc sử dụng các yêu cầu AJAX thông qua javascript, để yêu cầu không đồng bộ, xử lý phản hồi và hiển thị những gì bạn cần trong trang hiện tại. –

+0

Như đã đề cập ở trên, bạn cần phải tự động hiển thị một số phần nhất định của trang của bạn (sử dụng các yêu cầu AJAX). Xem http://stackoverflow.com/questions/11134701/jquery-load-part-of-external-html để biết ý tưởng. –

Trả lời

6

Nếu bạn không muốn "tải lại toàn bộ trang" thì bạn cần phải tiếp cận vấn đề hơi khác, sử dụng javascript để thay đổi trang động. Một thư viện như JQuery có thể làm cho thao tác DOM dễ dàng hơn một chút.

  1. Hiển thị popup tự động bằng javascript.
  2. Khi người dùng nhấn OK/Gửi trên cửa sổ bật lên, hãy đăng dữ liệu trở lại máy chủ bằng javascript và có bộ điều khiển bạn đang đăng để trả lại một số HTML.
  3. Gắn khối HTML đã trả lại (xem một phần) vào div hiện có chứa các bản nhạc danh sách phát.

Phần khó nhất trong số này là asynchronous post. Trợ giúp với việc cập nhật một div mà không cần tải lại toàn bộ trang có thể được tìm thấy trong this question.

EDIT - Ví dụ

Nếu bạn có một hành động điều khiển (chấp nhận POSTs) với URL myapp.com/PlayList/AddSong/, sau đó bạn muốn thiết lập JQuery để gửi đến URL này. Bạn cũng sẽ thiết lập thuộc tính data với bất kỳ dữ liệu biểu mẫu nào bạn muốn đăng, trong trường hợp bạn muốn thêm playistIdsongId vào thuộc tính data.

Sau đó, bạn sẽ sử dụng kết quả của truy vấn AJAX (HTML) và thêm nó vào HTML danh sách phát hiện có trên trang. Giả sử bạn muốn thêm HTML của chế độ xem một phần vào div có ID playlistDiv và giả sử rằng chế độ xem một phần của bạn trả lại HTML hợp lệ khi được thêm vào danh sách phát hiện tại, thì javascript của bạn sẽ trông giống như sau:

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

Tuyên bố từ chối trách nhiệm: Tôi không thể đảm bảo rằng mã này sẽ hoạt động 100% (trừ khi tôi tự viết chương trình). Có thể có sự khác biệt trong phiên bản của JQuery mà bạn sử dụng, vv, nhưng với một chút tinh chỉnh nó sẽ đạt được kết quả mong muốn.

+0

Cảm ơn vì điều này. Bạn có thể mở rộng một chút về các bước 2 và 3 một chút không. – AndrewJE

+0

Xin cảm ơn. Có nó để làm việc. – AndrewJE

+0

Nội dung hay! Đây là một mẫu thực sự hữu ích mà bạn có thể áp dụng cho nhiều trang ... –

0
  • bằng System.Web.Mvc;
  • sử dụng 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(); 
    } 
    
Các vấn đề liên quan