ASP.NET WebForm 04 事件驱动开发

Posted by 卢华源 on July 17, 2019

控件+事件实现计算器

  • 右击项目跟目录,添加Web窗体,命名为3.Calculator.aspx

    此时,项目的文件目录如下:

  • 打开Calculator.aspx文件,可以看到如下所示代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="3.Calculator.aspx.cs" Inherits="ASP.NETDemo01._3_Calculator" %>

<!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>基于时间+控件实现计算器</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
          
        </div>
    </form>
</body>
</html>
  • 点击左下角的设计按钮

  • 点击视图-工具箱,出现如下窗口:

  • 拖动标准工具中的TextBox到源代码中的div之间,略微改动,实现如下代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="3.Calculator.aspx.cs" Inherits="ASP.NETDemo01._3_Calculator" %>

<!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>基于时间+控件实现计算器</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="txtNum1" runat="server"></asp:TextBox>+
            <asp:TextBox ID="txtNum2" runat="server"></asp:TextBox>=
            <asp:TextBox ID="txtResult" runat="server"></asp:TextBox>
            <asp:Button ID="btnCal" runat="server" Text="计算" />
        </div>
    </form>
</body>
</html>


在以上视图中,runat="server"代表此页面本质上是一个服务器文件. 此页面无需写form表单,aspx文件会直接封装好. 页面运行后代码如下:





<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>
	基于时间+控件实现计算器
</title></head>
<body>
    <form method="post" action="./3.Calculator.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="DCXqSJGbg5ExhLQ4rAFlzJSZAzOIkTBQOqd0ncXQlqV0Svwi7hr8sHSwfAJxfpXiQab9KArhXrIKm1AhS1bDph3GPKZOTJ2m95g8aTo3+cM=" />
</div>

        <div>
            <input name="txtNum1" type="text" id="txtNum1" />+
            <input name="txtNum2" type="text" id="txtNum2" />=
            <input name="txtResult" type="text" id="txtResult" />
            <input type="submit" name="btnCal" value="计算" id="btnCal" />
        </div>
    
<div class="aspNetHidden">

	<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="E5750B95" />
	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="Vo7NKPayRlJaAIa92RwJgVn/R7UF9/nmfeky7LHy/Ou06ZfnpoK5okIon8LRO/6e4UQpAfILz4on0syT6a1dJ76/FzC4x5Sh0CRL/CAAwG7+RRo3O/tmfpoxejRKskFIUOpLORH9q80akTJB/UmbC6JKCNuOIG52APKpU4va85aVXkkIqwCzf4mfpwoSoF8C" />
</div></form>

<!-- Visual Studio Browser Link -->
<script type="text/javascript" src="https://localhost:44399/05836c4818ae4ee8bef343ab5f5fbd9c/browserLink" async="async" id="__browserLink_initializationData" data-requestId="f99e8325c504415ab8f144fff97293b8" data-appName="Chrome"></script>
<!-- End Browser Link -->

</body>
</html>



  • 在设计视图中,双击按钮,可以跳转到事件代码中,在该类中完成如下代码:

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

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

        }

        protected void btnCal_Click(object sender, EventArgs e)
        {
            int a = Convert.ToInt32(this.txtNum1.Text.Trim());
            int b = Convert.ToInt32(this.txtNum2.Text.Trim());
            this.txtResult.Text = (a + b).ToString();
        }
    }
}


此时,将Calculator设置为起始页,运行,可以得到在页面内实现动态刷新的效果

内嵌代码方式(了解)

新建网站(了解)