Question

我有一个列表，当我单击列表上的一行时，我具有AJAX语法，该语法将ID传递给后面代码中的方法，然后将数据返回给某些html元素。这可以正常工作，但是现在它会将数据返回到同一页面上的html元素。如果我想让它导航到另一个页面以显示数据怎么办？所以这是我当前的代码：

我的aspx页面

<%@ Page Language="C#" AutoEventWireup="true" 
CodeFile="listPage.aspx.cs" Inherits="listPage" %>

<!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>Call C# method/function using JQuery Ajax</title>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript" language="javascript">
    $(document).ready(function () {
                $('#matchupTable tr').click(function () {
                    var gameID = $(this).attr('id');
                    //var gameID = '19';
                    $.ajax({
                        url: 'listPage.aspx/GetMatchupByID',
                        method: 'post',
                        contentType: "application/json",
                        data: '{gameID:' + gameID + '}',
                        dataType: "json",
                        success: function (data) {
                            $('#awayCity').text(data.d.AwayCity);
                            $('#awayTeam').text(data.d.AwayTeam);
                            $('#home').text(data.d.Away);
                            $('#homeCity').text(data.d.HomeCity);
                            $('#homeTeam').text(data.d.HomeTeam);
                            $('#home').text(data.d.Home);
                        },
                        error: function (err) {
                            alert(err);
                        }
                    });
                });
            });
</script>

</head>
<body>
    <%-- LIST AREA --%>
    <form id="form1" runat="server">
    <div>
    <table id="matchupTable">
        <tr  style="cursor: pointer;" id="25"><td>Click me, I won't hurt you</td></tr>
    </table>
</div>
</form>

<%-- RESULTS AREA --%>
<div id="awayTeamDiv">
    <div id="awayTeamTitle">
        <h5 id="awayCity"></h5>
        <h3 id="awayTeam"></h3>
        <p id="away"></p>
    </div>
</div>
<div id="homeTeamDiv">
    <div id="homeTeamTitle">
        <h5 id="homeCity"></h5>
        <h3 id="homeTeam"></h3>
        <p id="home"></p>
    </div>
</div>

</body>
</html>

我的代码后面

using System;
using System.Web.Services;
using GamblersDenNet;
using System.Data;
using System.Data.SqlClient;

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

    }

    [WebMethod]
    public static Matchup GetMatchupByID(int gameID)
    {
        Matchup matchup = new Matchup();

        SqlConnection con = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["TrinoviContext"].ConnectionString);

        con.Open();
        SqlCommand cmd = new SqlCommand("usp_GetMatchupDetails", con);
        cmd.CommandType = CommandType.StoredProcedure;
        cmd.Parameters.Add(new SqlParameter()
        {
            ParameterName = "@GameID",
            Value = gameID
        });
        SqlDataReader reader = cmd.ExecuteReader();
        while (reader.Read())
        {
                matchup.GameID = reader["GameID"].ToString();
                matchup.Date = reader["Date"].ToString();
                matchup.HomeCity = reader["HomeCity"].ToString();
                matchup.HomeTeam = reader["HomeTeam"].ToString();
                matchup.Home = reader["Home"].ToString();
                matchup.AwayCity = reader["AwayCity"].ToString();
                matchup.AwayTeam = reader["AwayTeam"].ToString();
                matchup.Away = reader["Away"].ToString();
        }
        return matchup;
    }
}

因此，如果我想改为有一个detailsPage.aspx，并且当我单击tr元素时，它将重定向到此detailsPage.aspx并执行代码，那会是什么样？我知道我必须将listPage.aspx的“结果”区域中的div元素移动到另一页，并且可能将存储过程设置为在页面加载时执行，但是如何将其从单击的行中传递给参数？那会是什么样？

为了简洁起见，我删除了一些多余的代码，因此很抱歉示例中可能存在语法错误。

谢谢！

Answer 1

尝试仅发出普通的http发帖请求而不是ajax，并让端点GetMatchupByID 返回视图，将对象Matchup作为视图模型。

请参阅以下链接以返回视图并将视图模型传递给它： https://docs.microsoft.com/en-us/aspnet/mvc/overview/older-versions-1/getting-started-with-mvc/getting-started-with-mvc-part3#passing-a-viewmodel

Answer 2

我对这个问题的解决方案是使用通过查询字符串传递值：

$('#matchupTable tr').click(function () {
            var gameID = '/detailsPage.aspx?gameID=' + $(this).attr('id');
            window.location.href = gameID;
 });

然后在detailsPage的Page_Load上，我移动了GetMatchupByID（）的代码，并使用以下参数将其传递给了该参数：

 string GameID = Request.QueryString["gameID"];

 SqlConnection con = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["TrinoviContext"].ConnectionString);

  con.Open();
  SqlCommand cmd = new SqlCommand("usp_GetMatchupDetails", con);
  cmd.CommandType = CommandType.StoredProcedure;
  cmd.Parameters.AddWithValue("@GameID", GameID);
  SqlDataReader reader = cmd.ExecuteReader();
  while (reader.Read())
      {
          // populate properties I need for display on page
      }
  con.Close();

另一页上的AJAX调用方法

2 个答案: