如何在點擊事件後將某個元素的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 提供了各個級別的精彩影片