[教学案例]Asp.net Form 应用程序与Bootstrap.css等第三方库的结合使用-1

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";
    }
}

相关阅读:
20200301（4）
网络工程横道图
 20200229追根溯源（3）
20200229(2）
追根溯源 (1)
20200228 down(0)
20200228
7-7 古风排版 (20分)
不写了天梯赛屁股疼死了
 字符串翻转（面试题2）
原文地址：https://www.cnblogs.com/exesoft/p/13292278.html