Views/Home/InterfaceIndex.cshtml

@model IEnumerable<MvcBootstrap.Models.Comics>

@{
  ViewBag.Title = "Interface Index";
  Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="row col-sm-12 text-center"><h4 style="color:red;">(click on headings for code snippets)</h4></div>

<div class="row col-sm-12">
<div class="col-sm-4"></div>
<div id="dvInterface" data-toggle="modal" data-target="#modalInterface" class="row text-center col-sm-4"><h1>Interface</h1></div>
<div class="col-sm-4"></div>
</div>

<div class="col-sm-12">
<div class="row">
<div class="col-sm-5" style="border:2px solid fuchsia;">
<div id="dv1stInterface" data-toggle="modal" data-target="#modal1stInterface" class="row text-center"><h2>Interface with ascending method</h2></div>
      @if (ViewBag.iComicsListAsc != null)
      {
        foreach (var item in ViewBag.iComicsListAsc)
        {
<div class="row" style="padding-left:25px;">
            @item.Title @item.Issue
          </div>
        }
      }
      else
      { <dv class="row" style="padding-left:25px;">ViewBag.iComicsListAsc is null</dv>}
    </div>
<div class="col-sm-1"></div>

<div class="col-sm-5" style="border:2px solid fuchsia;">
<div id="dv2ndInterface" data-toggle="modal" data-target="#modal2ndInterface" class="row text-center"><h2>Interface with descending method</h2></div>
      @if (ViewBag.iComicsListDesc != null)
      {
        foreach (var item in ViewBag.iComicsListDesc)
        {
<div class="row" style="padding-left:25px;">
            @item.Title @item.Issue
          </div>
        }
      }
      else
      { <dv class="row" style="padding-left:25px;">ViewBag.iComicsListDesc is null</dv>}
    </div>
<div class="col-sm-1"></div>
  </div>
<div class="row" style="height:40px;"></div>

 
  @*Interface Modal*@
<div id="modalInterface" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
            ×
          </button>
<h4 class="modal-title text-center">
            Interface snippet
          </h4>
        </div>
<div class="modal-body">
<form class="form-horizontal" role="form" method="post">
<div class="form-group" style="font-weight:bold;">
<pre>
      interface ComicsInterface
      {
        //Interface methods must be implemented
        List<Comics> iComicsListAsc();
        List<Comics> iComicsListDesc();
      }
</pre>
            </div>
          </form>
        </div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
            Close
          </button>
        </div>
      </div>
    </div>
  </div>



  @*1st Interface Modal*@
<div id="modal1stInterface" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
            ×
          </button>
<h4 class="modal-title text-center">
            Ascending Interface Implementation
          </h4>
        </div>
<div class="modal-body">
<form class="form-horizontal" role="form" method="post">
<div class="form-group">
<pre>
    class iComicsList : ComicsInterface
    {
      //implement iComicsListAsc method
      public List<Comics> iComicsListAsc()
      {
        AlbacoreComicsDB db = new AlbacoreComicsDB();
        List<Comics> comicsList = db.Comics.OrderBy(c => c.Title).ToList();
        return comicsList;
      }
                
      //implement iComicsListDesc method
      public List<Comics> iComicsListDesc()
      {
        AlbacoreComicsDB db = new AlbacoreComicsDB();
        List<Comics> comicsList = db.Comics.OrderByDescending(c => c.Title).ToList();
        return comicsList;
      }
    }  //end of iComicsList Class
                
    //Controller method
    public ActionResult InterfaceIndex()
    {
      //instantiate new iComicsList
      iComicsList i = new iComicsList();
                
      //use iComicsList implementations
      ViewBag.iComicsListAsc = i.iComicsListAsc();
      ViewBag.iComicsListDesc = i.iComicsListDesc();
      return View();
    }

    //InterfaceIndex html
    <div class="col-sm-5" style="border:2px solid fuchsia;">
    <div id="dvAscInterface" data-toggle="modal" data-target="#modalAscInterface" class="row text-center">
      <h2>Interface with ascending method</h2>
    </div>
    @if (ViewBag.iComicsListAsc != null)
    {
      foreach (var item in ViewBag.iComicsListAsc)
      {
        <div class="row" style="padding-left:25px;">
          @item.Title @item.Issue
        </div>
      }
    }
    else
    {
      <dv class="row" style="padding-left:25px;">
        ViewBag.iComicsListAsc is null</dv>}
      </div>
    }

</pre>
            </div>
          </form>
        </div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
            Close
          </button>
        </div>
      </div>
    </div>
  </div>

  @*2nd Abstract Modal*@
<div id="modal2ndInterface" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
            ×
          </button>
<h4 class="modal-title text-center">
            Descending Interface Implementation
          </h4>
        </div>
<div class="modal-body">
<form class="form-horizontal" role="form" method="post">
<div class="form-group">
<pre>
    class iComicsList : ComicsInterface
    {
      //implement iComicsListAsc method
      public List<Comics> iComicsListAsc()
      {
        AlbacoreComicsDB db = new AlbacoreComicsDB();
        List<Comics> comicsList = db.Comics.OrderBy(c => c.Title).ToList();
        return comicsList;
      }
                
      //implement iComicsListDesc method
      public List<Comics> iComicsListDesc()
      {
        AlbacoreComicsDB db = new AlbacoreComicsDB();
        List<Comics> comicsList = db.Comics.OrderByDescending(c => c.Title).ToList();
        return comicsList;
      }
    }  //end of iComicsList Class
                
    //Controller method
    public ActionResult InterfaceIndex()
    {
      //instantiate new iComicsList
      iComicsList i = new iComicsList();
                
      //use iComicsList implementations
      ViewBag.iComicsListAsc = i.iComicsListAsc();
      ViewBag.iComicsListDesc = i.iComicsListDesc();
      return View();
    }

    //InterfaceIndex html
    <div class="col-sm-5" style="border:2px solid fuchsia;">
    <div id="dvDescInterface" data-toggle="modal" data-target="#modalDescInterface" class="row text-center">
      <h2>Interface with descending method</h2>
    </div>
    @if (ViewBag.iComicsListDesc != null)
    {
      foreach (var item in ViewBag.iComicsListDesc)
      {
        <div class="row" style="padding-left:25px;">
          @item.Title @item.Issue
        </div>
      }
    }
    else
    {
      <dv class="row" style="padding-left:25px;">
        ViewBag.iComicsListDesc is null</dv>}
      </div>
    }

</pre>
            </div>
          </form>
        </div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
            Close
          </button>
        </div>
      </div>
    </div>
  </div>
</div>