RAZOR MVC3: частичный вид для повторного использования

Question

У меня есть две сущности - PopularTutorial и Blog.Эти данные должны отображаться в режиме просмотра домашней страницы, как указано ниже.Ключевым моментом является то, что «PopularTutorial» следует повторно использовать в других представлениях, а Bloglist также можно повторно использовать в других представлениях.В разделе «Популярное руководство» есть опция ручной подкачки страниц.При нажатии на страницу 1, первые 3 популярных учебника будут перечислены.При нажатии на страницу 2 будут отображаться учебники с 4 по 6.

Я знаю, что «частичное представление» - это путь.Когда я искал, я наткнулся на методы, которые включают в себя jQuery и JSON.Мне интересно, можно ли это сделать (в RAZOR) без явного использования jQuery и JSON.

Не могли бы вы помочь мне в этом в RAOZR?

Если честно - я делаю это в качестве шага перед изучением AJAX в MVC.Так что моей следующей попыткой будет изменить его.Было бы здорово, если бы вы могли предоставить ответ, который также будет работать в режиме 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;

    }


   }
}

READING:

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

2. Частичные представления и перенаправления ASP.NET MVC

3. @Html.Partial () Vs @ 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. Как указать различные макеты в файле ViewStart для бритвы ASP.NET MVC 3?

7. Asp.net MVC - возврат к контроллеру "хоста" при использовании частичных представлений

8. Как отобразить альтернативное дочернее представление в MVC?

9. Когда я использую View Models, Partials, Templates и обрабатываю дочерние привязки с MVC 3

10. Mvc 3 texbox в веб-сетке(бритва)

11. Как создать сетку MVC 3 со столбцом флажка?

12. Использование данных в HTML.ActionLink внутри WebGrid.column, невозможно?

13. htmlhelper внутри веб-сетки

14. Razor Nested WebGrid

15. Условно отображать изображение в веб-сетке - 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):

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

Результат:

---

UPDATE:

В соответствии с просьбой в разделе комментариев я постараюсь охватить 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'));
});