Disable button .Net Core MVC view

Question

I have button in my view.cshtml file:

<td>
    @if(@ViewBag.loading == false){
        @Html.ActionLink(
            "Run Test",
            "RunSingleTest",
            new { testName=@item.Test_type, id=@item.Id},
            new { @class = "btn btn-info" })
    }
</td>

Which triggers method in HomeController.cs:

public IActionResult RunSingleTest(string testName, int id)
{
    _service.RunSingleTest(testName, id);
    var items = _service.GetDetailsById<List>(id);
    return View("TestDetails", items);
}

I want to disable this button when user clicks on that button. Should I do it with JQuery/Javascript? How do you pass that button id to script and where to put that id?

that is an anchor and anchors don't have disable property. You could either `href="javascript:void(0)` or `return false` via jQuery. — Manoz, Aug 01 '18 at 10:21

Manoz · Answer 1 · 2018-08-01T10:30:45.037

You can do it with plain HTML element. Also I don't see any benefit of disabling button on click since you want to let users know that this button should not perform more. Better put it disabled when it renders.

@if(ViewBag.loading == false){
  <a href="javascript:void(0)" class="btn btn-info btn-disabled" id="@item.Id" testName="@item.Test_type">Run Test</a>
}

or if you would like disable it literally then go with jQuery with giving an element a specific class -

<a href="/RunSingleTest" class="btn btn-info myBtn" ...> Run Test </a>

$('.myBtn').on('click',function(e){
  $(this).addClass('btn-disabled');
  e.PreventDefault() //preventing to navigate
});

score 0 · Answer 2 · answered Aug 01 '18 at 10:26

According to the question here you can not just set the disabled property on the actionlink. Instead here shows that you can do it with jQuery Javascript

@Html.ActionLink("Run Test", "RunSingleTest, 
       new { testName=@item.Test_type, id=@item.Id}, 
       new { class = "btn btn-info linkdisabled" })

CSS

.linkdisabled{
   cursor:text;
}

JQuery

$function(){
    $(".linkdisabled").click(function(){
        return false;
    }
}

Disable button .Net Core MVC view

2 Answers2