【C# 功能总结 8】 C# 页面跳转传值 ajax

路飞VS草帽

已于 2025-04-09 10:01:07 修改

阅读量854

点赞数 8

分类专栏： 39天精通C#从入门到就业文章标签： c# ajax

于 2024-12-19 16:11:54 首次发布

本文链接：https://blog.csdn.net/u010117029/article/details/144588457

版权

39天精通C#从入门到就业专栏收录该内容

49 篇文章

订阅专栏

在C# ASP.NET Web Forms中，使用AJAX进行页面跳转并传递值并不是一个常见的做法，因为AJAX主要用于异步更新部分页面内容而不刷新整个页面。不过，你可以通过AJAX调用Web方法或控制器来实现数据传递，并在成功后进行页面跳转。以下是如何使用AJAX在ASP.NET Web Forms中传递值并进行页面跳转的详细步骤和示例代码。

使用AJAX进行页面跳转并传递值的基本概念

AJAX：Asynchronous JavaScript and XML，用于在不重新加载整个页面的情况下与服务器进行通信。
WebMethod：标记在ASPX页面中的静态方法，可以通过JavaScript调用。
jQuery AJAX：简化AJAX调用的JavaScript库。

步骤 1: 引入jQuery库

首先，你需要在项目中引入jQuery库。可以通过CDN引入，也可以下载本地引用。

通过CDN引入jQuery

在你的ASPX页面中添加以下脚本标签：

aspx

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

步骤 2: 创建WebMethod

在ASPX页面的代码隐藏文件中创建一个静态方法，并使用 [WebMethod] 属性标记它。这个方法将被AJAX调用。

源页面 (SourcePage.aspx)

aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SourcePage.aspx.cs" Inherits="YourNamespace.SourcePage" %-->

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Source Page</title>
    <!-- 引入jQuery库 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript">
        // 文档加载完成后执行的函数
        $(document).ready(function () {
            // 为"Submit"按钮绑定点击事件
            $("#btnSubmit").click(function () {
                // 获取用户输入的ID和Name
                var id = $("#txtId").val();
                var name = $("#txtName").val();

                // 使用Ajax发送POST请求
                $.ajax({
                    type: "POST",
                    url: "SourcePage.aspx/SetDataAndRedirect",
                    data: JSON.stringify({ id: id, name: name }),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    // 请求成功后的回调函数
                    success: function (response) {
                        window.location.href = response.d; // 跳转到目标页面
                    },
                    // 请求失败后的回调函数
                    error: function (error) {
                        alert("Error: " + error.responseText);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <label for="txtId">ID:</label>
            <input type="text" id="txtId" /><br /><br />

            <label for="txtName">Name:</label>
            <input type="text" id="txtName" /><br /><br />

            <button id="btnSubmit">Submit</button>
        </div>
    </form>
</body>
</html>

源页面代码隐藏文件 (SourcePage.aspx.cs)

在代码隐藏文件中创建一个静态方法 [WebMethod]，该方法接收参数并返回目标页面的URL。

csharp

using System;
using System.Web.Services;
using System.Web.Script.Services;

namespace YourNamespace
{
    public partial class SourcePage : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            // 页面加载时的初始化逻辑
        }

        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public static string SetDataAndRedirect(string id, string name)
        {
            // 这里可以进行数据验证或其他操作
            if (string.IsNullOrEmpty(id) || string.IsNullOrEmpty(name))
            {
                throw new Exception("ID and Name are required.");
            }

            // 将数据存储在Session中（可选）
            System.Web.HttpContext.Current.Session["UserId"] = id;
            System.Web.HttpContext.Current.Session["UserName"] = name;

            // 返回目标页面的URL
            return "TargetPage.aspx";
        }
    }
}

步骤 3: 读取Session并在目标页面显示数据

在目标页面中，从Session中读取之前存储的数据并显示在页面上。

目标页面 (TargetPage.aspx)

aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TargetPage.aspx.cs" Inherits="YourNamespace.TargetPage" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Target Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Label ID="lblResult" runat="server" Text=""></asp:Label>
        </div>
    </form>
</body>
</html>

目标页面代码隐藏文件 (TargetPage.aspx.cs)

在页面加载时，从Session中读取数据并显示在页面上。

csharp

using System;
using System.Web.UI;

namespace YourNamespace
{
    public partial class TargetPage : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                // 从Session中获取数据
                string userId = Session["UserId"] as string;
                string userName = Session["UserName"] as string;

                // 处理获取到的数据
                if (!string.IsNullOrEmpty(userId) && !string.IsNullOrEmpty(userName))
                {
                    lblResult.Text = $"Received ID: {userId}, Name: {userName}";
                }
                else
                {
                    lblResult.Text = "No data received from session.";
                }
            }
        }
    }
}

示例总结

源页面 (SourcePage.aspx):
- 包含一个表单，其中有两个文本框 (txtId 和 txtName) 和一个提交按钮 (btnSubmit)。
- 使用jQuery监听按钮点击事件，通过AJAX调用 SetDataAndRedirect WebMethod。
- 在AJAX调用成功后，根据返回的目标页面URL进行页面跳转。
源页面代码隐藏文件 (SourcePage.aspx.cs):
- 创建一个静态方法 SetDataAndRedirect，使用 [WebMethod] 属性标记。
- 该方法接收参数，进行必要的验证，并将数据存储在Session中。
- 返回目标页面的URL给前端。
目标页面 (TargetPage.aspx):
- 显示从Session中获取的数据。
- 使用 Request.Form 不适用，因为数据是从Session中获取的。
目标页面代码隐藏文件 (TargetPage.aspx.cs):
- 在 Page_Load 方法中检查是否是首次加载（!IsPostBack）。
- 使用 Session 对象获取之前存储的数据，并将其显示在页面上。