ASP.NET Core disable button on click

Question

I have a forum, on which I accept parameters from a user, and start a procedure on my DB with these parameters.

I'm a bit stuck, what I need to do:

• Disable the button once it clicked, until the SP is finished, and then enable it again.

My forum :

   <form asp-action="RunProcedure" asp-controller="Home">
        <div asp-validation-summary="ModelOnly"></div>
        <div class="form-group">
            <label asp-for="ShiaruchDate">Shiaruch Date</label>
            <input asp-for="ShiaruchDate" placeholder="YYYY-MM-DD 00:00:00" class="form-control" />
            <span asp-validation-for="ShiaruchDate" class="text-muted"></span>
        </div>

        <div class="form-group">
            <p>Please enter dates in format of : YYYY-MM-DD 00:00:00</p>
            <input type="submit" />
        </div>

My controller :

[HttpPost]
public async Task<IActionResult> RunProcedure(string startDate, string endDate, string shiaruchDate)
{
    if (ModelState.IsValid)
    {
        using (var cmd = _context.Database.GetDbConnection().CreateCommand())
        {
            cmd.CommandText = "RunSSISPackage";
            cmd.CommandType = CommandType.StoredProcedure;
            // set some parameters of the stored procedure
            cmd.Parameters.Add(new SqlParameter("@param3", SqlDbType.NVarChar)
            {
                Value = shiaruchDate
            });
            if (cmd.Connection.State != ConnectionState.Open)
                cmd.Connection.Open();
            cmd.ExecuteNonQuery();
        }
    }
    if (await _ISSISRepository.SaveChangesAsync())
    {

    }
    ModelState.Clear();
    return View();
}

How do I disable the button on click?

I've created SaveChangesAsync():

    public async Task<bool> SaveChangesAsync()
    {
        return (await _context.SaveChangesAsync()) > 0;
    }

To check if the procedure is finished - am I correct about this? If yes, how do I enable the button again inside this condition on the controller?

Answer 1

The problem is the fact that the code on the server is not executed on the background, but based on the request the user sends.

When the user clicks the button, a new POST request is created and the data is sent to the server. While this is happening, the user still sees the original page, so she can click the button again and again (effectvely sending another request, which you are trying to avoid).

Unfortunately, because the code on the server is separate from the client, you cannot disable the button from the C# code, but you need to disable it on the client side using JavaScript to prevent double submission.

You can do something like this:

<form asp-action="RunProcedure" asp-controller="Home" 
      onsubmit="theButton.disabled = true; return true;">
      ... rest of the form
      <input type="submit" name="theButton" value="Submit">
</form>