如何在ASP.NET razor语法中使用数据模板

Aka*_*ari 1 asp.net razor

我正在开发asp.net项目,我想创建一个具有以下内容的页面:

在此输入图像描述

我想将图像放在上一张图片中,就像数据模板一样,我想以这种方式显示页面数字....是否有一篇好的文章或教程可以帮助我执行此...因为我我是这个领域的初学者....

Bra*_*tie 6

假设视图模型:

public class ProjectVM
{
  public String ImageUrl { get; set; }
  public String ProjectName { get; set; }
}
public class IndexVM
{
  // nuget> Install-Package PagedList
  public IPagedList<ProjectVM> projects { get; set; }
}
Run Code Online (Sandbox Code Playgroud)

然后你的控制器:

public class HomeController : Controller
{
  public ActionResult Index(Int32 page = 1)
  {
    IndexVM model = new IndexVM
    {
      Projects = projectService.GetProjects().ToPagedList(page, 6)
    };
    return View(model);
  }
}
Run Code Online (Sandbox Code Playgroud)

然后你的意见:

〜/查看/共享/ DisplayTemplates/ProjectVM.cshtml

@model ProjectVM
@* Or however you display it... *@
<div class="span4">
  <img src="@Model.ImageUrl" />
  <p>@Model.Name</p>
</div>
Run Code Online (Sandbox Code Playgroud)

〜/浏览/首页/ Index.cshtml

@mode IndexVM
@* Or however you display it... *@
<div class="content">
  <section>
    <div class="title">
      <h1>All projects</h1>
      <div class="paging">
        @Html.PagedListPager((IPagedList)Model.Projects, page => Url.Action("Index", new { page }))
      </div>
   @Html.DisplayFor(x => x.Projects)
</div>
Run Code Online (Sandbox Code Playgroud)

在GitHub上找到的示例项目