title: My page will not display my multiview views
body: <p>My views will not be displayed. They were showing but the they suddenly would not show and I do not know why. Please help/advise.</p>
  
  <pre><code>&lt;%@ Page Language="C#" AutoEventWireup="true" CodeFile="index.aspx.cs"
  inherits="index" %&gt;
  
  &lt;!DOCTYPE html&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700'    rel='stylesheet' type='text/css' /&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;link href="Content/bootstrap.css" rel="stylesheet" /&gt;
  &lt;script src="Scripts/jquery-3.1.0.js"&gt;&lt;/script&gt;
       &lt;script&gt;
       $("#menu-toggle1").click(function (e) {
           e.preventDefault();
           $(".wrapper").toggleClass("toggled");
       });
   &lt;/script&gt;
  &lt;style&gt;
      body {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  }
      .jumbotron {
          display: flex;
          align-items: center;
          background-image: url(Images/jquery-site-bkground.jpg);
          background-size: cover;
          color: #ffffff;
          height: 650px;
          width: 100%;
          text-shadow: 0.25px 0.25px 0.25px #000000;
      }   
      .jumbotron h2 {
    font-size: 60px;
    font-weight: 700;
    margin: 0;
    color: #ffffff;
    }
  
  .jumbotron h3 {
  margin: 0 0 20px;
  color: #fff;
  }
      .sidebar {
  float: left;
  width: 200px;
  margin: 0px;
  padding: 0px 20px 0px 0px;
  color: #FFFFFF;
  border-right-color: black;
  border-right-style:solid;
  border-right-width: 1px;
  }
  .wrapper
  {
  padding-left: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  }
  
  .wrapper.toggled
  {
  padding-left: 200px;
  }
  
  .sidebar-wrapper
  {
  z-index: 1000;
  position: fixed;
  left: 200px;
  width: 0;
  height: 100%;
  margin-left: -200px;
  overflow-y: auto;
  background: #000000;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  }
  
  .wrapper.toggled .sidebar-wrapper
  {
  width: 200px;
  }
  
  .page-content-wrapper
  {
  width: 100%;
  position: absolute;
  padding: 15px;
  }
  
  .wrapper.toggled .page-content-wrapper
  {
  position: absolute;
  margin-right: -200px;
  }
  
  /* Sidebar Styles */
  
  .sidebar-nav
  {
  position: absolute;
  top: 0;
  width: 200px;
  margin: 0;
  padding: 0;
  list-style: none;
  }
  
  .sidebar-nav li
  {
  text-indent: 20px;
  line-height: 40px;
   }
  
  .sidebar-nav li a
  {
   display: block;
  text-decoration: none;
  color: #fff;
  }
  
  .sidebar-nav li a:hover
  {
  text-decoration: none;
  color: #ffff80;
  font-weight:bold;
  background: rgba(255,255,255,0.2);
  }
  
  .sidebar-nav li a:active, .sidebar-nav li a:focus
  {
  text-decoration: none;
  }
  
  .sidebar-nav &gt; .sidebar-brand
  {
  height: 65px;
  font-size: 20px;
  font-family:Arial;
   line-height: 60px;
  }
  
  .sidebar-nav &gt; .sidebar-brand a
  {
  color: #999999;
  }
  
  .sidebar-nav &gt; .sidebar-brand a:hover
  {
  color: #fff;
  background: none;
  }
  
  @media (min-width:768px)
  {
  .wrapper
  {
  padding-left: 200px;
  }
  
  .wrapper.toggled
  {
  padding-left: 0;
  }
  
  .sidebar-wrapper
  {
  width: 200px;
  }
  
  .wrapper.toggled .sidebar-wrapper
  {
  width: 0;
  }
  
  .page-content-wrapper
  {
  padding: 20px;
  position: relative;
  }
  
  .wrapper.toggled .page-content-wrapper
  {
  position: relative;
  margin-right: 0;
  }
  
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;form id="form1" runat="server"&gt;
      &lt;div class="wrapper"&gt;
          &lt;div class="sidebar-wrapper"&gt;
              &lt;br /&gt; 
              &lt;!-- Side Bar --&gt;
              &lt;div style="text-align: center;"&gt;
                  &lt;br /&gt;
                  &lt;ul class="sidebar-nav"&gt;
                      &lt;li class="sidebar-brand"&gt;&lt;a href="http://www.aptest.co.uk/index.aspx"&gt;Aptest&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;br /&gt;
                  &lt;ul class="sidebar-nav"&gt;
                      &lt;li&gt;&lt;asp:LinkButton ID="Tview1" runat="server"&gt;Top Page&lt;/asp:LinkButton&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;asp:LinkButton ID="Tview2" runat="server"&gt;Index&lt;/asp:LinkButton&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;asp:LinkButton ID="Tview3" runat="server"&gt;iPhone 7&lt;/asp:LinkButton&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;asp:LinkButton ID="Tview4" runat="server"&gt;Page 4&lt;/asp:LinkButton&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;asp:LinkButton ID="Tview5" runat="server"&gt;Page 5&lt;/asp:LinkButton&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;div class="page-content-wrapper"&gt;
                  &lt;div class="container-fluid"&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-lg-12"&gt;
                              &lt;asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0"&gt;
                                  &lt;asp:View ID="View1" runat="server"&gt;
                                      &lt;section class="jumbotron"&gt;
                                          &lt;div class="container"&gt;
                                              &lt;div class="row text-center"&gt;
                                                  &lt;h3&gt;Click button for more!&lt;/h3&gt;
                                                  &lt;script&gt;
                                                      $(document).ready(function () {
                                                          $(".wrapper").toggleClass("toggled");
                                                      });     
                                                  &lt;/script&gt;
                                                  &lt;asp:Button ID="Top1" runat="server" Text="Button" OnClick="Top1_Click" /&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                                      &lt;/section&gt;
                                  &lt;/asp:View&gt;
                                  &lt;asp:View ID="View2" runat="server"&gt;
                                      &lt;h1&gt;1&lt;/h1&gt;
                                  &lt;/asp:View&gt;
                                  &lt;asp:View ID="View3" runat="server"&gt;
                                      &lt;h1&gt;2&lt;/h1&gt;
                                  &lt;/asp:View&gt;
                                  &lt;asp:View ID="View4" runat="server"&gt;
                                      &lt;h1&gt;3&lt;/h1&gt;
                                  &lt;/asp:View&gt;
                                  &lt;asp:View ID="View5" runat="server"&gt;
                                  &lt;h1&gt;4&lt;/h1&gt;
                                  &lt;/asp:View&gt;
                              &lt;/asp:MultiView&gt; 
                              &lt;br /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
   &lt;/form&gt;
   &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  
  <p>I don't know if I have done something wrong. Also I didn't know whether include the CSS/style in the code but it contains the code for the side bar.
  The C# code is below</p>
  
  <pre><code>using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Web;
  using System.Web.UI;
  using System.Web.UI.WebControls;
  
  public partial class index : System.Web.UI.Page
  {
  protected void Page_Load(object sender, EventArgs e)
  {
  
  }
  
  protected void Top1_Click(object sender, EventArgs e)
  {
      MultiView1.ActiveViewIndex = 1;
  }
  protected void Tview1_Click(object sender, EventArgs e)
  {
      MultiView1.ActiveViewIndex = 0;
  }
  protected void Tview2_Click(object sender, EventArgs e)
  {
      MultiView1.ActiveViewIndex = 1;
  }
  protected void Tview3_Click(object sender, EventArgs e)
  {
      MultiView1.ActiveViewIndex = 2;
  }
  protected void Tview4_Click(object sender, EventArgs e)
  {
      MultiView1.ActiveViewIndex = 3;
  }
  protected void Tview5_Click(object sender, EventArgs e)
  {
      MultiView1.ActiveViewIndex = 4;
  }
  }
  </code></pre>
  
  <p>I'm new to C# but I learnt online I think this it right.</p>
  
  <p><a href="http://i.stack.imgur.com/9RfQv.png" rel="nofollow">This is all the page comes up with. It didn't do this before but now it does, I don't know why.</a></p>