Question

我有一个ASP.NET MVC应用程序，它执行下一步：

显示一个表格，其中包含一个表格，每行需要填写一些字段
通过服务器验证验证字段中的输入
提交按钮，当用户点击它时，在服务器中处理请求（长时间处理，> 5秒）

有了这样的场景，我已经实现了：

使用适当逻辑显示表单的Razor视图
控制器，用于接收“提交”按钮所解决的操作
具有在控制器和视图之间交换的属性的模型

我想满足下一个要求：

- 点击提交按钮时

禁用（直到成功或错误）
或显示模态进度条（直到成功或错误）

所有这些，以避免用户在服务器处理请求时再次单击提交按钮。

如果我通过Javascript禁用按钮，则永远不会调用控制器发布操作，因此通过Javascript禁用它不是解决方案

实施 PRG模式确实有帮助，因为按钮仍处于启用状态。

控制器：

    public ActionResult Index()
    {
        var viewModel = Initialize();
        return View(viewModel);
    }

    [HttpPost]
    public ActionResult HandleErrors(List<elements> entries)
    {
        var viewModel = new MyViewModel();

            entries.ForEach(entry =>
            {
                //Add validation errors to UI via ModelState when applies
                //validate CorrectionInfo
                if (string.IsNullOrEmpty(entry.Property1))
                {
                    ModelState.AddModelError("Property1" + entry.Key, "Correction info is required");
                }

                //more validations ......
            });

        if (ModelState.IsValid)
        {
            //save changes in DB
            if (DataBaseManager.SaveChanges(entries))
            {
                return RedirectToAction("Index", "MyController");
            }
            else // there were errors saving entries into the DB
            {
                viewmodel.Error = true;
                return View("Index", viewModel);
            }

        }
        else //ModelState is not valid
        {
            viewModel.ValidationErrors = true;
            return View("Index", viewModel);
        }

    }

查看：

using (Html.BeginForm("HandleErrors", "MyController", FormMethod.Post))
    {
        <table id="filesTable" class="table table-striped table-bordered">
            <thead>
            <tr>
                <td>Column 1</td>
                <td>Column 2</td>
                ...
                ...
            </tr>
            </thead>
            <tbody>
            @for (int i = 0; i < Model.Entries.Count; i++)
            {
                <tr>
                    <td>
                        @Model.Entries[i].Property1
                    </td>
                    <td>
                        @Model.Entries[i].Property2
                    </td>
                    ...
                    ...
                </tr>
            }
            </tbody>
            <tfoot>
            <tr>
                <td colspan="4">
                    <input type="submit" value="Submit" />
                </td>
            </tr>
            </tfoot>
        </table>

    }

谢谢！

禁用ASP.NET MVC上的“提交”按钮

0 个答案: