asp-route onclick help

Question

Hello all!

I would like to do an onclick event to open a popup. I am posting the original code to maybe get some help.

@if (Model.Count > 0)  
{  
    foreach (var item in Model)  
    {  
        <div class="col-xl-3 col-md-6 d-flex align-items-stretch" data-aos="zoom-in" data-aos-delay="100">  
            <div class="icon-box bg-transparent">  
                <div class="icon"></div>  
                <h4 class="text-center">  
                    @item.Name  
                </h4>  
                <a asp-route="PackDetails" asp-route-packSlug="@item.Slug">  
                    <img src="@item.ImagePath" class="d-block w-100" alt="..." />  
                </a>  
                <span class="float-end">$@item.Price</span>  

                --onclick function--  
                <script>  
                   function OpenCard() {  
                      $.ajax({  
                         type: 'GET',  
                         url: '@Url.Action("PackDetails", "Store", new { packSlug = item.Slug })',  
                         contentType: 'json',  
                      });  
                   }  
                </script>  
            </div>  
        </div>  
    }  
}  

As you can see from the code above, I would like for the <a asp-route to become <a onclick="OpenCard()"> but I'm not quite sure how to pass the asp-route-packSlug portion of the code to the onclick event. I have 4 packs in the Model.Count. It keeps opening the last one, even if I click on the 1st pack.

Any info would be greatly appreciated. Thank you!

Answer 1

Hi @Nick R ,

Have you ever solved the problem? If not, you can continue.

According to Bruce-SqlWork's suggestion, I create a sample with the following code, everything works well. You can refer to it.

The output as below:

Besides, when using the asp-route-{value} attribute with the Anchor Tag, the route value will append to the request url, we can find them from the href attribute. Since in your code, you didn't add the href attribute, if you using F12 developer tools to check the <a> tag, you can't find the related attributes and value. More detail information, see Anchor Tag Helper attributes.

So, to add additional data to the <a> tag, you can use custom attribute, like data-{value}. Then, in the hyperlink click event, find the custom attribute and append the value at the end of the request url:

Then, the output as below: view the source code from here: 222976-sourcecode.txt

Finally, in the Ajax success function, you can show the popup modal.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Dillion

Answer 2

you should learn javascript. you want to pass the desired asp-route-packSlug value:

function OpenCard(slug) {   
         $.ajax({   
             type: 'GET',   
             url: '@Url.Action("PackDetails", "Store")',   
             data: { packSlug: slug },  
             contentType: 'json',   
             success: function(result) {   
                 $('#modal-open-content').html(result);   
                 $('#modal-open').modal('show');   
             },   
             error: function(e) {   
                 alert(e);   
             }   
         });   
     }   

Answer 3

while you can hack an <a>, it needs an href to get focus and support click events. better to use a button:

<button type="button" style="border:none" onclick="OpenCard('@item.Slug')">  
   <img src="@item.ImagePath"/>  
</button>