Question

Still new to ASP MVC development. Suppose I have a MusicController that has 2 views: List (which shows a list of all artists) and Highlights (which shows 3 specific albums with all details).

I now want to render both views on one page. 1) What is the best way to do this? Partial views? Do I need to make a separate controller for the page that shows both partial views? 2) Suppose I want to change the highlights based on the selected artist. How to pass that parameter to the partial view with highlights?

谢谢你给我一些线索!

Answer 1

部分观点确实是你想要的。你可能遇到的一点麻烦是,有时很难做出既独立又嵌入另一种观点的片面观点。解决方案是创建一个包含所有必要的锅炉板的单独观点, 然后称之为( 单一的) 片面观点。然后部分观点适合用于单个页面和合并页面。

您不需要单独的控制器来对您的总体视图进行控制,但它需要自己采取行动。

因此,我所提倡的结构如下:

在 < code> 音乐主计长 < /code> 中:

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 s $. 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

您可以为此创建一个视图模式, 用于存储艺人列表和专辑列表

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

在控制器中,请为 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>

要在选中时( 点击事件) 获取另一个艺人的相册, 您可以使用另一种 < code> Action 方法调用 ajax 调用, 返回已通过艺人id 的相册列表, 然后在 div 中显示。

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

友情链接