After click hyperlink ( asp-controller & asp-action ), then others hyperlink is disable to prevent another

Jerry Lipan 916

Hi,

My ASP.NET Core Hyperlink with CSS as following,

I want to do this,

" After click any hyperlink ( asp-controller & asp-action ), then others hyperlink is disable. How to do that ? "

Zhi Lv - MSFT 32,016 Reputation points Microsoft Vendor

2022-01-18T01:20:43.687+00:00

Hi @Jerry Lipan ,

After clicking the hyperlink, it will not redirect to another page, right?

It is better to share the relates html elements and CSS style code, so that we can based on your code to give a solution. Otherwise, we might give a general solution.

Best regards,
Dillion

Accepted answer

Zhi Lv - MSFT 32,016 Microsoft Vendor

Hi @Jerry Lipan ,

You can refer to the following sample to disable the hyperlink, it uses Bootstrap style and JQuery (the Bootstrap and JQuery reference have been added in the _Layout page):

<div>   
    <a href="#" class="btn btn-info" role="button">Yes, I'M RESPONSE TO THIS INCIDENT</a>  
    <a href="#" class="btn btn-info" role="button">INCIDENT SOLVE</a>  
</div>

JQuery code:

<script>  
    $(function(){  
       $(".btn").click(function(){  
          event.preventDefault();   //prevent the hyperlink defaule navigation event.  

          //find another button exclude current click one, and then disable them  
          $(".btn").not(this).each(function(index, item){   
              $(item).addClass("disabled"); //add the disabled class and disable the button.  
                
              //Once the hyperlink is disabled change the css style.  
              $(item).removeClass("btn-info");  
              $(item).addClass("btn-secondary");  
          });  
       });  
    })  
</script>

The result as below:

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

3 additional answers

Jerry Lipan 916 Reputation points

2022-01-18T03:14:08.41+00:00
Hi @Zhi Lv - MSFT

Your explanation was great. Let's say this

produces html as following,

<a class="btn btn-info" role="button" href="/Incident/OpenIncidentFromIncidentListResponse/CfDJ8Hq-WaqbvO1LgvkM3H_V86HapN6hTNDlgi-2Z8ffa5bgqAgURJUWY3aM76R0hcDY1CmTypAU6WNPkl3mg8xBWbxLGbetw1huDzwr4PHyPsZjI6dkIT1Jv5bn5mdED12aTw?IncidentNo=CfDJ8Hq-WaqbvO1LgvkM3H_V86EWRhkKbUtHxTIKzC-K0LmFwf-fOqVqe5PTZdiWo0XMRNjrF_2fq0dD2AUODqRvADAPSU4AB68MRcMW6qFKPC7qOXNCTch-4R3TRq77CvThT3RRrkdhA3UqbWSH32BmTFs">Yes, I'm response to this incident</a> <a class="btn btn-info" role="button" href="/Incident/OpenIncidentFromIncidentListJobDoneExpress/CfDJ8Hq-WaqbvO1LgvkM3H_V86HapN6hTNDlgi-2Z8ffa5bgqAgURJUWY3aM76R0hcDY1CmTypAU6WNPkl3mg8xBWbxLGbetw1huDzwr4PHyPsZjI6dkIT1Jv5bn5mdED12aTw?IncidentNo=CfDJ8Hq-WaqbvO1LgvkM3H_V86EWRhkKbUtHxTIKzC-K0LmFwf-fOqVqe5PTZdiWo0XMRNjrF_2fq0dD2AUODqRvADAPSU4AB68MRcMW6qFKPC7qOXNCTch-4R3TRq77CvThT3RRrkdhA3UqbWSH32BmTFs">Incident Solve</a>

How to insert redirect url and parameter into jQuery ?
Please sign in to rate this answer.
Zhi Lv - MSFT 32,016 Reputation points Microsoft Vendor

2022-01-18T05:59:46.653+00:00

Hi @Jerry Lipan ,

In my sample code, we can see that, I use the event.PreventDefault(); to prevent the default navigation event. So it will not redirect to another page. If you want to do something, you can use JQuery to get the href attribute (like this: var href = $(this).attr("href");) and use the JQuery Ajax to do that. So that on the current page, we can disable the another button.

Do you mean after clicking the hyperlink, it will redirect to another page? If that is the case, there is no need to disable the another hyperlink, because the page was changed. And if you mean you will redirect back to the current page, you could store the selected items using cookie, then when the page redirects back, you can check the cookie data and disable the hyperlink.

Best regards,
Dillion
Sign in to comment
Jerry Lipan 916 Reputation points

2022-01-18T09:21:47.497+00:00
Hi @Zhi Lv - MSFT ,

So far, I've this,

var href = $(this).attr("href"); window.location.href = href;

How to differentiate between href? We have 2 Link ( Yes, I'm response to this incident & Incident Resolve )

Please help
Please sign in to rate this answer.
Zhi Lv - MSFT 32,016 Reputation points Microsoft Vendor

2022-01-18T09:39:59.72+00:00

Hi @Jerry Lipan ,

var href = $(this).attr("href"); window.location.href = href;

By using the above code, it will refresh the page based on the hyperlink href attribute. If you don't want to redirect to another page, you should use JQuery ajax to do the action. Then, you can disable current page's hyperlink.

As I said in the previous comment, if you want to redirect to another page, there is no need to disable the button in current page, because the page have refreshed. Unless you save the status and when the page re-load, you can get the status and disable the button. Do you mean after click the hyperlink you will back to current page? Form the code, it seems that the hyperlink with different href attribute value. So it will redirect to different page. Do you mean after that, it will redirect back to the Main page (with the two hyperlinks: Yes, I'M RESPONSE TO THIS INCIDENT and INCIDENT SOLVE)?

Best regards,
Dillion

Jerry Lipan 916 Reputation points

2022-01-18T10:04:48.657+00:00

Hi @Zhi Lv - MSFT

Yes. 2 different href attribute value. After click, it will go to different page

Zhi Lv - MSFT 32,016 Reputation points Microsoft Vendor

2022-01-18T10:07:55.693+00:00

Hi @Jerry Lipan ,

Yes. 2 different href attribute value. After click, it will go to different page

In this scenario, there is no need to disable the hyperlink, because it has already redirect to another page.

Best regards,
Dillion

Jerry Lipan 916 Reputation points

2022-01-18T10:11:49.277+00:00

Hi @Zhi Lv - MSFT ,

Owh. So, no need to prevent twice click? I tried to show the modal box with spinner. It failed

Zhi Lv - MSFT 32,016 Reputation points Microsoft Vendor

2022-01-19T07:19:59.573+00:00

Hi @Jerry Lipan ,

So, no need to prevent twice click?

Yes, no need to prevent twice click the hyperlink, because once you click the hyperlink, it will directly redirect to another page.

I tried to show the modal box with spinner. It failed

What do you mean about it failed, is there any error, or do you mean after click the hyperlinks (Yes, I'M RESPONSE TO THIS INCIDENT and INCIDENT SOLVE), the modal box not appear?

If there has some error, this might be a new problem, it is better to create a new thread and tell us the detail information (the relates code and the error message).

If you mean after clicking the hyperlinks (Yes, I'M RESPONSE TO THIS INCIDENT and INCIDENT SOLVE), the modal box doesn't appear, it is the normal phenomenon, because it will redirect to another page, so the modal box acutely appears, but since the page will redirect to another page, it will auto close the modal box. So you can't see it. If you want to see it, try to prevent the page redirect behavior.

Best regards,
Dillion
Sign in to comment
Jerry Lipan 916 Reputation points

2022-01-19T07:47:55.257+00:00

Hi @Zhi Lv - MSFT

Your answer is great
Please sign in to rate this answer.

0 comments No comments
Sign in to comment