asp.net – RAZOR MVC3：重用的部分视图

发布时间：2020-12-16 06:38:21 所属栏目：asp.Net 来源：网络整理

导读：我有两个实体 – PopularTutorial和Blog.此数据需要显示在主页视图中,如下所示.关键点是“PopularTutorial”应该在其他视图中重用,Bloglist也可以在其他视图中重用. “PopularTutorial”部分中有一个手动分页选项.单击第1页时,将列出前3个热门教程.单击第2页

我有两个实体 – 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",new Blog {ID=3,Head="Webforms Intenals",Content="This is a ..."}
                                            };

        return articleSummaryList;

    }


   }
}

读：

> http://www.mikesdotnetting.com/Article/154/Looking-At-The-WebMatrix-WebGrid
> ASP.NET MVC partial views and redirecting
> @ Html.Partial()Vs @ Html.Action() – MVC Razor
http://pratapreddypilaka.blogspot.in/2011/11/htmlpartial-vs-htmlaction-mvc-razor.html
> To WebGrid or not to WebGrid…what is the answer?
> http://mvccontrib.codeplex.com/
> How do I specify different Layouts in the ASP.NET MVC 3 razor ViewStart file?
> Asp.net MVC – Returning to “host” controller when using partial views
> How do I render an alternate child view in MVC?
> When do I use View Models,Partials,Templates and handle child bindings with MVC 3
> Mvc 3 texbox in webgrid (razor)
> How to make a MVC 3 Webgrid with checkbox column?
> Using data in a HTML.ActionLink inside a WebGrid.column,not possible?
> htmlhelper inside webgrid
> Razor Nested WebGrid
> Conditionally display an image in webgrid – mvc 3
> How to hide header on MVC3 WebGrid
> How can I hide a WebGrid column based on the current user’s role?
> Is the MVC WebGrid Open Source?

解决方法

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

楷模：

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",new PopularTutorial { ID = 21,Title = "Test5",new PopularTutorial { ID = 22,Title = "Test6",new PopularTutorial { ID = 23,Title = "Test7",};
    }

    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",new Blog { ID = 3,Head = "Webforms Intenals",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) Create a separate controller for Popular?

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

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

    private IEnumerable<PopularTutorial> GetPopularBlogs()
    {
        return new[]
        {
            new PopularTutorial { ID = 17,};
    }
}

然后将之前显示的?/ 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) Make the call to popular as 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,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'));
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!