1.用Asp.net Form技术创建一个简单的加法应用。
前台代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AddDemo.aspx.cs" Inherits="AddDemo" %> <!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="FirstNum" step="0.01" runat="server" TextMode="Number"></asp:TextBox> <br /> 加数：<asp:TextBox ID="SecondNum" step="0.01" runat="server" TextMode="Number"></asp:TextBox> <br /> <br /> 和数：<asp:TextBox ID="SumNum" step="0.01" runat="server" TextMode="Number"></asp:TextBox> <br /> <br /> <asp:Button ID="BtnCal" runat="server" OnClick="BtnCal_Click" Text="Button" /> </div> </form> </body> </html>
后台代码:
using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class AddDemo : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void BtnCal_Click(object sender, EventArgs e) { float a = float.Parse(FirstNum.Text); float b = float.Parse(SecondNum.Text); float c = a + b; SumNum.Text = c.ToString(); } }
2.上述网站,界面简陋。在上述网站中，添加一个纯前端静态页面文件,比如:cs.html
复制代码:https://www.cnblogs.com/exesoft/p/12725045.html
至cs.html文件中。参考代码最终效果:http://exesoft.gitee.io/webshow/HtmlGitDemo/CaseDemo/JavascriptDemo/CalDemo.html
3.结合上述纯前端静态页面代码,修改AddDemo.aspx页面代码如下:
参考cs.html文件中代码,修改AddDemo.aspx前台代码为:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AddDemo.aspx.cs" Inherits="AddDemo" %> <!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> <link href="https://cdn.bootcss.com/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet" /> <script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.js"></script> <style type="text/css"> .mygreen { color: green; } .myred { color: red; } .input-group { margin-bottom: 20px; } .card { margin-top: 20px; margin-bottom: 20px; } .happy { background-image: url(pic/happy.gif); background-repeat: no-repeat; background-position: 180px; background-size: 100px 100px; } .angry { background-image: url(pic/angry.gif); background-repeat: no-repeat; background-position: 180px; background-size: 100px 100px; } .set { background-image: url(pic/set.gif); background-repeat: no-repeat; background-size: 100px 100px; background-position: 180px; animation: mymove 5s 2; -webkit-animation: mymove 5s 2; } @keyframes mymove { from { background-position: 180px; } to { background-position: 300px; } } @-webkit-keyframes mymove { from { background-position: 180px; } to { background-position: 300px; } } </style> </head> <body> <div class="container"> <form id="form1" runat="server"> <div class="card"> <div class="card-header">加法算术练习 </div> <asp:Panel ID="cardbody" runat="server" class="card-body"> <h5 class="card-title">温馨提示:</h5> <p id="tip" runat="server" class="card-text">您好!</p> <a href="#" class="btn btn-primary">本人主页</a> </asp:Panel> </div> <label for="FirstNum">被加数:</label> <div class="input-group input-group-lg"> <div class="input-group-prepend"><span class="input-group-text" id="inputGroup-sizing-lg1">First Num: </span></div> <asp:TextBox ID="FirstNum" step="0.01" runat="server" min="0" max="100" TextMode="Number" class="form-control" aria-describedby="inputGroup-sizing-lg" Text="0"></asp:TextBox> </div> <label for="SecondNum">加数:</label> <div class="input-group input-group-lg"> <div class="input-group-prepend"><span class="input-group-text" id="inputGroup-sizing-lg">Second Num:</span> </div> <asp:TextBox ID="SecondNum" step="0.01" min="0" max="100" runat="server" TextMode="Number" class="form-control" aria-describedby="inputGroup-sizing-lg" Text="0"></asp:TextBox> </div> <label for="SumNum">和:</label> <div class="input-group input-group-lg"> <div class="input-group-prepend"><span class="input-group-text" id="inputGroup-sizing-lg">Sum Num: </span></div> <asp:TextBox ID="SumNum" step="0.01" min="0" max="100" runat="server" TextMode="Number" class="form-control" aria-describedby="inputGroup-sizing-lg" Text="0"></asp:TextBox> </div> <asp:Button ID="BtnCal" class="btn" runat="server" OnClick="BtnCal_Click" Text="提交计算" /> </form> </div> </body> </html>
修改AddDemo.aspx.cs 后台代码为:
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class AddDemo : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void BtnCal_Click(object sender, EventArgs e) { float a = float.Parse(FirstNum.Text); float b = float.Parse(SecondNum.Text); float c = a + b; SumNum.Text = c.ToString(); tip.InnerText = "Bingo!"; cardbody.CssClass = "happy myred"; } }