Step By Step How to create a Data List using partial views and Child Action Methods

        By Carmel Schvartzman

In this tutorial we'll learn how to create a Data List using partial views and Child Action Methods in MVC 4. Child Methods allow us to reuse code and markup, fully applying the DRY Software Paradigm ("Don't Repeat Yourself") , and avoiding the WET ("Write Everything Twice") approaches. The Child Actions cannot be invoked via regular user requests, instead they are invoked directly from the View. A Child Action method is to an Action method as a Partial View is to a View. 

In MVC there are 4 similar methods to render a Partial View, and it's important that we decide which one to use according to their properties:
1) The most widely used method is RenderPartial(), which is fast because it writes directly to the HTTP response stream, and is easy to use as it doesn't require to code a Child Action. But the data for the partial view must already be loaded in the view Model. The problem with this approach is, we can be tempted to manipulate the data INSIDE the PRESENTATION LAYER, to send it to the partial view. When we pass data from a view to another view we are specifying how to instantiate entity objects, and that should be a Bussiness Layer task.

2) Partial() is essentially the same thing but, instead RenderPartial(), it returns a string with HTML encoding, and you can use it to instantiate a variable if you like.

3) RenderAction() requires from the developer to code a Child Action, and therefore you could separate presentation layer from the Repository or Bussiness Layer. Is fast because it writes directly to the HTTP response stream.

4) Action() method is the same but it returns a string with HTML encoding. Using Action() you leave to the Controller (Child Action) the task of deciding which partial view to render. That way we leave to the Controller the responsability to make traffic decisions and to invoke Bussiness Logic. Also, this way we can make refactoring more neatly.
Child Actions are useful in building widgets and embedding them in the View. 

In this tutorial we'll create a Data List via using a Partial View rendered   through an Action() call, being the presentation layer as this:

We'll display all Posts in a <TABLE> saved in a Partial View. The Partial View will be populated by a  Controller's Child Action.

First of all, let's create a new View inside the Shared folder at Views. This will be the "PostsDetails" Partial View, selecting "Blog" class and "Details" for the scaffolding Model:

Open the _PostsDetails Partial View and take a look at the markup. It will be something like this (depending on your Entity Model):

Next we add the style classes to the <table> tag. Also, we've applied some formatting to properly display dates and pictures.

Now in order to display some style , add a new .css stylesheet file to the "Contents" folder:

Name the .css as GridStyle:

In the stylesheet we include all the style for the WebGrid, footer, header, hyperlinks, even the style for displaying adecuately the pictures:

The code (to copy-paste) is the following:

        .webgrid-table
        {
            font:italic 11px Verdana;
            width: 100%;
            display:grid;
            border-collapse: separate;
            border: solid 1px #98BF21;
            background-color: #f0c9a0;
            padding: 5px 5px 5px 5px;
        } 
        .webgrid-header
        {
            background-color: #c67f1c !important;
            color: #FFFFFF !important;
            font: 900 14px Verdana !important;
            padding:5px 5px 5px 5px;            
            text-align: center;
            
        }
        .details-div
        {
            background-color: #c67f1c !important;
            color: #FFFFFF !important;
            font: 900 14px Verdana !important;
            padding:5px 5px 5px 5px;
            text-align: center;
            
        }
        .ActionsTH
        {
            background-color: #c67f1c !important;
            color: #FFFFFF !important;
            font: 900 14px Verdana !important;
            padding:5px 5px 5px 5px;
            text-align: center;
            width:180px;
        }
        .webgrid-footer, .webgrid-footer a
        {
            background-color: #c67f1c;
            color: #FFF;
            font: 900 14px Verdana;
            padding:3px 3px 3px 3px;
        }
        .webgrid-alternating-row
        {
            background-color: #e5d773;
            padding:5px 5px 5px 5px;
        }
        .title-column
        {
            font:900 13px Verdana;
            text-align:center;
        }
        .webgrid-img
        {
            width: 150px;
            height: 150px;
        }

Now open the "Index" View and invoke the Child Action using the Action() method inside the loop which displays all posts. We send to the Child Action the data corresponding to the current item:

Notice that we also added a <link> tag , to include the .css in the Index View.

Finally, let's code the Child Action Method, creating first the Context in the Controller:

Now we fetch all posts at the Index Action:

 Then we append the Child Action, which deals with ONLY ONE post sent by the Action() call:

Take into account that the Child Action is called by the View on each loop iteration, so you'll need to avoid a big number of calls if possible.

Save and run the application:

That's all!! 

In this tutorial we've learned  how to create a Data List using partial views and Child Action Methods in MVC 4, thus allowing us to reuse code and markup in future refactoring.  

Happy programming.....

כתב: כרמל שוורצמן