⑴ 创建ASP.NET网站
新建MyWebSite网站，添加一个WebForm1网页，其中包含一个文本框TextBox1一个按钮Button1（计算）和一个标签Label1（""）。在文本框中输入一个数，当点击“计算”按钮时，在标签中显示此数的平方根。
WebForm1.aspx文件内容如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="shiyan1.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.TextBox1 {
width: 20px;
height: 5px;
right: 50%;
left: 50%;
margin-top: 20px;
margin-right: 400px;
}
.Button1
{
width: 10px;
height: 4px;
right: 500px;
left: 500px;
}
</style>
</head>
<body class="TextBox1">
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server" ontextchanged="TextBox1_TextChanged"></asp:TextBox>
</div>
<p>
<asp:Button ID="Button1" runat="server" οnclick="Button1_Click" Text="计算"
Width="73px" Height="29px" />
</p>
</form>
</body>
</html>
WebForm1.aspx.cs文件如下:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace shiyan1
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Button1_Click(object sender, EventArgs e)
{
double num = Convert.ToDouble(TextBox1.Text);
Label1.Text = Math.Sqrt(num).ToString();
}
}
}
实现数据的前后台调用
实现样式如下:
⑵ DIV/CSS布局
使用HTML标签设计如下所示表单
Webform1.aspx文件：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="shiyan112.WebForm1" %>
<!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>实验1</title>
<style type="text/css">
*{
left: 50px;
padding: 0px;
margin: 0px;
border: 1px solid #FFFFFF;
}
#div0
{
left: 50px;
width: 600px;
margin: auto;
border-style: solid;
border-width: 1px;
}
fieldset
{
border: 1px solid #000000;
margin: -15px 0px 0px 0px;
width: 500px;
height: 362px;
padding-left: 150px;
}
label
{
font-weight: bold;
font-size: 12px;
height: 19px;
float: none;
margin-left: 0px;
text-align: right;
}
#name01, #pass01, #pass02, #zjhm, #dh
{
border: 1px solid #3ca1af;
height: 19px;
width: 130px;
}
.juli
{
line-height: 21px;
width: 130px;
float: left;
display: block;
padding-right: 0px;
height: 19px;
clip: rect(auto, auto, auto, 0px);
}
#button
{
margin: 0px 0px 0px 150px;
font-size: 12px;
font-family: 黑体;
font-weight: bold;
padding: 0px;
height: 16px;
width: 48px;
float: none;
}
#zjzl
{
width: 140px;
height: 22px;
}
a
{
font-size: 12px;
}
.c1
{
border: 1px solid #00FFFF;
padding: 0px;
width: 80px;
height: 20px;
margin-left: 424px;
margin-top: 50px;
font-size: 14px;
background-color: #FFFFFF;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<input type="button" class="c1" value="用户注册" οnclick="return button_onclick()" />
<div id="div0">
<fieldset >
<br />
<label for="name01" class="juli">用户名：</label>
<input type="text" id="name01" />
<br />
<br />
<label for="pass01" class="juli">密码：</label>
<input type="password" id="pass01" />
<br />
<br />
<label for="pass02" class="juli"> 确认密码：</label>
<input type="password" id="pass02" />
<br />
<br />
<label for="zjzl" class="juli">密码保护问题：</label>
<select id="zjzl" οnclick="return zjzl_onclick()">
<option id="zjzl1">请选择密码提示问题</option>
<option id="zjzl2">问题一</option>
</select>
<br />
<br />
<label for="zjhm" class="juli">密码保护问题的答案:</label>
<input type="text" id="zjhm" />
<br />
<br />
<label class="juli">性别：</label>
<input type="radio" name="dx" value="单选" id="dx_0" />
<label for="dx_0">男</label>
<input type="radio" name="dx" value="单选" id="dx_1" />
<label for="dx_1">女</label>
<br />
<br />
<label class="juli"> 同意服务条款：</label>
<input type="checkbox" name="vehicle" value="Bike" /><a href="#">查看服务条款？</a>
<br />
<br />
<input type="button" id="button" value="提 交" /></fieldset>
</div>
</form>
</body>
</html>
小Tips：
如何给前端页面添加样式:
点击设计 -- > 选择格式 --- 》新建样式
（3）简单表单设计
实现如下界面;
ThisPage.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div id="div0">
<fieldset>
<legend>填写信息</legend>
<br />
<label for="name01">用户名:</label>
<input type="text" id="name01" />
<br /><br />
<label for="pass01">密码:</label>
<input type="password" id="pass01" />
<br /><br />
<label for="pass02">确认密码:</label>
<input type="password" id="pass02" />
<br /><br />
<label for="sfz">证件种类:</label>
<select id="sfz">
<option id="sfz1">身份证</option>
<option id="sfz2">学生证</option>
</select>
<label for="number">证件号码:</label>
<input type="text" id="number" />
<br /><br />
<label for="tel">联系方式:</label>
<input type="radio" name="dx" value="单选" id="dx_0" />
<label for="dx_0">手机</label>
<input type="radio" name="dx" value="单选" id="dx_1" />
<label for="dx_1">座机</label>
<input type="text" id="tel" />
<br /><br />
<input type="button" id="button" value="确定" />
</fieldset>
</div>
</form>
</body>
</html>
京公网安备 11010502036488号