RAZOR MVC3: Partial View to Reuse

Question

I have two entities – PopularTutorial and Blog. This data need to be displayed in homepage view as listed below. The key point is that the “PopularTutorial” should be reused in other views and Bloglist also may be reused in other views. There is a manual paging option in the “PopularTutorial” section. When page 1 is clicked, first 3 popular tutorials will be listed . When page 2 is clicked tutorials 4 to 6 will be listed.

I know “partial view” is the way to go. When I searched I came across methods that involve jQuery and JSON. I am wondering whether this can be done (in RAZOR) without explicit use of jQuery and JSON.

Could you please help me for this in RAOZR?

To be honest – I am doing this as a step before learning AJAX in MVC. So my next attempt will be to ajaxify it. It would be great if you can provide an answer that will work in ajax way also.

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

Here's an example that might get you started:

Models:

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

Controller:

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 ..." }
        };
    }
}

View (~/Views/Articles/Index.cshtml):

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

Popular Tutorial
@Html.Action("popular")

Blogs Partial (~/Views/Articles/Blogs.cshtml):

@model IEnumerable<Blog>

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

Blog display template (~/Views/Articles/DisplayTemplates/Blog.cshtml):

@model Blog

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

Popular Partial (~/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>)
    )
)

Result:

---

UPDATE:

As requested in the comments section I will try to cover the 2 additional scenarios:

1) Create a separate controller for Popular?

That's pretty straightforward. Just create a new PopularBlogs controller:

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 },
        };
    }
}

and then move the ~/Views/Articles/Popular.cshtml partial shown previously to ~/Views/PopularBlogs/Popular.cshtml and finally update the location in your ~/Views/Articles/Index.cshtml:

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

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

2) Make the call to popular as ajax

In your ~/Views/Articles/Index.cshtml view replace the Html.Action helper that renders the popular blogs with a div:

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

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

and then modify ~/Views/PopularBlogs/Popular.cshtml to enable AJAX pagination:

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

And the final step is to load the contents of this partial into the corresponding div:

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