Need help adding jQuery: After click hyperlink do the redirect ( asp-controller & asp-action ), then hyperlink is disable to prevent click twice

Question

Hi,

My ASP.NET Core Hyperlink with CSS as following,

Razor code as following,

  <a id ="IncidentSolve" asp-action="OpenIncidentFromIncidentListJobDoneExpress" asp-controller="Incident"  
           asp-route-Id="@Model.EncryptedId" asp-route-IncidentNo="@Model.EncryptedIncidentNo" class="btn btn-primary">Incident Solve</a>  

It produce in html as following,

<a id ="IncidentSolve" class="btn btn-primary" href="/Incident/OpenIncidentFromIncidentListJobDoneExpress/CfDJ8Hq-WaqbvO1LgvkM3H_V86G0XbIJJOOR_HajyamoiwYAX2GyRh3bPAVpgG5lKuM4TzOhHAvwV0OxUbWymiSIgDEGnYtTSZCwiPFXjePmRsK_zpHQARJ6q-k6DZVRRYlDzg?IncidentNo=CfDJ8Hq-WaqbvO1LgvkM3H_V86F2ELKl8lXo_UHE61albtW4ArNfMBkAAIpTAje7k6YHImxrs2RHuEBneAQGtmdOkiW3pz4GzS1q3ZPskRJMW4jyTB4m5XwJ10nIjO1paxdeZ9xO6LGqZS2bUveSMDq88rE">Incident Solve</a>  

I want do this,

" After click hyperlink, then hyperlink do the redirect ( asp-controller & asp-action ). Then, how hyperlink is disable to prevent click twice ? "

So far, I've this,

 <a id ="IncidentSolve" asp-action="OpenIncidentFromIncidentListJobDoneExpress" asp-controller="Incident"  
           asp-route-Id="@Model.EncryptedId" asp-route-IncidentNo="@Model.EncryptedIncidentNo" class="btn btn-primary">Incident Solve</a>  
  
  
<script>  
    $('#IncidentSolve').click(function () {  
  
       //  ???  
  
    });  
</script>      

Answer 1

Hi @Jerry Lipan ,

Generally, to prevent duplicate click the hyperlink, we could define a global bool variable and set the default value to false, after the first click we can change its value to true, then, when click the hyperlink again, we can check the bool value to prevent duplicate click the hyperlink.

Code like this:

161117-code.txt

The result like this: Note: here I disabled the hyperlink default navigation event, so it will not redirect to another page.

If we remove the event.preventDefault() and change the request URL when fist time click the hyperlink. The result like this:

But, I also found that if we remove the hyperlink's click event, we could also get the above result, after click the hyperlink (not matter one time or duplicate times), it will redirect to another page. You can check it.

---

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

Hi @Anonymous ,

Your guidance is masterpiece. Thanks