使用 Javascript 函数防止 MVC 表单提交

Question

我的项目中有一个upload.ascx。它将在 Jquery Popup 中加载。

upload.ascx 包含 File Upload 控件。文件上传控件将上传.xlsx and .xls 文件。我添加了Java script 函数来执行此验证（以防止上传不必要的文件）。

Onchange of FileUpload 控制和Onclick of Submit button 将调用相同的验证函数。

文件上传验证功能对这两个调用都有效。如果用户单击提交按钮，则会调用相同的函数并正常工作。

我的问题是：在我的验证函数中我写了return false。显示警报消息后，页面被重定向到某个 URL (localhost/Admin/Authorization/AcceptFile.aspx)。 AcceptFile 是我的 ActionResult 名称。它不应该发生。函数返回 False。但是表单被重定向到上面的 URL 为什么。？

我在我的操作结果中保留了调试器，如果它的文件错误（它是正确的），它不会被调用。如果它的文件正确，索引文件将加载成功消息（操作结果被调用并且工作正常）。 .

我怀疑 MVC 表单。如果上传了错误的文件，则在没有调用 Action Result 的情况下发生重定向，这应该停止。

<% using (Html.BeginForm("AcceptFile", "Authorization", FormMethod.Post, new { enctype = "multipart/form-data" }))
       {%>

我的 Javascript 函数：

function checkfile(sender) {
        var validExts = new Array(".xlsx", ".xls");
        var fileExt = sender.value;
        var strValue = false;
        fileExt = fileExt.substring(fileExt.lastIndexOf('.'));
        if (validExts.indexOf(fileExt) < 0) {
            ShowMessage(-1, "Invalid file selected, valid files are .xlsx and .xls types.");
            strValue = false;
        }
        else {
            strValue = true;
        }
        return strValue;
    }

我的 upload.ascx 代码：

<div>
    <% using (Html.BeginForm("AcceptFile", "Authorization", FormMethod.Post, new { enctype = "multipart/form-data" }))
       {%>

          <input type="file" id="fileAuthorization" name="fileAuthorization" onchange="checkfile(this);" />

          <input type="submit" id="btnSave" name="btnSave" value="Upload" onclick="javascript:return checkfile(document.getElementById('fileAuthorization'))" />

    <%} %>
</div>

Answer 1

我自己发现了问题。

是的，我的怀疑是正确的。问题是

onsubmit = "javascript:return checkfile(document.getElementById('fileAuthorization'))"

这应该在表单标签本身中这样调用：

 <% using (Html.BeginForm("AcceptFile", "Authorization", FormMethod.Post, new { enctype = "multipart/form-data", onsubmit = "javascript:return checkfile(document.getElementById('fileAuthorization'))" }))
       {%>

但之前它被称为提交按钮 Onclick

<input type="submit" id="btnSave" name="btnSave" value="Upload" onclick="javascript:return checkfile(document.getElementById('fileAuthorization'))" />

我已更正并开始工作（验证和文件上传提交按钮 Onclick 和文件上传控件 onchange）。

但我的问题是为什么return false 在提交按钮点击时不起作用？但它适用于 Fileupload onchange 事件。

为什么会发生重定向。？在将同一行更改为 MVC 表单后，它开始工作（现在没有发生重定向）为什么。？

Answer 2

将您的提交更改为：

<button type="button" id="btnSave" name="btnSave" onclick="checkfile(document.getElementById('fileAuthorization'))" ></button>

而且它不会自动提交表单

当您准备好提交表单时，您可以在回调函数中使用 javascript：

document.getElementById('form-id').submit();