Question

ASP MVC开发还是新手。假设我有一个有2个视图的MusicController：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() and 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的$.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;}
}

在Controlller中，为GET视图编写一个动作方法。其中Get all Artists和Get the Albums属于第一位艺术家。（您可以根据您的要求进行更改）

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

ASP MVC结合了视图

3 个答案: