Front:
<%@ Page language="C #"autoeventwireup="true"Codebehind="Sliding Doors-aspx.cs"inherits="UI. Sliding Doors"%><! DOCTYPE html>"http://www.w3.org/1999/xhtml">"Server"> <meta http-equiv="Content-type"Content="text/html; Charset=utf-8"/> <title></title> <link rel= "stylesheet" href= "Css/style.css"/>"Form1"runat="Server"> <divclass="Solidbox"> class="Solidbox_title"> <asp:listview id="ListTitle"runat="Server"> <ItemTemplate> <!--custom templates-<strong R unat="Server"Id="Title" class=""> <% #Eval ("Title")%> </strong> </ItemTemplate> </ASP:LISTVIEW&G T class="solidbox_content"> <asp:listview id="listcontent"runat="Server"> <ItemTemplate> <!--custom templates-<strong R unat="Server"Id="Content"> <% #Eval ("Content")%> </strong> </ItemTemplate> </ASP:LISTVIEW&G T </div> </div> </form></body>Style Reset:
/** Style Reset file*/BODY,DIV,DL,DT,DD,UL,OL,LI,H1,H2,H3,H4,H5,H6,PRE,FORM,FIELDSET,INPUT,TEXTAREA,P,BLOCKQUOTE,TH,TD{margin:0;padding:0;Font-weight:Normal;Font-style:Normal;font-size:12px;font-family:Inherit;}Table{Border-collapse:collapse;border-spacing:0;}fieldset,img{Border:0;}Address,caption,cite,code,dfn,em,strong,th,var{Font-style:Normal;Font-weight:Normal;}Ol,ul{List-style:None;}caption,th{text-align: Left;}H1,h2,h3,h4,h5,h6{font-size:100%;Font-weight:Normal;}Q:before,q:after{content:"';}abbr,acronym{Border:0;}a{Color:#333;text-decoration:None;}a:hover{text-decoration:Underline;}/*Universal Parent-child box nesting floating problem resolution, starting*/. Clearfix:after{content: ".";Display:Block;Height:0;Clear:both;Visibility:Hidden;}. Clearfix{Display:Inline-block;}* HTML. Clearfix{Height:1%;}. Clearfix{Display:Block;}/*Universal Parent-child box nesting floating problem resolution, end*//*Gap Layer Start*/. Space_hx{/*Transverse Clearance*/Clear:both;width:100%;Height:10px;font-size:1px;Overflow:Hidden;}. SPACE_ZX{/*Longitudinal Clearance*/float: Left;width:10px;font-size:1px;Overflow:Hidden;}/*end of Gap layer*/
Style:
. Solidbox{width:330px;Height:187px;margin:20px;Border-left:#CCCCCC 1px solid;Overflow:Hidden; }/*. Solidbox. Solidbox_title The middle space is a parent-child relationship, separated by commas is a sibling relationship*/. Solidbox. Solidbox_title{Height:30px;Line-height:30px; }. Solidbox. Solidbox_title Div{float: Left;/*become a block-level element*/width:109px;Height:30px;Border:#CCCCCC 1px solid;text-align:Center;Border-left:None;Font:16px "Microsoft Ya Hei";cursor:Pointer;/*cursor local mouse style*/}. Solidbox. solidbox_title. Hover{background:#9D9D9D;Color:#FFF; }. Solidbox. Solidbox_content{padding:5px;Border:#CCCCCC 1px solid;Border-left:None;Border-top:None;Height:157px;width:327px;Overflow:Hidden; }
Background:
usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usingsystem.web;usingSystem.Web.UI;usingSystem.Web.UI.WebControls;usingSystem.Data.SqlClient;namespaceui{ Public Partial classSliding door: System.Web.UI.Page {protected voidPage_Load (Objectsender, EventArgs e) {Dbind (); } Private voidDbind () {SqlConnection conn=NewSqlConnection ("server=.; Database=test;uid=sa;pwd=x"); Conn. Open (); SqlCommand cmd=NewSqlCommand ("SELECT * from Huadongmen", conn); SqlDataReader Reader=cmd. ExecuteReader (); ListNewList(); while(reader. Read ()) {huadongmen SB=Newhuadongmen (); Sb. Title= reader[0]. ToString (); Sb. Content= reader[1]. ToString (); List. ADD (SB); } reader. Close (); Conn. Close (); Listtitle.datasource=list; Listtitle.databind (); Listcontent.datasource=list; Listcontent.databind (); } }}
Attach Database script:
Create DatabaseTestGo UseTestCreate TableHuadongmen (Titlevarchar( -), Contentvarchar( -))GoInsert intoHuadongmenValues('Title One','This is the content of the title one')Insert intoHuadongmenValues('Title Two','This is the title two of the content')Insert intoHuadongmenValues('Title III','This is the content of title three')UpdateHuadongmenSetContent='This is the title two of the content' whereTitle='Title Two'Select * fromHuadongmen
ASP. NET implementation of database version Dynamic Web page sliding door