单击时 ASP.NET Core 禁用按钮

Question

我有一个论坛，我在该论坛上接受用户的参数，并使用这些参数在我的数据库上启动一个过程。

我有点卡住了，我需要做什么：

• 在单击按钮后禁用该按钮，直到 SP 完成，然后再次启用它。

我的论坛：

   <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>

我的控制器：

[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();
}

如何禁用点击按钮？

我创建了SaveChangesAsync()：

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

检查程序是否完成 - 我对此是否正确？如果是，如何在控制器上的这种情况下再次启用按钮？

Answer 1

问题是服务器上的代码不是在后台执行，而是基于用户发送的请求。

当用户单击按钮时，会创建一个新的 POST 请求并将数据发送到服务器。发生这种情况时，用户仍会看到原始页面，因此她可以一次又一次地单击该按钮（有效地发送另一个请求，这是您试图避免的）。

不幸的是，因为服务器上的代码与客户端是分开的，所以你不能从 C# 代码中禁用按钮，但你需要在客户端禁用它使用 JavaScript 以防止重复提交。

你可以这样做：

<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>