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 partial views and redirecting

3. @ Html.Partial（）Vs @ Html.Action（） - MVC Razor http://pratapreddypilaka.blogspot.in/2011/11/htmlpartial-vs-htmlaction-mvc-razor.html

4. To WebGrid or not to WebGrid...what is the answer?

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

6. How do I specify different Layouts in the ASP.NET MVC 3 razor ViewStart file?

7. Asp.net MVC - Returning to "host" controller when using partial views

8. How do I render an alternate child view in MVC?

9. When do I use View Models, Partials, Templates and handle child bindings with MVC 3

10. Mvc 3 texbox in webgrid (razor)

11. How to make a MVC 3 Webgrid with checkbox column?

12. Using data in a HTML.ActionLink inside a WebGrid.column, not possible?

13. htmlhelper inside webgrid

14. Razor Nested WebGrid

15. Conditionally display an image in webgrid - mvc 3

16. How to hide header on MVC3 WebGrid

17. How can I hide a WebGrid column based on the current user's role?

18. Is the MVC WebGrid Open Source?

---

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）：

@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>)
    )
)

结果：

---

更新：

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

  

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

最后一步是将此partial的内容加载到相应的div中：

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