javascript 使用Javascript函数防止MVC表单提交
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16672336/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Prevent MVC form submit using Javascript Function
提问by RajeshKdev
I have a upload.ascxin my project. It will be loaded inside Jquery Popup.
upload.ascx我的项目中有一个。它将被加载到 Jquery Popup 中。
The upload.ascxcontains File Uploadcontrol. The File upload control will uploads .xlsx and .xlsfiles. I have added Java scriptfunction to do this validation (To prevent unnecessary files uploaded).
该upload.ascx含有File Upload控制。文件上传控件将上传.xlsx and .xls文件。我添加Java script了执行此验证的功能（以防止上传不必要的文件）。
Onchange of FileUploadcontrol and Onclick of Submit buttonthe same Validation function will be called.
Onchange of FileUpload控件和Onclick of Submit button相同的验证函数将被调用。
The File Upload Validation Function is working for both calling. If the user clicks submit button the same function is getting called and working fine.
文件上传验证功能适用于两个调用。如果用户单击提交按钮，则会调用相同的函数并正常工作。
My Problem is:In My validation function i have written return false. After displaying the alert Message, the Page is getting redirected to some URL (localhost/Admin/Authorization/AcceptFile.aspx). AcceptFileis my ActionResult name. It should not happen. The Function is returning False. But the Form is getting redirected to Above URL why.?
我的问题是：在我的验证函数中，我写了return false. 显示警报消息后，页面被重定向到某个 URL ( localhost/Admin/Authorization/AcceptFile.aspx)。AcceptFile是我的 ActionResult 名称。它不应该发生。函数返回 False。但是表单被重定向到上面的 URL 为什么。？
I have kept debugger in my Action Result that is not getting called if its wrong File(Its correct). If its correct File the Index file will be loaded with Success message(Action result is getting called and working Fine). .
我在我的操作结果中保留了调试器，如果它的文件错误（它是正确的）就不会被调用。如果它的文件正确，索引文件将加载成功消息（操作结果被调用并且工作正常）。.
I suspect MVC Form. If wrong file is uploaded the redirection is happening with out calling Action Result this should be stopped.
我怀疑 MVC 形式。如果上传了错误的文件，则重定向正在发生，而不会调用 Action Result 这应该停止。
<% using (Html.BeginForm("AcceptFile", "Authorization", FormMethod.Post, new { enctype = "multipart/form-data" }))
{%>
My Javascript Function:
我的 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;
}
My upload.ascx Code:
我的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>
回答by RajeshKdev
My Self i found the Problem.
我的自我我发现了问题。
Yes My suspect is correct. The Problem is
是的，我的怀疑是正确的。问题是
onsubmit = "javascript:return checkfile(document.getElementById('fileAuthorization'))"
this should be called Like this in Form tag itself:
这应该在 Form 标签本身中被称为像这样：
<% using (Html.BeginForm("AcceptFile", "Authorization", FormMethod.Post, new { enctype = "multipart/form-data", onsubmit = "javascript:return checkfile(document.getElementById('fileAuthorization'))" }))
{%>
But Earlier it was called Submit button Onclick
但早些时候它被称为提交按钮 Onclick
<input type="submit" id="btnSave" name="btnSave" value="Upload" onclick="javascript:return checkfile(document.getElementById('fileAuthorization'))" />
I have corrected and its getting worked(Validations and File Upload For Submit button Onclick and File Upload control onchange).
我已经更正并开始工作（验证和文件上传提交按钮 Onclick 和文件上传控制 onchange）。
But My question is why the return falseis not working on submit button click? But its working for Fileupload onchange events.
但我的问题是为什么return false提交按钮点击不起作用？但它适用于 Fileupload onchange 事件。
why the redirection was happened.? after changing the same Line to MVC Form its getting worked (redirection is not happening now) why.?
为什么会发生重定向。？在将同一行更改为 MVC 表单后，它开始工作（现在没有发生重定向）为什么。？
回答by Ben McCormick
Change your submit to this:
将您的提交更改为：
<button type="button" id="btnSave" name="btnSave" onclick="checkfile(document.getElementById('fileAuthorization'))" ></button>
And it won't submit the form automatically
它不会自动提交表单
When you're ready to submit the form you can do so with javascript in your callback function:
当您准备好提交表单时，您可以在回调函数中使用 javascript 执行此操作：
document.getElementById('form-id').submit();
