您的位置：首页 > 编程语言 > ASP

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

2015-05-31 19:17 841 查看

前端：

<%@ 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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航