Partial Pages

//Controler Actions
public ActionResult PartialPage()
{
  List comicsList = db.Comics.OrderBy(d => d.Title).Take(2).ToList();
  return View(comicsList);
}
              
public PartialViewResult _PartialPage()
{
  List comicsList = db.Comics.OrderBy(d => d.Title).Take(2).ToList();
  return PartialView("_PartialPage", comicsList);
}
              
[ChildActionOnly]
public ActionResult _PartialPageAction()
{
  List
  comicsList = db.Comics.OrderBy(d => d.Title).Take(2).ToList();
  return PartialView("_PartialPage", comicsList);
  }

//Html
Partial Page Master View
  <div class="row col-sm-12">
  <div class="row col-sm-4" style="border:2px solid black; padding:5px;">
  <div class="row" style="font-size:large; font-weight: bold;">
  <center>
  1: Html.Partial
  </center>
  </div>
  <div class="row">
  @Html.Partial("_PartialPage")
  </div>
  </div>
  <div class="row col-sm-4" style="border:2px solid black; margin-left:20px; padding:5px;">
  <div class="row" style="font-size:large; font-weight: bold;">
  <center>
  2: Html.RenderPartial
  </center>
  </div>
  <div class="row">
  @{Html.RenderPartial("_PartialPage");}
  </div>
  </div>
  <div class="row col-sm-4" style="border:2px solid black; margin-left:20px; padding:5px;">
  <div class="row" style="font-size:large; font-weight: bold;">
  <center>
  3: Html.Action
  </center>
  </div>
  <div class="row">
  @Html.Action("_PartialPageAction")
  </div>
  </div>
  </div>
  <div class="row col-sm-12" style="margin-top:5px;">
  <div class="col-sm-2"></div>
  <div class="row col-sm-4" style="border:2px solid black; margin-left:20px; padding:5px;">
  <div class="row" style="font-size:large; font-weight: bold;">
  <center>
  4: Html.RenderAction
  </center>
  </div>
  <div class="row">
  @{Html.RenderAction("_PartialPageAction", "Home", new { m = Model });}
  </div>
  </div>
  <div class="row col-sm-4" style="border:2px solid black; margin-left:20px; padding:5px;">
  <div class="row" style="font-size:large; font-weight: bold;">
  <center>
  5: JQuery Load function
  </center>
  </div>
  <div class="row" id="PartialPageJQuery">
  </div>
  </div>
  <div class="col-sm-2"></div>
  </div>

_PartialPage View
  @model IEnumerable
    <div class="container">
    <div class="row" style="padding:20px;">
    <table>
    <tr>
    <th class="text-center">
    Title
    </th>
    <th class="text-center">
    Price
    </th>
    </tr>
    @foreach (var item in Model)
    {
    <tr>
    <td>
    @Html.DisplayFor(modelItem => item.Title)
    @Html.DisplayFor(modelItem => item.Issue)
    </td>
    <td>
    @String.Format("{0:C}", item.Price);
    </td>
    </tr>
    }
    </table>
    </div>
    </div>

Div from calling page
<div class="row">
  @{Html.Render("_PartialPage");}
</div>

_PartialPage HTML
@model IEnumerable<MvcBootstrap.Models.Comics>
<div class="container">
  <div class="row" style="padding:20px;">
      <table>
        <tr>
          <th class="text-center">
            Title
          </th>
          <th class="text-center">
            Price
          </th>
        </tr>

        @foreach (var item in Model)
        {
          <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Title)
                @Html.DisplayFor(modelItem => item.Issue)
            </td>
            <td>
              @String.Format("{0:C}", item.Price);
            </td>
          </tr>
        }
      </table>
  </div>
</div>
							

Div from calling page
<div class="row">
  @{Html.RenderPartial("_PartialPage");}
</div>

_PartialPage HTML
@model IEnumerable<MvcBootstrap.Models.Comics>
<div class="container">
  <div class="row" style="padding:20px;">
      <table>
        <tr>
          <th class="text-center">
            Title
          </th>
          <th class="text-center">
            Price
          </th>
        </tr>

        @foreach (var item in Model)
        {
          <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Title)
                @Html.DisplayFor(modelItem => item.Issue)
            </td>
            <td>
              @String.Format("{0:C}", item.Price);
            </td>
          </tr>
        }
      </table>
  </div>
</div>
							

Div from calling page
<div class="row">
  @Html.Action("_PartialPageAction")
</div>

Controller Method
[ChildActionOnly]
public ActionResult _PartialPageAction()
{
  List
  comicsList = db.Comics.OrderBy(d => d.Title).Take(2).ToList();
  return PartialView("_PartialPage", comicsList);
  }

_PartialPage HTML
@model IEnumerable<MvcBootstrap.Models.Comics>
<div class="container">
  <div class="row" style="padding:20px;">
      <table>
        <tr>
          <th class="text-center">
            Title
          </th>
          <th class="text-center">
            Price
          </th>
        </tr>

        @foreach (var item in Model)
        {
          <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Title)
                @Html.DisplayFor(modelItem => item.Issue)
            </td>
            <td>
              @String.Format("{0:C}", item.Price);
            </td>
          </tr>
        }
      </table>
  </div>
</div>
							

DIV IN CALLING PAGE
<div class="row">
  @Html.Action("_PartialPageAction")
  @{Html.RenderAction("_PartialPageAction", "Home", new { m = Model });}
      
</div>

Controller Method
[ChildActionOnly]
public ActionResult _PartialPageAction()
{
  List
  comicsList = db.Comics.OrderBy(d => d.Title).Take(2).ToList();
  return PartialView("_PartialPage", comicsList);
  }

_PartialPage HTML
@model IEnumerable<MvcBootstrap.Models.Comics>
<div class="container">
  <div class="row" style="padding:20px;">
      <table>
        <tr>
          <th class="text-center">
            Title
          </th>
          <th class="text-center">
            Price
          </th>
        </tr>

        @foreach (var item in Model)
        {
          <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Title)
                @Html.DisplayFor(modelItem => item.Issue)
            </td>
            <td>
              @String.Format("{0:C}", item.Price);
            </td>
          </tr>
        }
      </table>
  </div>
</div>
							

DIV IN CALLING PAGE
<div class="row" id="PartialPageJQuery"></div>

JQUERY FUNCTION IN CALL PAGE
$(document).ready(function () {
  $("#PartialPageJQuery").load("/Home/_PartialPageJQuery");
});

function btnSort_Click() {
    $("#btnSort").css('color', 'white');

    var sortr = $("#btnSort").val();
    if (sortr == 'Sort Descending') {
      $("#btnSort").val('Sort Ascending');
      $("#PartialPageJQuery").load("/Home/_PartialPageJQuery?sortBy=descending");
    }
    else {
      $("#btnSort").val('Sort Descending');
      $("#PartialPageJQuery").load("/Home/_PartialPageJQuery?sortBy=ascending");
    }
   }


CONTROLLER METHOD
public ActionResult _PartialPageJQuery(string sortBy)
{
  if (sortBy == "descending")
  {
    List comicsList = (from co in db.Comics
                               where co.ComicID == 6 || co.ComicID == 7
                               orderby co.Title descending
                               select co).ToList();
    return PartialView("_PartialPage", comicsList);
  }
  else
  {
    List comicsList = db.Comics.OrderBy(d => d.Title).Take(2).ToList(); 
    return PartialView("_PartialPage", comicsList);
  }
}


_PartialPage HTML
@model IEnumerable<MvcBootstrap.Models.Comics>
<div class="container">
  <div class="row" style="padding:20px;">
      <table>
        <tr>
          <th class="text-center">
            Title
          </th>
          <th class="text-center">
            Price
          </th>
        </tr>

        @foreach (var item in Model)
        {
          <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Title)
                @Html.DisplayFor(modelItem => item.Issue)
            </td>
            <td>
              @String.Format("{0:C}", item.Price);
            </td>
          </tr>
        }
      </table>
  </div>
</div>