转载

asp.net实现数据库版动态网页滑动门

前端：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="滑动门.aspx.cs" Inherits="UI.滑动门" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title></title>   <link rel="stylesheet" href="css/style.css" /> </head> <body>  <form id="form1" runat="server">   <div class="solidBox">    <h3 class="solidBox_title">     <asp:ListView ID="ListTitle" runat="server">      <ItemTemplate>       <!--自定义模板-->       <strong runat="server" id="Title" class="">        <%#Eval("Title") %>       </strong>      </ItemTemplate>     </asp:ListView>    </h3>    <div class="solidBox_content">     <asp:ListView ID="ListContent" runat="server">      <ItemTemplate>       <!--自定义模板-->       <strong runat="server" id="Content">        <%#Eval("Content") %>       </strong>      </ItemTemplate>     </asp:ListView>    </div>   </div>  </form> </body> </html>

样式重置：

/*  * 样式重置文件  */ 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; } /*通用父子盒子嵌套浮动问题解决，开始*/ .clearfix:after {  content: ".";  display: block;  height: 0;  clear: both;  visibility: hidden; } .clearfix {  display: inline-block; } * html .clearfix {  height: 1%; } .clearfix {  display: block; } /*通用父子盒子嵌套浮动问题解决，结束*/ /*间隙层开始*/ .space_hx {  /*横向间隙*/  clear: both;  width: 100%;  height: 10px;  font-size: 1px;  overflow: hidden; } .space_zx {  /*纵向间隙*/  float: left;  width: 10px;  font-size: 1px;  overflow: hidden; } /*间隙层结束*/

样式：

  .solidBox {  width: 330px;  height: 187px;  margin: 20px;  border-left: #CCCCCC 1px solid;  overflow: hidden; }  /*.solidBox .solidBox_title 中间空格是父子关系，以逗号隔开是同级关系*/  .solidBox .solidBox_title {   height: 30px;   line-height: 30px;  }   .solidBox .solidBox_title div {    float: left;    /*变成块级元素*/    width: 109px;    height: 30px;    border: #CCCCCC 1px solid;    text-align: center;    border-left: none;    font: 16px "微软雅黑";    cursor: pointer;    /*cursor局部鼠标的样式*/   }   .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;  }

后台：

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Data.SqlClient; namespace UI {  public partial class 滑动门 : System.Web.UI.Page  {   protected void Page_Load(object sender, EventArgs e)   {    DBind();   }   private void DBind()   {    SqlConnection conn = new SqlConnection("Server=.;database=Test;uid=sa;pwd=x");    conn.Open();    SqlCommand cmd = new SqlCommand("select * from huadongmen",conn);    SqlDataReader reader = cmd.ExecuteReader();    List<huadongmen> list = new List<huadongmen>();    while (reader.Read())    {     huadongmen sb = new huadongmen();     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();   }  } }

附上数据库脚本：

create database Test go use Test create table huadongmen (  title varchar(20),  content varchar(500) ) go insert into huadongmen values('标题一','这是标题一的内容') insert into huadongmen values('标题二','这是标题二的内容') insert into huadongmen values('标题三','这是标题三的内容') update huadongmen set content='这是标题二的内容' where title='标题二' select * from huadongmen