我的页面不会显示我的多视图视图

时间:2016-09-25 13:46:12

标签: c# html css asp.net

我的观点不会显示。他们正在展示,但他们突然不会出现,我不知道为什么。请帮忙/建议。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="index.aspx.cs"
inherits="index" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700'    rel='stylesheet' type='text/css' />
<meta charset="utf-8" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<script src="Scripts/jquery-3.1.0.js"></script>
     <script>
     $("#menu-toggle1").click(function (e) {
         e.preventDefault();
         $(".wrapper").toggleClass("toggled");
     });
 </script>
<style>
    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 > .sidebar-brand
{
height: 65px;
font-size: 20px;
font-family:Arial;
 line-height: 60px;
}

.sidebar-nav > .sidebar-brand a
{
color: #999999;
}

.sidebar-nav > .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;
}

}
</style>
</head>
<body>
<form id="form1" runat="server">
    <div class="wrapper">
        <div class="sidebar-wrapper">
            <br /> 
            <!-- Side Bar -->
            <div style="text-align: center;">
                <br />
                <ul class="sidebar-nav">
                    <li class="sidebar-brand"><a href="http://www.aptest.co.uk/index.aspx">Aptest</a></li>
                </ul>
                <br />
                <ul class="sidebar-nav">
                    <li><asp:LinkButton ID="Tview1" runat="server">Top Page</asp:LinkButton></li>
                    <li><asp:LinkButton ID="Tview2" runat="server">Index</asp:LinkButton></li>
                    <li><asp:LinkButton ID="Tview3" runat="server">iPhone 7</asp:LinkButton></li>
                    <li><asp:LinkButton ID="Tview4" runat="server">Page 4</asp:LinkButton></li>
                    <li><asp:LinkButton ID="Tview5" runat="server">Page 5</asp:LinkButton></li>
                </ul>
            </div>
            <div class="page-content-wrapper">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-12">
                            <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
                                <asp:View ID="View1" runat="server">
                                    <section class="jumbotron">
                                        <div class="container">
                                            <div class="row text-center">
                                                <h3>Click button for more!</h3>
                                                <script>
                                                    $(document).ready(function () {
                                                        $(".wrapper").toggleClass("toggled");
                                                    });     
                                                </script>
                                                <asp:Button ID="Top1" runat="server" Text="Button" OnClick="Top1_Click" />
                                            </div>
                                        </div>
                                    </section>
                                </asp:View>
                                <asp:View ID="View2" runat="server">
                                    <h1>1</h1>
                                </asp:View>
                                <asp:View ID="View3" runat="server">
                                    <h1>2</h1>
                                </asp:View>
                                <asp:View ID="View4" runat="server">
                                    <h1>3</h1>
                                </asp:View>
                                <asp:View ID="View5" runat="server">
                                <h1>4</h1>
                                </asp:View>
                            </asp:MultiView> 
                            <br />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
 </form>
 </body>
 </html>

我不知道自己做错了什么。此外,我还不知道代码中是否包含CSS /样式,但它包含侧栏的代码。 C#代码在

之下
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;
}
}

我是C#的新手,但我在网上学到了我认为这是正确的。

This is all the page comes up with. It didn't do this before but now it does, I don't know why.

1 个答案:

答案 0 :(得分:-1)

我认为这可能只是因为LinkBut​​ton上没有OnClick事件。例如,更改:

<li><asp:LinkButton ID="Tview3" runat="server">iPhone 7</asp:LinkButton></li>

添加:

OnClick="Tview3_Click"

所以它变成了:

<li><asp:LinkButton ID="Tview3" runat="server" OnClick="Tview3_Click">iPhone 7</asp:LinkButton></li>