HTML代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>
<style>
* {
margin:0px auto;
padding:0px;
}
#menu {
list-style:none;
}
.cd {
float:left;
100px;
height:30px;
background-color:#FF66CC;
font-size:13px;
font-family:微软雅黑;
text-align:center;
line-height:30px;
vertical-align:middle;
color:white;
border-right:1px solid black;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Repeater ID="Repeater1" runat="server">
<%--头模板只显示一次--%>
<HeaderTemplate>
<table width="100%" border="0" cellspacing="1" cellpadding="1" bgcolor="#3300FF">
<tr>
<td width="120" height="30" align="center" valign="middle" bgcolor="#FFFFFF">代号</td>
<td width="120" align="center" valign="middle" bgcolor="#FFFFFF">姓名</td>
<td width="120" align="center" valign="middle" bgcolor="#FFFFFF">性别</td>
<td width="120" align="center" valign="middle" bgcolor="#FFFFFF">民族</td>
<td width="200" align="center" valign="middle" bgcolor="#FFFFFF">生日</td>
</tr>
</HeaderTemplate>
<%-- 项模板 有多少数据就生成多少项--%>
<ItemTemplate>
<tr> <%--再HTML里面嵌入C#代码--%>
<td height="30" align="center" valign="middle" bgcolor="#FFFFFF"><%#Eval("Code") %></td>
<td align="center" valign="middle" bgcolor="#FFFFFF"><%#Eval("Name") %></td>
<td align="center" valign="middle" bgcolor="#FFFFFF"><%#ShowSex()%></td><%--找后台函数调用--%>
<td align="center" valign="middle" bgcolor="#FFFFFF"><%#ShowNation() %></td><%--可以用调用后台函数的方法显示民族名称--%> <%--Eval("Nation1.Name") 如果有主外键关系，要想显示主表的某一列，可以直接用表名点出他的列--%>
<td align="center" valign="middle" bgcolor="#FFFFFF"><%#ShowBirthday() %></td> <%--可以用调用后台函数的方法显示生日 格式化日期时间--%><%--Eval("Birthday","{0:yyyy年MM月dd日}"可以直接进行格式化 "Birthday"前面是要绑定字段的名称，,"{0:yyyy年MM月dd日}"yyyy年MM月dd日是格式化字符串 --%>
</tr>
</ItemTemplate>
<AlternatingItemTemplate>交替项模板
<tr> <%--再HTML里面嵌入C#代码--%>
<td height="30" align="center" valign="middle" bgcolor="#00FFFF"><%#Eval("Code") %></td>
<td align="center" valign="middle" bgcolor="#00FFFF"><%#Eval("Name") %></td>
<td align="center" valign="middle" bgcolor="#00FFFF"><%#ShowSex()%></td><%--找后台函数调用--%>
<td align="center" valign="middle" bgcolor="#00FFFF"><%#ShowNation() %></td><%--可以用调用后台函数的方法显示民族名称--%> <%--Eval("Nation1.Name") 如果有主外键关系，要想显示主表的某一列，可以直接用表名点出他的列--%>
<td align="center" valign="middle" bgcolor="#00FFFF"><%#ShowBirthday() %></td> <%--可以用调用后台函数的方法显示生日 格式化日期时间--%><%--Eval("Birthday","{0:yyyy年MM月dd日}"可以直接进行格式化 "Birthday"前面是要绑定字段的名称，,"{0:yyyy年MM月dd日}"yyyy年MM月dd日是格式化字符串 --%>
</tr>
</AlternatingItemTemplate>
<%--页脚模板只显示一次--%>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</div>
<br />
<br />
<asp:Repeater ID="Repeater2" runat="server">
<HeaderTemplate>
<u id="menu">
</HeaderTemplate>
<FooterTemplate>
</u>
</FooterTemplate>
<ItemTemplate>
<li class="cd" bs="<%#Eval("Code") %>"><%#Eval("Name") %></li>
</ItemTemplate>
</asp:Repeater>
</form>
</body>
</html>
后台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 _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
TestDataContext context = new TestDataContext();
//Info是从表 Nation是主表 可以从 从表中点出主表 可以直接找到它的姓名
// context.Info.Where(p => p.Nation1.Name);
Repeater1.DataSource = context.Info;
Repeater1.DataBind();
Repeater2.DataSource = context.Nation;
Repeater2.DataBind();
}
}
//用函数处理性别
public string ShowSex()
{
//转成bool型 sum运算符 把Sex转成男或女 返回过来
// return Convert.ToBoolean(Eval("Sex")) ? "男" : "女";
//如果是男显示红色
if (Convert.ToBoolean(Eval("Sex")))
{
//return "<span style='color:red'>男</span>";
return "<mark>男</mark>";
}
else
{
return "女";
}
}
//返回一个民族名称
public string ShowNation()
{
string nation = Eval("Nation").ToString();
TestDataContext context = new TestDataContext();
return context.Nation.Where(p => p.Code == nation).First().Name;
}
//处理生日 格式化日期时间
public string ShowBirthday()
{
return Convert.ToDateTime( Eval("Birthday")).ToString("yyyy年MM月dd日");
}
}
显示：
