C#网页实现JavaScript前后端调用

最近在学习C#，准备把之前学到的HTML网页结合起来。遇到了一些问题，做一下总结。

创建ASP.NET网站

新建MyWebSite网站，添加一个WebForm1网页，其中包含一个文本框TextBox1一个按钮Button1（计算）和一个标签Label1（""）。在文本框中输入一个数，当点击“计算”按钮时，在标签中显示此数的平方根。

第一种方法: 使用C#

<%@ 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;
        }
          .Text {
            width:100%;
            margin-top:40px;
            text-align:center;
            
        }
    </style>
</head>
<body class="Text">
    <form id="form1" runat="server">
    <div>
      
    
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
      
    
    </div>
    <p>
        <asp:Button ID="Button1" runat="server" οnclick="Button1_Click" Text="计算" 
            Width="73px" Height="29px" />
    </p>
    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    </form>
</body>
</html>

要复制的话，只需要复制html里面的就行了，不然的话会报一个cs1061错误（缺少using指令或程序集调用）

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)
        {
            //string text = TextBox1.Text;
            double num = Convert.ToDouble(TextBox1.Text);
            Label1.Text = Math.Sqrt(num).ToString();

        }
        
    }
}

第二种方法：使用JS函数，后台cs文件调用

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="shiyan111.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>使用JS实现</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;
        }
        .Text {
            width:100%;
            margin-top:40px;
            text-align:center;
            
        }
    </style>
    <script type="text/javascript">
    function tk() {
       // var num = Math.sqrt(document.getElementById("TextBox1").value);
        
        var input = document.getElementById("TextBox1");
        var num = Math.sqrt(input.value);
        
        document.getElementById('Label1').innerHTML = num;
    }
</script>
</head>
<body class="Text">
    <form id="form1" runat="server">
    <div>
      
    
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
      
    
    </div>
    <p>
        <asp:Button ID="Button1" runat="server" οnclick="Button1_Click" Text="计算" 
            Width="73px" Height="29px" />
    </p>
    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    </form>

   
    
</body>
</html>

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

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

        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            ClientScript.RegisterStartupScript(this.GetType(), "myscript", "<script type='text/javascript'>tk();</script>");
        }
    }
}

其中，在前台写好js函数后，无法直接使用onclick调用它，会出现找不到函数定义，把onclick改为onclientclick后，虽然不报错了，但函数无法实现。

在cs文件click函数中调用js函数，使用ClientScript.registerStartupScript()方法

C#网页实现JavaScript前后端调用

创建ASP.NET网站

第一种方法: 使用C#

第二种方法： 使用JS函数，后台cs文件调用

第二种方法：使用JS函数，后台cs文件调用