How to transfer the id of a certain element to the backend after a click event?

Question

I am writing my project on some page which is responsible for listing movies and after clicking on them it will link you to a page where you can see all about the specific movie you clicked Info, now that I am using SQL on my database, one of my ideas is to transfer the id of the pressed element after I have assigned the correct id to the hyperlink being clicked based on the movie you clicked. My question is how do I get the id of the content being clicked, transfer it to the backend so that I can pull the correct information from the database based on the same id. This is my code so far:

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>";
            }
            
        }
    }
}

This code essentially takes a list of movies and assigns the correct ID related to the movie description and sends it back to the page, the only thing I need to know is what to do to get the ID of which movie was clicked, So that I can transfer the correct information from the database to the page.

I've tried using multiple resources but none seem to help.

Answer 1

Since you didn't publish the page, I'm assuming you just spit out the movieLister string like this {%= movieLister %} This should generate the format for the a tag The same format you use in a for loop, like this:

<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>

There are 2 issues with this HTML for what you want

1. There are two closing div tags without a beginning. This may be a typo, but will cause the browser's rendering engine to get very confused (and may also cause StackOverflow syntax highlighter)
2. Although each link has an id attribute that points to the movie ID, that information is not part of the URL that will be loaded when you click the link because it is not in the href attribute

To solve both problems, I will update the output html so that it looks like this:

<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>

You should then be able to update the page handler like this (note that I'm using a MacBook and can't verify this ASPX code because .NET Core/5 only uses 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>";
            }
            
        }
    }
}

Important Safety Instructions

The above code just demonstrates how to get the ID. In production, I strongly recommend that you convert it to int or parameterize it to avoid very simple SQL injection attacks.

I also strongly recommend migrating to .NET Core/5 and Razor pages as they make it easier to ask questions like this here and on Google since they are self-contained and easier to post full source code . If you want to learn about the Razor page, Tim Corey on YouTube has great videos for every level