RAZOR MVC3: partial view for reuse

Question

I have two objects - PopularTutorial and Blog. This data should be displayed on the home page as shown below. The key point is that PopularTutorial should be reused in other views, and Bloglist can also be reused in other views. In the "Popular Tutorial" section there is an option for manual swapping. When page 1 is clicked, the first 3 popular guides will be listed. When you click on page 2, manuals 4 through 6 are listed.

I know that "partial view" is the way to go. When I searched, I came across methods that include jQuery and JSON. I am wondering if this can be done (in RAZOR) without explicitly using jQuery and JSON.

Could you help me with this at RAOZR?

Honestly, I am doing this as a step before learning AJAX in MVC. So my next attempt will be to ajaxify. It would be great if you could provide an answer that would work with ajax as well.

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:

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

• Partial Views and ASP.NET MVC Redirection

• @ Html.Partial () Vs @ Html.Action () - MVC Razor http://pratapreddypilaka.blogspot.in/2011/11/htmlpartial-vs-htmlaction-mvc-razor.html

• In WebGrid or not in WebGrid ... what is the answer?

• http://mvccontrib.codeplex.com/

• How to specify different layouts in an ASP.NET MVC 3 razor ViewStart file?

• Asp.net MVC - Return to "host" controller when using partial views

• How to execute an alternate child view in MVC?

• When I use View Models, Partials, Templates and bind child bindings to MVC 3

• Mvc 3 texbox in webgrid (razor)

• How to create MVC 3 webpage with checkbox column?

• Using data in HTML.ActionLink inside WebGrid.column is not possible?

• htmlhelper inside webgrid

• Razor Vested WebGrid

• Conditionally display image in webgrid - mvc 3

• How to hide header on MVC3 WebGrid

• How to hide WebGrid column based on current user role?

• Is MVC WebGrid open source?

---

Answer 1

Here is an example that can run you:

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 stated in the comments section, I will try to consider two additional scenarios:

1) Create a separate controller for the popular?

It is pretty simple. 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 part ~/Views/Articles/Popular.cshtml shown earlier to ~/Views/PopularBlogs/Popular.cshtml and finally update the location in ~/Views/Articles/Index.cshtml :

 All Blogs List @Html.Action("blogs") Popular Tutorial @Html.Action("popular", "popularblogs") 

2) Make a call as popular as ajax

In your view ~/Views/Articles/Index.cshtml replace the Html.Action , which displays popular blogs using the div :

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

and then change ~/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 last step is to load the contents of this partial into the appropriate div:

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