RAZOR MVC3：重用的部分视图-Java 学习之路

我有两个实体 - 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 回答

这是一个可以帮助您入门的示例：

楷模：

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

结果：

在此输入图像描述

更新：

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

为 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 partial 移动到~/Views/PopularBlogs/Popular.cshtml，最后更新~/Views/Articles/Index.cshtml中的位置：

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

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

打电话给流行的 ajax

在你的~/Views/Articles/Index.cshtml视图中，用div替换用于渲染热门博客的Html.Action助手：

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

回复于 2024-04-27T16:12:34+08:00

RAZOR MVC3：重用的部分视图

1 回答

相关问题