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.

enter image description here

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:

Darin Dimitrov · Accepted Answer · 2012-02-23T09:55:37.267

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:

enter image description here

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

Thanks. It works. As part of learning, I replaced the code inside index.cshtml with the code in Popular.cshtml. Now I am gettng the following error: "A data source must be bound before this operation can be performed.". How do we correct it? — LCJ, Feb 23 '12 at 06:56
@Lijo, the code inside `Popular.cshtml` contains a WebGrid which is bound to a `IEnumerable` model. Make sure that you pass such model from your Index action. — Darin Dimitrov, Feb 23 '12 at 06:58
Thank you. Can you please point me to an article (or explain by yourself) for the following enhancements? 1) Create a separate controller for Popular? 2) Make the call to popular as ajax — LCJ, Feb 23 '12 at 08:24
@Lijo, I have updated my answer to provide an example of how to achieve that. — Darin Dimitrov, Feb 23 '12 at 09:58
Thanks. Afterwards I put a button inside both partial view. On post action handler for blog’s click, it is asked to redirect to “BlogHome“ action where it will return a simple string “Blog Home” (instead of a view). On post action handler for popular’s click, it is asked to redirect to “PopularHome“ action where it will return a simple string “Popular Home”. But currently, when I click on any of the button, it renders http://localhost:1988/Article index; without partial content. How to fix it to show the "BlogHome" result? Please let me know if it is good to post as a new question. — LCJ, Feb 23 '12 at 12:02
Thanks. Could you please answer http://stackoverflow.com/questions/9413467/asp-net-mvc3-razor-redirecting-from-partial-views ? — LCJ, Feb 23 '12 at 15:40

RAZOR MVC3: Partial View to Reuse

1 Answers1