RAZOR MVC3：重用部分视图

Question

我有两个实体——PopularTutorial 和 Blog。这些数据需要显示在主页视图中，如下所列。关键是“PopularTutorial”应该在其他视图中重用，Bloglist 也可以在其他视图中重用。 “PopularTutorial”部分有一个手动分页选项。点击第1页，会列出前3个热门教程。单击第 2 页时，将列出教程 4 至 6。

我知道“片面观点”是正确的出路。当我搜索时，我发现了涉及 jQuery 和 JSON 的方法。我想知道是否可以在不显式使用 jQuery 和 JSON 的情况下（在 RAZOR 中）完成此操作。

您能在 RAOZR 中帮我解决这个问题吗？

老实说——我这样做是为了在 MVC 中学习 AJAX 之前的一个步骤。所以我的下一个尝试将是 ajaxify 它。如果您能提供一个也能以 ajax 方式工作的答案，那就太好了。

public class PopularTutorial
{
    public int ID { get; set; }
    public int NumberOfReads { get; set; }
    public string Title { get; set; }
}

public class Blog
{
    public int ID { get; set; }
    public string Head { get; set; }
    public string PostBy { get; set; }
    public string Content { get; set; }
}


namespace MyArticleSummaryTEST.Controllers
{

public class HomePageViewModel
{
    public IEnumerable<Blog> BlogList { get; set; }
    public IEnumerable<PopularTutorial> PopularBlogs { get; set; }
}

public class ArticleController : Controller
{


    private IEnumerable<PopularTutorial> GetPopularBlogs()
    {
        List<PopularTutorial> popularArticleList = new List<PopularTutorial>()
                                                {
                                                    new PopularTutorial{ID=17,Title="Test1",NumberOfReads=1050},
                                                    new PopularTutorial{ID=18,Title="Test2",NumberOfReads=5550},
                                                    new PopularTutorial{ID=19,Title="Test3",NumberOfReads=3338}
                                                };

        return popularArticleList;
    }

    private IEnumerable<Blog> GetAllBlogEntries()
    {

         List<Blog> articleSummaryList = new List<Blog>()
                                            { 
                                                new Blog {ID=1,Head="Introduction to MVC",PostBy="Lijo", Content="This is a ..."},
                                                new Blog {ID=2,Head="jQuery Hidden Gems",PostBy="Lijo", Content="This is a ..."},
                                                new Blog {ID=3,Head="Webforms Intenals",PostBy="Lijo", Content="This is a ..."}
                                            };

        return articleSummaryList;

    }


   }
}

阅读：

1. http://www.mikesdotnetting.com/Article/154/Looking-At-The-WebMatrix-WebGrid

2. ASP.NET MVC 部分视图和重定向

3. @Html.Partial( ) 与 @Html.Action() - MVC Razor http://pratapreddypilaka.blogspot.in/2011/ 11/htmlpartial-vs-htmlaction-mvc-razor.html

4. 使用 WebGrid 还是不使用 WebGrid...答案是什么？

5. http://mvccontrib.codeplex.com/

6. 如何指定ASP.NET MVC 3 razor ViewStart 文件中的不同布局？

7. Asp.net MVC - 在以下情况下返回“主机”控制器使用部分视图

8. 如何在 MVC 中渲染备用子视图？

9. 我什么时候使用视图模型、部分、模板并使用 MVC 3 处理子绑定

10. Webgrid 中的 Mvc 3 texbox（剃刀）

11. 如何制作带有复选框列的 MVC 3 Webgrid？

12. 在 WebGrid.column 内的 HTML.ActionLink 中使用数据，不可能吗？

13. htmlhelper 内部webgrid

14. Razor 嵌套 WebGrid

15. 有条件地在 webgrid 中显示图像 - mvc 3

16. 如何在 MVC3 上隐藏标头WebGrid

17. 如何隐藏基于当前用户角色的 WebGrid 列？

18. MVC WebGrid 开源吗？

---

Answer 1

下面是一个可能帮助您入门的示例：

模型：

public class PopularTutorial
{
    public int ID { get; set; }
    public int NumberOfReads { get; set; }
    public string Title { get; set; }
}

public class Blog
{
    public int ID { get; set; }
    public string Head { get; set; }
    public string PostBy { get; set; }
    public string Content { get; set; }
}

控制器：

public class ArticlesController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    [ChildActionOnly]
    public ActionResult Blogs()
    {
        return PartialView(GetAllBlogEntries());
    }

    [ChildActionOnly]
    public ActionResult Popular()
    {
        return PartialView(GetPopularBlogs());
    }

    private IEnumerable<PopularTutorial> GetPopularBlogs()
    {
        return new[]
        {
            new PopularTutorial { ID = 17, Title = "Test1", NumberOfReads = 1050 },
            new PopularTutorial { ID = 18, Title = "Test2", NumberOfReads = 5550 },
            new PopularTutorial { ID = 19, Title = "Test3", NumberOfReads = 3338 },
            new PopularTutorial { ID = 20, Title = "Test4", NumberOfReads = 3338 },
            new PopularTutorial { ID = 21, Title = "Test5", NumberOfReads = 3338 },
            new PopularTutorial { ID = 22, Title = "Test6", NumberOfReads = 3338 },
            new PopularTutorial { ID = 23, Title = "Test7", NumberOfReads = 3338 },
        };
    }

    private IEnumerable<Blog> GetAllBlogEntries()
    {
        return new[]
        {
            new Blog { ID = 1, Head = "Introduction to MVC", PostBy = "Lijo", Content = "This is a ..." },
            new Blog { ID = 2, Head = "jQuery Hidden Gems", PostBy = "Lijo", Content = "This is a ..." },
            new Blog { ID = 3, Head = "Webforms Intenals", PostBy = "Lijo", Content = "This is a ..." }
        };
    }
}

视图 (~/Views/Articles/Index.cshtml)：

All Blogs List
@Html.Action("blogs")

Popular Tutorial
@Html.Action("popular")

博客部分 (~/Views/Articles/Blogs.cshtml) code>):

@model IEnumerable<Blog>

<section>
    <ul>
        @Html.DisplayForModel()
    </ul>
</section>

博客展示模板 (~/Views/Articles/DisplayTemplates/Blog.cshtml):

@model Blog

<li>
    <h3>@Html.DisplayFor(x => x.Head)</h3>
    @Html.DisplayFor(x => x.Content)
</li>

热门部分（~/Views/Articles/Popular.cshtml）：

@model IEnumerable<PopularTutorial>

@{
    var grid = new WebGrid(Model, canPage: true, canSort: false, rowsPerPage: 3);
}

@grid.GetHtml(
    columns: grid.Columns(
        grid.Column("", format: @<text>@item.Title</text>)
    )
)

结果：

---

更新：

根据评论部分的要求，我将尝试涵盖另外 2 个场景：

1）为Popular创建一个单独的控制器？

这非常简单。只需创建一个新的 PopularBlogs 控制器：

public class PopularBlogsController : Controller
{
    public ActionResult Popular()
    {
        return PartialView(GetPopularBlogs());
    }

    private IEnumerable<PopularTutorial> GetPopularBlogs()
    {
        return new[]
        {
            new PopularTutorial { ID = 17, Title = "Test1", NumberOfReads = 1050 },
            new PopularTutorial { ID = 18, Title = "Test2", NumberOfReads = 5550 },
            new PopularTutorial { ID = 19, Title = "Test3", NumberOfReads = 3338 },
            new PopularTutorial { ID = 20, Title = "Test4", NumberOfReads = 3338 },
            new PopularTutorial { ID = 21, Title = "Test5", NumberOfReads = 3338 },
            new PopularTutorial { ID = 22, Title = "Test6", NumberOfReads = 3338 },
            new PopularTutorial { ID = 23, Title = "Test7", NumberOfReads = 3338 },
        };
    }
}

然后将之前显示的 ~/Views/Articles/Popular.cshtml 部分移动到 ~/Views/PopularBlogs/Popular.cshtml 最后更新 ~/Views/Articles/Index.cshtml 中的位置：

All Blogs List
@Html.Action("blogs")

Popular Tutorial
@Html.Action("popular", "popularblogs")

2) 让调用流行为ajax

在您的 ~/Views/Articles/Index.cshtml 视图中，将渲染流行博客的 Html.Action 帮助器替换为 >div：

All Blogs List
@Html.Action("blogs")

Popular Tutorial
<div id="popular" data-url="@Url.Action("Popular", "PopularBlogs")"></div>

然后修改~/Views/PopularBlogs/Popular.cshtml以启用AJAX分页：

@model IEnumerable<PopularTutorial>

@{
    var grid = new WebGrid(
        Model, 
        canPage: true, 
        canSort: false, 
        rowsPerPage: 3, 
        ajaxUpdateContainerId: "grid"
    );
}

@grid.GetHtml(
    htmlAttributes: new { id = "grid" },
    columns: grid.Columns(
        grid.Column("", format: @<text>@item.Title</text>)
    )
)

最后一步是加载此部分的内容进入相应的div：

$(function () {
    var popular = $('#popular');
    popular.load(popular.data('url'));
});