How to make a list item clickable in asp.net - asp.net-mvc

Question

I am dynamically building a list based on data that is coming from my database
I am trying to make every list item clickable such that when one list item is clicked I can redirect to my controller "requistion" and enter the action in that controller "Details"
The list builds and displays successfully the only issue is that the list item itself is not clickable so I am not able to redirect to my controller and proceed with the rest of the logic
here is my code below)Please not that the code below is inside the _Layout.cshtml page
<div id="notifications">
<h3 class="notify"><b>Notifications</b></h3>
<div style="height:300px;">
<ul id="notiContent">
#if (ViewData["MessageList"] != null)
{
var viewDataProd = ViewData["MessageList"] as List<Notification>;
#for (var i = 0; i < viewDataProd.Count; i++)
{
#*<li class="notiContentLi"> <a asp-controller="Requisition" asp-action="Details" asp-route-id="#viewDataProd[i].RequisitionId"></a> #viewDataProd[i].Action</li>*#
#*<li class="notiContentLi"> <a asp-controller="Requisition" asp-action="Details" asp-route-id="#viewDataProd[i].RequisitionId"></a> #viewDataProd[i].Action</li>*#
<li class="notiContentLi"><a href='#Url.ActionLink("Details","Requisition",new{#viewDataProd[i].RequisitionId})'>click me </a>#viewDataProd[i].Action</li>
}
}
#if (GlobalVariables.messageList != null)
{
var viewDataProd = GlobalVariables.messageList as List<Notification>;
#for (var i = 0; i < viewDataProd.Count; i++)
{
#*<li class="notiContentLi">#c.Action<br /> </li>*#
#*<li class="notiContentLi" asp action>#viewDataProd[i].Action</li>*#
<li class="notiContentLi"><a href='#Url.ActionLink("Details","Requisition",new{#viewDataProd[i].RequisitionId})'> click me </a>#viewDataProd[i].Action</li>
}
}
</ul>
</div>
<div class="seeAll">See All</div>
</div>

Answer 1

You can add the onclick event to the <li> tag:
#for (var i = 0; i < viewDataProd.Count; i++)
{
<li class="notiContentLi" onclick="location.href = '#(Url.Action("Details", "Requistion", new { id = viewDataProd[i].RequisitionId }))'" >#viewDataProd[i].Action</li>
}
And the Details action method declaration in the Requistion controller is:
public ActionResult Details(int id)
{
// Add your action code here...
}

Answer 2

Adding route values and html attributes does the trick
var viewDataProd = GlobalVariables.messageList as List<Notification>;
#for (var i = 0; i < viewDataProd.Count; i++)
{
<li class="notiContentLi">#Html.ActionLink(#viewDataProd[i].Action, "Details", "Requisition", routeValues: new { #viewDataProd[i].RequisitionId }, htmlAttributes: new { target = "_blank" })</li>
}

Answer 3

Index.cshtml
...
<div class="card-columns">
#foreach (var yourElement in Model.YourElements)
{
<div class="card">
<div class="card-body"
onclick="location.href =
'/AnotherElementsPage/ByID/?ID=#yourElement.AnotherElement.ID'" >
<h6 class="card-title">#yourElement.Name</h6>
<h7 class="card-text">#yourElement.Description</h7>
</div>
</div>
}
</div>
AnotherElementsPage.cshtml
#page "{handler?}"
AnotherElementsPage.cshtml.cs
public AnotherElementsService AnotherElementsService;
[BindProperty(SupportsGet = true)]
public IEnumerable<AnotherElement> AnotherElements { get; private set; }
public void OnGet()
{
AnotherElements = AnotherElementsService.GetAnotherElements().ToList();
}
public void OnGetByID(Guid ID)
{
AnotherElements = AnotherElementsService.GetAnotherElement(ID).ToList();
}