Techniques for transferring the CSS value of a dynamically generated hyperlink to a different page

As a newcomer to web development, I find myself facing a challenge in passing dynamic values to another page when a hyperlink is clicked. All I need is to retrieve the value of the clicked hyperlink on the subsequent page. Can anyone provide guidance on how to achieve this?

On the first page:

@for (int j = 0; j < listOfUrls.Count; j++)
{
    <a style="background: #fff url(@listOfUrls[j]) no-repeat center;"
       href="nextPage" 
       onclick="@*Pass clicked listOfUrls[j]*@" ></a>
}

On the next page:

<p>@*I want to retrieve the value of the clicked hyperlink from the previous page here*@</p>

Answer №1

A controller was developed to showcase a simple demo.

Demo Controller

Using this Controller, a collection is being sent to the View.

public class DemoController : Controller
{
    // GET: Demo
    public ActionResult Index()
    {
        List<DemoModel> list = new List<DemoModel>()
        {
            new DemoModel {Id = "1", Link = "One"},
            new DemoModel {Id = "2", Link = "Two"},
            new DemoModel {Id = "3", Link = "Three"},
            new DemoModel {Id = "4", Link = "Four"}
        };

        return View(list);
    }
}

The values passed to the next page include IDs and their corresponding links.

@model  List<WebApplication9.Models.DemoModel>
@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-heading">Panel Heading</div>
            <div class="panel-body">

                @for (int i = 0; i < Model.Count; i++)
               {
                    <a href="@Url.Action("Index", "Demo2", new {@id = Model[i].Link})">
                        #Link to Page @Model[i].Link
                    </a>

                    <br />
                }
            </div>
        </div>
    </div>
</body>
</html>

View rendering in progress

https://i.sstatic.net/S2gyZ.png

Data is transferred to Demo2Controller where the Index Action Method accepts ID as an input.

public class Demo2Controller : Controller
{
    // GET: Demo2
    public ActionResult Index(string id)
    {
        if (!string.IsNullOrEmpty(id))
        {
            TempData["message"] = id;
        }
        else
        {
            TempData["message"] = "Not Clicked";
        }

        return View();
    }
}

Index View (Demo2)

    @{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
</head>
<body>
    <div class="alert alert-success">
        <strong>Success!</strong> @TempData["message"]
    </div>
</body>
</html>

https://i.sstatic.net/YFOQZ.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Steps to align div directly to the left of the button that was clicked

I have a div in my code that is hidden by default. I want to show this div exactly left whenever the user clicks on the show button. Since there are multiple show buttons on my page, I would like to display the div as described above. <div id="me ...

Make a reference to a specific element within an Angular component and access

There are two images to choose from, and based on your selection using ng-click, the class changes. When moving on to the next step, a new object is created to store references to the selected image: $scope.cabinetDetails.cabinetType = { name: $scope. ...

SQL Server 2012 ASP.NET connection string configuration

I am struggling with setting up a connection string between an ASP application hosted on IIS and an existing SQL Server 2012 instance. The current working connection string is as follows: Data Source=SERVER1;Initial Catalog=CORE;User ID=testuser;Passwo ...

Utilizing nested observables for advanced data handling

Consider the following method: public login(data:any): Observable<any> { this.http.get('https://api.myapp.com/csrf-cookie').subscribe(() => { return this.http.post('https://api.myapp.com/login', data); }); } I want to ...

A guide to implementing child level filtering of JSON data with Lodash

Here is a JSON dataset I am working with: [ { "campaignId": 111, "campaignCategory": "Diabetes", "result": [ { "campaignType": 1, "name": "tes1" }, { "campaignType": 1, "name": "test22" ...

How can I maintain consistent spacing between two areas in CSS3 across all screen sizes?

My question pertains to the alignment of an advertisement (on the left as a banner) and content sections on my website. I have noticed that as the screen size increases, the distance between these two areas also increases. How can I ensure that the distanc ...

Pass the array data stored in React state over to Node/Express

I have been exploring ways to transfer an array from my react front end to my node/express back end. Initially, I attempted the following method. In React: saveUpdates = (clickEvent) => { var list = []; var length = this.props.title.length; ...

Making sure that res.download() is called only after a specific function has finished executing

In my current project, I am utilizing Express.js and HTML to handle the process of retrieving, processing, and then downloading data to a file upon clicking the submit button in an HTML form. The issue I am facing is that the res.download() function withi ...

Is there a way to interact with specific locations on an image by clicking in JavaScript?

https://i.stack.imgur.com/gTiMi.png This image shows a keypad with coordinates for each number. I am able to identify the coordinates, but I am struggling to click on a specific coordinate within the image using JavaScript. Can someone assist me in achiev ...

Displaying content on a click event in AngularJS

I am facing an issue with the ng-show directive not working as expected when a user clicks on an icon. The desired behavior is that the parent div should initially display content, but when the play icon is clicked, the contents of the div should become ...

Create a custom input field with a dot masking feature

My challenge involves a specific input field setup: <input type="text" placeholder="........."> I want the dots in the placeholder to be replaced with letters as the user enters text. For example, if the user types "Hi", the placeholder should upda ...

Is it possible for the box-shadow CSS property to include padding?

Can a red outline like this be created around a shape using the box-shadow property but at a certain distance? ...

How can I use lodash to locate and include an additional key within an array object?

I am looking to locate and insert an additional key in an object within an array using lodash. I want to avoid using a for loop and storing data temporarily. "book": [ { "name": "Hulk", "series": [ { "name": "mike", "id": " ...

Unraveling an image saved in .jpeg format from a

My JavaScript script is dealing with a string containing an encoded image.jpeg that was created using OpenCV in C++: cv::imencode(".jpeg", rgb_img, jpeg_data); std::string jpeg_string(jpeg_data.begin(), jpeg_data.end()); The next step involves p ...

Mongoose: utilize populate for fetching records; if not, return an array of records

Learning MeanJS and encountering Mongoose issues. Two models are in question: CategorySchema: - name: String, default:'', required: 'Please fill Category name', trim: true - slug: String, default:'', trim: true, unique: tr ...

Steps for implementing request validation in axios interceptors

In my React.js project, I am utilizing axios.interceptors and useContext to manage the loading spinner component when making requests. On request initiation, the context value - showLoading is set to true, and it switches to false upon completion or error ...

When trying to manually trigger the firing of the autocomplete function to get a place using Google API

My goal is to retrieve the data from autocomplete.getPlace() when triggering this event manually. Essentially, I have a function that captures the user's location in Lat/Lng format, and afterward, I aim to access other useful data using getPlace() su ...

What is the best way to position a container filled with items, such as products on an e-commerce site, next to a vertical navigation bar?

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>grid</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12 ...

Sorting nested table rows in vueJS is an essential feature to enhance

I am working with a json object list (carriers) that looks like this: https://i.stack.imgur.com/0FAKw.png Within my *.vue file, I am rendering this using the following code: <tr v-for="carrier in this.carriers"> <td>{{ carrier.id ...

Transpiler failed to load

My Angular application running on Node has recently encountered a problem with the transpiler. I have been trying to load mmmagic to evaluate uploaded files, but encountered difficulties in the process. While attempting to update NPM packages, I gave up on ...