C#实现简单网页

全栈程序员站长

发布于 2022-11-08 11:23:05

1.4K0

发布于 2022-11-08 11:23:05

文章被收录于专栏：全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

⑴ 创建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" onclick="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">
&nbsp;<input  type="button" class="c1" value="用户注册" onclick="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" onclick="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>

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/182461.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年10月13日，如有侵权请联系 cloudcommunity@tencent.com 删除

https