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

待我称王封你为后i 2022-03-08 09:44 179阅读 0赞

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

##  创建ASP.NET网站 ##

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

### 第一种方法:   使用C\# ###

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zOTUzMzQxNA_size_16_color_FFFFFF_t_70][] ###

<%@ 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" onclick="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();
    
            }
            
        }
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zOTUzMzQxNA_size_16_color_FFFFFF_t_70 1][]

### 第二种方法： 使用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" onclick="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()方法

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zOTUzMzQxNA_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zOTUzMzQxNA_size_16_color_FFFFFF_t_70]: /images/20220308/beb349f13c8b4bb6b4b3033d4083d978.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zOTUzMzQxNA_size_16_color_FFFFFF_t_70 1]: /images/20220308/04d462a69c404ad6ad68fc538f05b908.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zOTUzMzQxNA_size_16_color_FFFFFF_t_70 2]: /images/20220308/bda5e0d06e714130bb2dc8802adaed9d.png