asp.net中javascript与后台c#交互

关于“asp.net中javascript与后台c#交互”的攻略，首先我们需要了解两种交互方式，一种是基于页面回传（postback）的交互方式，另一种是基于ajax的交互方式。

基于页面回传的交互

页面回传（postback）是指用户提交表单数据后，服务器在处理完这些数据后重新加载了整个页面，这种方式下，页面中可以直接调用后台c#的方法，并传递参数。

实例1：在页面中调用后台方法并传递参数

代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <input type="text" id="txtName" />
            <input type="button" id="btnSubmit" value="提交" onclick="submitForm();" />
        </div>
    </form>

    <script type="text/javascript">
        function submitForm() {
            var name = document.getElementById("txtName").value;
            <%= "string result = ShowMessage('"+name+"');" %>
            alert(result);
        }
    </script>
</body>
</html>

在代码中，我们创建了一个ASP.NET应用程序，并在页面中放置了一个文本框和一个按钮。当用户点击按钮时，页面中的submitForm方法会被调用。该方法通过document.getElementById获取了文本框的值，然后传递给后台的方法ShowMessage。ShowMessage方法的定义如下：

protected string ShowMessage(string name)
{
    return "您好，"+name;
}

由于ShowMessage方法被定义为protected，所以可以直接在页面中调用。而方法返回的内容可以通过定义在代码块中的变量result来读取。最终，弹出一个对话框，显示了ShowMessage方法返回的内容。

实例2：在页面中调用后台方法获取数据

代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function getData() {
            __doPostBack('getData', '');
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <input type="button" value="获取数据" onclick="getData();" />
            <label id="lblData" />
        </div>
    </form>

    <script type="text/C#" runat="server">
        protected void Page_Init(object sender, EventArgs e)
        {
            this.Page.RegisterPostBackControl(this.Page.FindControl("lblData"));
        }

        protected override void Render(HtmlTextWriter writer)
        {
            base.Render(writer);
            if (this.IsPostBack && this.Request.Form["__EVENTTARGET"] == "getData")
            {
                string data = GetData();
                Page.ClientScript.RegisterStartupScript(this.GetType(), "GetData", "<script type='text/javascript'>document.getElementById('lblData').innerHTML = '"+data+"';</script>");
            }
        }

        protected string GetData()
        {
            return "Hello, ASP.NET";
        }
    </script>
</body>
</html>

在代码中，我们在页面中创建了一个按钮和一个标签，当用户点击按钮时，调用了JavaScript方法getData，该方法通过__doPostBack向服务器发送了一个请求，请求的参数是“getData”，它告诉服务器我要获取数据。

在后台代码中，我们重写了Render方法，判断是否为页面回传（postback）请求，如果是，我们就调用GetData方法获取数据，并使用Page.ClientScript对象在页面中注入一段JavaScript代码，该代码用于将获取到的数据显示在标签中。

基于ajax的交互

在ajax交互中，我们可以借助jQuery框架来发送请求，并在请求完成后处理返回的数据。下面我们通过两个示例来演示如何实现基于ajax的交互。

实例3：通过ajax获取后台数据

代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha384-Gl6KZv/xIhqZ7jvoIYTwnQ7TlR81TUKKSWJcA6ZVJcA6ZVJcA6ZVJcA6ZVJcA6ZVJcA6ZVJcA6ZVJcA6ZVJcA6ZVJcA6ZVJcA6ZVJcA6ZVJcA6ZVJcA6ZVJcA6ZVJcA6Z+B4f/0p" crossorigin="anonymous"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <input type="button" id="btnGetData" value="获取数据" />
            <label id="lblData" />
        </div>
    </form>

    <script type="text/javascript">
        $(document).ready(function() {
            $("#btnGetData").click(function() {
                $.ajax({
                    url: "Default.aspx/GetData",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function(data) {
                        $("#lblData").text(data.d);
                    }
                });
            });
        });
    </script>
</body>
</html>

在代码中，我们在页面中创建了一个按钮和一个标签，点击按钮时调用了jQuery的$.ajax方法，该方法用于异步发送一个POST请求到后台的GetData方法，并在请求完成后根据返回的数据更新标签中的内容。

后台代码如下：

[System.Web.Services.WebMethod]
public static string GetData()
{
    return "Hello, ASP.NET";
}

在后台代码中，我们创建了一个静态方法GetData，并添加了System.Web.Services.WebMethod属性，该属性用于让该方法成为一个Web服务，可以从客户端通过ajax来调用。

实例4：在ajax请求中传递参数

代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha384-Gl6KZv/xIhqZ7jvoIYTwnQ7TlR81TUKKSWJcA6ZVJcA6ZVJcA6ZVJcA6ZVJcA6ZVJcA6ZVJcA6ZVJcA6ZVJcA6ZVJcA6ZVJcA6ZVJcA6ZVJcA6ZVJcA6ZVJcA6Z+B4f/0p" crossorigin="anonymous"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <input type="text" id="txtName" />
            <input type="button" id="btnGetData" value="获取数据" />
            <label id="lblData" />
        </div>
    </form>

    <script type="text/javascript">
        $(document).ready(function() {
            $("#btnGetData").click(function() {
                var name = $("#txtName").val();
                $.ajax({
                    url: "Default.aspx/GetDataWithParameter",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    data: JSON.stringify({name: name}),
                    success: function(data) {
                        $("#lblData").text(data.d);
                    }
                });
            });
        });
    </script>
</body>
</html>

在代码中，我们在页面中创建了一个文本框、一个按钮和一个标签，用户在文本框中输入名字，点击按钮时将名字作为参数传递到后台的GetDataWithParameter方法中。

后台代码如下：

[System.Web.Services.WebMethod]
public static string GetDataWithParameter(string name)
{
    return "Hello, "+name;
}

在后台代码中，我们创建了一个静态方法GetDataWithParameter，并添加了System.Web.Services.WebMethod属性，该属性用于让该方法成为一个Web服务，可以从客户端通过ajax来调用。同时，方法还接受一个字符串类型的参数name，表示传递到后台的参数。

这就是ASP.NET中JavaScript与后台C#交互的完整攻略。通过这篇攻略，你应该已经学会了如何在ASP.NET中通过页面回传和ajax两种方式来实现前后端的交互。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：asp.net中javascript与后台c#交互 - Python技术站

asp.net中javascript与后台c#交互

基于页面回传的交互

实例1：在页面中调用后台方法并传递参数

实例2：在页面中调用后台方法获取数据

基于ajax的交互

实例3：通过ajax获取后台数据

实例4：在ajax请求中传递参数

相关文章