如何在点击事件后将某个元素的id传输到后端？

Question

我正在某个页面上写下我的项目，该项目负责列出电影，单击它们后，它会将您链接到一个页面，您可以在其中查看有关您单击的特定电影的所有信息，现在我是在我的数据库上使用 SQL，我的想法之一是在我已经根据您单击的电影将正确的 id 分配给正在单击的超链接后传输按下的元素的 id。我的问题就是我如何获取正在单击的内容的 id，将其传输到后端，以便我能够根据相同的 id 从数据库中提取正确的信息。 这是我到目前为止的代码：

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

namespace WebProject
{
    public partial class movie : System.Web.UI.Page
    {
        public string movieLister = "";
        protected void Page_Load(object sender, EventArgs e)
        {
            string fName = "contentDB.mdf";
            string tableName = "moviesTbl";
            string sqlSelect = $"select * from {tableName}";
            DataTable table = Helper.ExecuteDataTable(fName, sqlSelect);
            int length = table.Rows.Count;
            for(int i = 0; i < length; i++)
            {
                movieLister += $"<a href='moviePage.aspx' id='{table.Rows[i]["MOVIEID"]}'><div class='movie-container' ><img src='{table.Rows[i]["movieImageFile"]}'/><div><img src='favourites.png' /> {table.Rows[i]["rating"]}</div><p>{table.Rows[i]["movieName"]}</p></div></a>";
            }
            
        }
    }
}

这段代码本质上是一个电影列表，并分配与电影描述相关的正确ID并将其发送回页面，唯一的事情是我需要知道该怎么做才能获取哪部电影的ID已单击，以便我能够将正确的信息从数据库传输到页面。

我尝试过使用多种资源，但似乎没有一个有帮助。

Answer 1

由于您没有发布该页面，我假设您只是像这样吐出 movieLister 字符串 {%= movieLister %} 这应该生成 a 标签的格式与您在 for 循环中使用的格式相同，如下所示：

<a href='moviePage.aspx' id='{table.Rows[i]["MOVIEID"]}'>
  <div class='movie-container' >
    <img src='{table.Rows[i]["movieImageFile"]}'/>
  <div>
  <img src='favourites.png' /> {table.Rows[i]["rating"]}
</div>
<p>{table.Rows[i]["movieName"]}</p>
</div>
</a>

对于您想要的内容，此 HTML 有 2 个问题

1. 有两个没有开头的结束 div 标签。这可能是一个拼写错误，但会导致浏览器的渲染引擎变得非常混乱（也可能导致 StackOverflow 语法荧光笔）
2. 虽然每个链接都有指向电影 ID 的 id 属性，但该信息不是您单击链接时将加载的 URL 的一部分，因为它不在 href 中 属性

为了解决这两个问题，我将更新输出的 html，使其看起来像这样：

<a href='moviePage.aspx?id={table.Rows[i]["MOVIEID"]}'> <!-- Update this href to use the id as a query parameter -->
  <div class='movie-container' >
    <img src='{table.Rows[i]["movieImageFile"]}'/>
  <div>
  <img src='favourites.png' /> {table.Rows[i]["rating"]}
<div> <!-- update this tag -->
<p>{table.Rows[i]["movieName"]}</p>
</div>
</a>

然后您应该能够像这样更新页面处理程序（请注意，我使用的是 MacBook，无法验证此 ASPX 代码，因为 .NET Core/5+ 仅使用 Razor Pages）：

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

namespace WebProject
{
    public partial class movie : System.Web.UI.Page
    {
        public string movieLister = "";
        protected void Page_Load(object sender, EventArgs e)
        {
            string id = Request["id"];
            string fName = "contentDB.mdf";
            string tableName = "moviesTbl";

            string sqlSelect = $"select * from {tableName}";
            if (id.Length() > 0)
            {
                sqlSelect += $" where id = {id}"
            }

            DataTable table = Helper.ExecuteDataTable(fName, sqlSelect);
            int length = table.Rows.Count;
            for(int i = 0; i < length; i++)
            {
                movieLister += $"<a href='moviePage.aspx?id={table.Rows[i]["MOVIEID"]}'><div class='movie-container' ><img src='{table.Rows[i]["movieImageFile"]}'/><div><img src='favourites.png' /> {table.Rows[i]["rating"]}<div><p>{table.Rows[i]["movieName"]}</p></div></a>";
            }
            
        }
    }
}

重要安全说明

上面的代码只是演示如何获取ID。在生产中，我强烈建议您将其转换为 int 或将其参数化以避免非常简单的 SQL 注入攻击。

我还强烈建议您迁移到 .NET Core/5+ 和 Razor 页面，因为它们使在此处和 Google 上提出此类问题变得更加容易，因为它们是独立的，并且更容易发布完整源代码。如果您想了解 Razor 页面，YouTube 上的 Tim Corey 提供了各个级别的精彩视频