Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Here's an example that might get you started:</p> <p>Models:</p> <pre><code>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; } } </code></pre> <p>Controller:</p> <pre><code>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&lt;PopularTutorial&gt; 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&lt;Blog&gt; 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 ..." } }; } } </code></pre> <p>View (<code>~/Views/Articles/Index.cshtml</code>):</p> <pre><code>All Blogs List @Html.Action("blogs") Popular Tutorial @Html.Action("popular") </code></pre> <p>Blogs Partial (<code>~/Views/Articles/Blogs.cshtml</code>):</p> <pre><code>@model IEnumerable&lt;Blog&gt; &lt;section&gt; &lt;ul&gt; @Html.DisplayForModel() &lt;/ul&gt; &lt;/section&gt; </code></pre> <p>Blog display template (<code>~/Views/Articles/DisplayTemplates/Blog.cshtml</code>):</p> <pre><code>@model Blog &lt;li&gt; &lt;h3&gt;@Html.DisplayFor(x =&gt; x.Head)&lt;/h3&gt; @Html.DisplayFor(x =&gt; x.Content) &lt;/li&gt; </code></pre> <p>Popular Partial (<code>~/Views/Articles/Popular.cshtml</code>):</p> <pre><code>@model IEnumerable&lt;PopularTutorial&gt; @{ var grid = new WebGrid(Model, canPage: true, canSort: false, rowsPerPage: 3); } @grid.GetHtml( columns: grid.Columns( grid.Column("", format: @&lt;text&gt;@item.Title&lt;/text&gt;) ) ) </code></pre> <p>Result:</p> <p><img src="https://i.stack.imgur.com/gYQ4D.png" alt="enter image description here"></p> <hr> <p>UPDATE:</p> <p>As requested in the comments section I will try to cover the 2 additional scenarios:</p> <blockquote> <p>1) Create a separate controller for Popular?</p> </blockquote> <p>That's pretty straightforward. Just create a new <code>PopularBlogs</code> controller:</p> <pre><code>public class PopularBlogsController : Controller { public ActionResult Popular() { return PartialView(GetPopularBlogs()); } private IEnumerable&lt;PopularTutorial&gt; 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 }, }; } } </code></pre> <p>and then move the <code>~/Views/Articles/Popular.cshtml</code> partial shown previously to <code>~/Views/PopularBlogs/Popular.cshtml</code> and finally update the location in your <code>~/Views/Articles/Index.cshtml</code>:</p> <pre><code>All Blogs List @Html.Action("blogs") Popular Tutorial @Html.Action("popular", "popularblogs") </code></pre> <blockquote> <p>2) Make the call to popular as ajax</p> </blockquote> <p>In your <code>~/Views/Articles/Index.cshtml</code> view replace the <code>Html.Action</code> helper that renders the popular blogs with a <code>div</code>:</p> <pre><code>All Blogs List @Html.Action("blogs") Popular Tutorial &lt;div id="popular" data-url="@Url.Action("Popular", "PopularBlogs")"&gt;&lt;/div&gt; </code></pre> <p>and then modify <code>~/Views/PopularBlogs/Popular.cshtml</code> to enable AJAX pagination:</p> <pre><code>@model IEnumerable&lt;PopularTutorial&gt; @{ 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: @&lt;text&gt;@item.Title&lt;/text&gt;) ) ) </code></pre> <p>And the final step is to load the contents of this partial into the corresponding div:</p> <pre><code>$(function () { var popular = $('#popular'); popular.load(popular.data('url')); }); </code></pre>
    singulars
    1. This table or related slice is empty.
    1. PORAZOR MVC3: Partial View to Reuse
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USDarin Dimitrov
    1. USDarin Dimitrov
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PORAZOR MVC3: Partial View to Reuse
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    1. COThanks. 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?
      singulars
      1. PO
      1. USLijo
    2. CO@Lijo, the code inside `Popular.cshtml` contains a WebGrid which is bound to a `IEnumerable<PopularTutorial>` model. Make sure that you pass such model from your Index action.
      singulars
      1. PO
      1. USDarin Dimitrov
    3. COThank 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
      singulars
      1. PO
      1. USLijo
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload