ASP.NET Web编程入门-创建一个简单的Web页面

2022年8月25日 174次阅读 来源: liang08114

一、VS2010 新建一个ASP.NET Empty Web Application项目。

二、添加一个Web Form页面，命名为：Registration2.aspx。

三、在Registration2设计视图拖拽添加一些控件并设置属性，完成后如下：

《ASP.NET Web编程入门-创建一个简单的Web页面》

 源代码视图如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Registration.aspx.cs" Inherits="EventRegistration2.Registration" %>

<!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">
        .style1
        {
            width: 100%;
        }
        .style2
        {
            width: 100px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <table class="style1">
            <tr>
                <td class="style2">
                    Event</td>
                <td>
                    <asp:DropDownList ID="ddlEvent" runat="server" Height="18px" Width="141px">
                        <asp:ListItem>Introduction to ASP.NET</asp:ListItem>
                        <asp:ListItem>Introduction to Windows Azure</asp:ListItem>
                        <asp:ListItem>Begin Visual C# 2012</asp:ListItem>
                    </asp:DropDownList>
                </td>
            </tr>
            <tr>
                <td class="style2">
                    First Name</td>
                <td>
                    <asp:TextBox ID="tbFirstName" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td class="style2">
                    Last Name</td>
                <td>
                    <asp:TextBox ID="tbLastName" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td class="style2">
                    Email</td>
                <td>
                    <asp:TextBox ID="tbEmail" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td class="style2">
                    &nbsp;</td>
                <td>
                    <asp:Button ID="Submit" runat="server" Text="Button" />
                </td>
            </tr>
        </table>
    
    </div>
    </form>
</body>
</html>

 暂时还没有为控件添加任何事件，所以 Registration.aspx.cs 内的后台服务器代码为空：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace EventRegistration2
{
    public partial class Registration : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }
    }
}

四、运行一下程序，程序界面效果如下：

《ASP.NET Web编程入门-创建一个简单的Web页面》

右键查看网页源代码如下：




<!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><title>

</title>
    <style type="text/css">
        .style1
        {
            width: 100%;
        }
        .style2
        {
            width: 100px;
        }
    </style>
</head>
<body>
    <form method="post" action="./Registration.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUIMTM3Mzk3MjZkZJYdyRPSR1fS3wIBns38y8R8czT2Dlju32C7+sy0efgW" />
</div>

<div class="aspNetHidden">

	<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="0E6B69E9" />
	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAAU3x8qG70K7aKeu+2fztW1k0fMME9lwpgVXR7Bj0XM58GPMnjboa62QCFz6XwjsGoCW9cfhXMGEAsxjutrqH9VId8BcWGH1ot0k0SO7CfuulMVY8fYmjPtfc0dnKrVTJ+1t1WNfWb9yRU+s50eLQgoC" />
</div>
    <div>
    
        <table class="style1">
            <tr>
                <td class="style2">
                    Event</td>
                <td>
                    <select name="ddlEvent" id="ddlEvent" style="height:18px;width:141px;">

</select>
                </td>
            </tr>
            <tr>
                <td class="style2">
                    First Name</td>
                <td>
                    <input name="tbFirstName" type="text" id="tbFirstName" />
                </td>
            </tr>
            <tr>
                <td class="style2">
                    Last Name</td>
                <td>
                    <input name="tbLastName" type="text" id="tbLastName" />
                </td>
            </tr>
            <tr>
                <td class="style2">
                    Email</td>
                <td>
                    <input name="tbEmail" type="text" id="tbEmail" />
                </td>
            </tr>
            <tr>
                <td class="style2">
                    &nbsp;</td>
                <td>
                    <input type="submit" name="Submit" value="Button" id="Submit" />
                </td>
            </tr>
        </table>
    
    </div>
    </form>
</body>
</html>

五、要点

1、Registration.aspx文件说明

Page指令：Registration.aspx文件的第一行

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Registration.aspx.cs" Inherits="EventRegistration2.Registration" %>

Language：编程语言；

AutoEventWireup=“true”：表示页面的事件处理程序自动连接到特定的方法名上；

Inherits=”EventRegistration2.Registration”，表示ASPX文件中动态生成的类派生与基类EventRegistration2.Registration，这个基类位于CodeBehind指定的文件内；

2、文档类型声明：XHTML（Registration.aspx文件的第二、三行）

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Registration.aspx.cs" Inherits="EventRegistration2.Registration" %>

<!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">

https://blog.csdn.net/cheshifei3571/article/details/100849058

3、<form id=”form1″ runat=”server”>

<body>
    <form id="form1" runat="server">
    <div>
    
        <table class="style1">
            <tr>
                <td class="style2">
                    Event</td>
                <td>
                    <asp:DropDownList ID="ddlEvent" runat="server" Height="18px" Width="141px">
                        <asp:ListItem>Introduction to ASP.NET</asp:ListItem>
                        <asp:ListItem>Introduction to Windows Azure</asp:ListItem>
                        <asp:ListItem>Begin Visual C# 2012</asp:ListItem>
                    </asp:DropDownList>
                </td>
            </tr>
            <tr>
                <td class="style2">
                    First Name</td>
                <td>
                    <asp:TextBox ID="tbFirstName" runat="server"></asp:TextBox>
                </td>
            </tr>

个人理解：通知ASP.NET，这是运行在服务端上的代码，要转化为响应实例，最后要输出对应的HTML元素。 

https://blog.csdn.net/longhaoyou/article/details/60960752 

4、<asp:DropDownList ID=”ddlEvent” runat=”server” Height=”18px” Width=”141px”>

                    <asp:DropDownList ID="ddlEvent" runat="server" Height="18px" Width="141px">
                        <asp:ListItem>Introduction to ASP.NET</asp:ListItem>
                    <asp:TextBox ID="tbFirstName" runat="server"></asp:TextBox>

解释同上。 

5、最后可见，服务端返回给客户端的HTML中是没有runat=”server 和 asp:***的

<form method="post" action="./Registration.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMjEyOTg0Mjg3M2RksgyM+Ct8pfiG5QVc9EMRCaCcLti2gpgsZXQJN1QIBKM=" />
</div>

<div class="aspNetHidden">

	<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="0E6B69E9" />
	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAAgzXAEXqQDfASEq1ySKpd5RMTQJkvmQgAJqS9DcCRIg8889lYeFJo4C5E2Of0jt+xdqgRvUMSslP8U4uBbGrMF60fMME9lwpgVXR7Bj0XM58GPMnjboa62QCFz6XwjsGoCW9cfhXMGEAsxjutrqH9VId8BcWGH1ot0k0SO7CfuulIZ1WJ0D+/daakG3ZAJoIPfGBrCPmlfw6yZ+h0IdQwBG" />
</div>
    <div>
    
        <table class="style1">
            <tr>
                <td class="style2">
                    Event</td>
                <td>
                    <select name="ddlEvent" id="ddlEvent" style="height:18px;width:141px;">
	<option selected="selected" value="Introduction to ASP.NET">Introduction to ASP.NET</option>
	<option value="Introduction to Windows Azure">Introduction to Windows Azure</option>
	<option value="Begin Visual C# 2012">Begin Visual C# 2012</option>

</select>
                </td>
            </tr>
            <tr>
                <td class="style2">
                    First Name</td>
                <td>
                    <input name="tbFirstName" type="text" id="tbFirstName" />
                </td>
            </tr>
            <tr>
                <td class="style2">
                    Last Name</td>
                <td>
                    <input name="tbLastName" type="text" id="tbLastName" />
                </td>
            </tr>

 

    原文作者：liang08114
    原文地址: https://blog.csdn.net/liang08114/article/details/117188913
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞