asp.net-mvc - ASP MVC 组合视图

Question

对 ASP MVC 开发来说还是新手。假设我有一个 MusicController，它有 2 个视图：List（显示所有艺术家的列表）和 Highlights（显示 3 个包含所有详细信息的特定专辑）。

我现在想在一个页面上呈现两个视图。1) 最好的方法是什么？部分观点？我是否需要为显示两个部分视图的页面制作单独的控制器？2）假设我想根据所选艺术家更改亮点。如何将该参数传递给带有高亮显示的局部视图？

谢谢你给我一些线索！

Answer 1

部分意见确实是你想要的。您可能会遇到的一个问题是，有时很难制作既可以作为独立视图又可以嵌入到另一个视图中的局部视图。解决方案是创建一个单独的视图，其中包含所有必要的样板，然后调用（单个）部分视图。那么局部视图既适用于单个页面，也适用于组合页面。

您的聚合视图不需要单独的控制器，但它需要自己的操作。

所以这是我提倡的结构：

在MusicController：

public ActionResult List() {
  return View();
}
public ActionResult Highlights() {
  return View();
}
public ActionResult ListAndHighlights() {
  return View();
}

List和的视图Highlights看起来像这样：

<div class="anyNecessaryChrome">
  @RenderPartial( "ListPartial" )
</div>

ListAndHighlights()看起来像这样：

<div class="listChrome">
  @RenderPartial( "ListPartial" )
</div>
<div class="highlightsChrome">
  @RenderPartial( "HighlightsPartial" )
</div>

如果您希望部分视图更新以响应客户端的某些内容，则必须使用 AJAX。

Answer 2

看看Html.RenderAction()和Html.RenderPartial()

或者，我会将艺术家列表作为视图并使用 AJAX 加载亮点。

为此，您只需要 2 个操作方法

public class ArtistsController {
    public ActionResult Index() {
        return View();
    }
}

和

public class AlbumsController {
    [HttpGet]
    public JSONResult GetHighlights(int artistId) {
        return JSON(Albums.GetHighlights(artistId), JsonRequestBehavior.AllowGet);
    }
}

还有一些示例 HTML

<ul id="artists">
   <li><a href="#" data-artist-id="1">Michael Jackson</a></li>
   <li><a href="#" data-artist-id="2">Tom Jones</a></li>
</ul>

然后您可以使用 jQuery 调用 Highlights 操作方法$.get

$("#artists a").click(function(e) {
    var id = $(this).data("artist-id");
    $.get("/Albums/GetHighlights/" + id, function(data) {
        // Populate highlights section with data from server
    });
});

Answer 3

您可以为此创建一个 ViewModel 存储艺术家列表和专辑列表

public class ArtistWithHighlights
{
  public Artist Artist { set;get;}
  public IEnumerable<Albums> Albums{ set;get;}
}

并在 Controller 中，为 GET 视图编写一个操作方法。在那个获取所有艺术家和获取专辑属于第一个艺术家。（您可以根据您的要求更改此设置）

public ActionResult ArtistsWithHighLights()
{
  List<ArtistWithHighlights> allArtists=new List<ArtistWithHighlights>();
  allArtists=GetAllArtists();

  //If we have atlease one artist in the list, Load the albums for the first one only
  if(allArtists.Count>0)
  {
     allArtists[0].Albums=GetAlbumsForArtist(allArtists[0].Artist.ArtistID);
  }    
  return View(allArtists);       
} 

你的强类型视图是这样的

@model List<ArtistWithHighlights>

@foreach(var artist in Model)
{
  <a id="@artist.ID" class="artistName">@artist.Name</p>
}
<div id="albums">
  <h3>Highlighted Albums</h3>
  @foreach(var album in Model[0].Albums)
  {
     <p>@album.Name</p>
  }
</div>

为了在选择时获取另一个艺术家的专辑（点击事件），您可以对另一个Action方法进行 ajax 调用，该方法返回传递的艺术家 ID 的专辑列表，然后您可以在 div 中显示它。

$(function(){
 $(".artistName").click(function(e){
  e.preventDefault();
   var  artistId=$(this.attr("id");
     $("#albums").load("../Albums/"+artistId);
  });
});