asp.net1000行代码
时间: 2023-11-13 18:06:07 浏览: 42
以下是一个较为复杂的 ASP.NET 页面,包含约1000行代码:
```asp
<%@ Page Language="C#" %>
<!DOCTYPE html>
<html>
<head>
<title>ASP.NET 1000 行代码示例</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
/* 样式表 */
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
th {
background-color: #4CAF50;
color: white;
}
tr:nth-child(even){background-color: #f2f2f2}
/* 下拉框样式 */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>欢迎来到 ASP.NET 1000 行代码示例</h1>
<p>
当前时间是:<% Response.Write(DateTime.Now.ToString()); %>
</p>
<p>
<label for="txtName">请输入您的姓名:</label>
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<asp:Button ID="btnSubmit" runat="server" Text="提交" OnClick="btnSubmit_Click" />
</p>
<p>
<% if (!String.IsNullOrEmpty(txtName.Text)) { %>
您好,<% Response.Write(txtName.Text); %>!
<% } %>
</p>
<p>
<asp:Label ID="lblMessage" runat="server"></asp:Label>
</p>
<h2>员工列表</h2>
<p>
<asp:GridView ID="gvEmployees" runat="server" AutoGenerateColumns="false" OnRowCommand="gvEmployees_RowCommand">
<Columns>
<asp:BoundField DataField="Id" HeaderText="ID" />
<asp:BoundField DataField="Name" HeaderText="姓名" />
<asp:BoundField DataField="Email" HeaderText="电子邮件" />
<asp:TemplateField HeaderText="操作">
<ItemTemplate>
<div class="dropdown">
<button class="dropbtn">操作</button>
<div class="dropdown-content">
<a href="#" data-command="edit" data-id="<%# Eval("Id") %>">编辑</a>
<a href="#" data-command="delete" data-id="<%# Eval("Id") %>">删除</a>
</div>
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</p>
<h2>添加员工</h2>
<p>
<label for="txtNewName">姓名:</label>
<asp:TextBox ID="txtNewName" runat="server"></asp:TextBox>
</p>
<p>
<label for="txtNewEmail">电子邮件:</label>
<asp:TextBox ID="txtNewEmail" runat="server"></asp:TextBox>
</p>
<p>
<asp:Button ID="btnAddEmployee" runat="server" Text="添加员工" OnClick="btnAddEmployee_Click" />
</p>
</div>
</form>
<script>
// JavaScript 代码
$(document).on("click", "[data-command]", function () {
var command = $(this).data("command");
var id = $(this).data("id");
switch (command) {
case "edit":
// 编辑员工
alert("编辑员工:" + id);
break;
case "delete":
// 删除员工
if (confirm("确定要删除该员工吗?")) {
__doPostBack("gvEmployees", "Delete$" + id);
}
break;
}
});
</script>
</body>
</html>
<script runat="server">
// C# 代码
protected void btnSubmit_Click(object sender, EventArgs e)
{
// 处理表单提交事件
}
protected void btnAddEmployee_Click(object sender, EventArgs e)
{
// 添加员工
}
protected void gvEmployees_RowCommand(object sender, GridViewCommandEventArgs e)
{
// 处理员工列表中的操作事件
}
</script>
```
这个页面包含一个表单,其中包含一个文本框和一个提交按钮。当用户单击提交按钮时,将触发 `btnSubmit_Click` 事件处理程序。在页面上方,将显示当前时间,并提示用户输入姓名。如果用户输入了姓名,则页面将显示一个欢迎消息。
页面还包含一个表格,用于显示员工列表。表格是使用 ASP.NET 的 GridView 控件实现的,并且包含一个“操作”列,其中包含“编辑”和“删除”链接。当用户单击“删除”链接时,将触发 `gvEmployees_RowCommand` 事件处理程序,并将员工的 ID 作为参数传递给该方法。
页面还包含一个简单的“添加员工”表单,其中包含两个文本框和一个提交按钮。当用户单击“添加员工”按钮时,将触发 `btnAddEmployee_Click` 事件处理程序,以添加新的员工。
此外,页面还包含一些 JavaScript 代码,用于处理“编辑”和“删除”操作的单击事件。该代码使用 jQuery 库处理事件,并使用 `__doPostBack` 函数触发服务器端事件处理程序。