c# - 单击时禁用 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>

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

如何在点击时禁用按钮？

我已经创建了 SaveChangesAsync():

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

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

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>