C# MVC3中添加onsubmit事件调用JS函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14852274/
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
Add onsubmit event to call JS function in MVC3
提问by Sergei G
I have a problem with calling JS method from form in MVC3 project: I have a "search"page without forms with two buttons - Search and Cancel. Click on search runs JS function runSearch in ProductDefinition.
我在 MVC3 项目中从表单调用 JS 方法时遇到问题：我有一个“搜索”页面，没有带有两个按钮的表单 - 搜索和取消。点击搜索在ProductDefinition中运行JS函数runSearch。
<div id="productSearch-dialog" class="modal fade" style="width: 1000px; display: none">
<div class="modal-header">
<button class="close" aria-hidden="true" data-dismiss="modal" type="button">×</button>
<h3>Search Results</h3>
</div>
<div class="modal-body" style="height: 650px;">
<div>
<input id="inputname" type="text" /><font class="red-font" id="lblrequired" style="display: none">*</font>
</div>
<div id="searchresultcontain" class="grid">
</div>
<div id="Pagination" class="pagination">
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" onclick="productDefinition.runSearch();">Search</button>
<button class="btn btn-primary" data-dismiss="modal">Cancel</button>
</div>
How can I run this JS method (runSearch) when I press ? As far as I understand, this will be onsubmit event which is form event, so I am need to add form element with onsubmit property. I tried surrounding input field with BeginForm helper method:
当我按下时如何运行这个 JS 方法（runSearch）？据我了解，这将是表单事件的 onsubmit 事件，因此我需要添加具有 onsubmit 属性的表单元素。我尝试使用 BeginForm 辅助方法包围输入字段：
@using (Html.BeginForm(new { onsubmit = "productDefinition.runSearch();" }))
{
<input id="inputname" type="text" /><font class="red-font" id="lblrequired" style="display: none">*</font>
<input type="submit" value="Submit" style="visibility: hidden" />
}
but it does not seem to be working - when I press enter I for some reason get source of the page and arrive at localhost/?onsubmit=productDefinition.runSearch() URL.
What can be the source of the problem and how can I get the same behaviour for onsubmit as for onclick?
但它似乎不起作用 - 当我按 Enter 时，我出于某种原因获取了页面的源代码并到达 localhost/?onsubmit=productDefinition.runSearch() URL。
问题的根源是什么，我如何才能获得与 onsubmit 相同的行为？
采纳答案by Darren
@using (Html.BeginForm(new { onsubmit = "return runSearch();" }))
<script type="text/javascript">
function runSearch() {
// your logic to perform the search.
return true;
}
</script>
回答by Sergey Rybalkin
You need to use the following version of BeginForm methodin order to specify html attributes.
您需要使用以下版本的 BeginForm 方法来指定 html 属性。
However, it is considered a bad practice to use inline javascript so I would suggest to assign and id attribute to your form and handle its submit event in the external javascript file instead. If you are using jQuery for your project, here is a good example from their docs - http://api.jquery.com/submit/. In plan JavaSCript it is a bit more tricky but still easy to do.
但是，使用内联 javascript 被认为是一种不好的做法，因此我建议将 id 属性分配给您的表单，并在外部 javascript 文件中处理其提交事件。如果你在你的项目中使用 jQuery，这里是他们文档中的一个很好的例子 - http://api.jquery.com/submit/。在计划 JavaSCRipt 中，它有点棘手，但仍然很容易做到。
回答by ajcarracedo
@model Models.Person
<script type="text/javascript">
$(document).ready(function () {
$('#registerInputId').click(function () {
alert('what do you do before send? For example encrypt the password');
$('#Password').val(CryptoJS.MD5($('#Password').val()));
})
});
</script>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal" style="display: inline-block; margin: 5% auto;">
<div style="font-size: 18px; margin-right:2px; margin-bottom:20px; text-align:right;">Add form</div>
@Html.ValidationSummary(true)
<div class="form-group">
@Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-5" })
<div class="col-md-7">
@Html.EditorFor(model => model.Name)
@Html.ValidationMessageFor(model => model.Name)
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Password, htmlAttributes: new { @class = "control-label col-md-5" })
<div class="col-md-7">
@Html.EditorFor(model => model.Password)
@Html.ValidationMessageFor(model => model.Password)
</div>
</div>
<div class="form-group" style="margin-top: 30px;">
<div class="col-md-offset-3 col-md-6">
<input id="registerInputId" type="submit" value="Register" class="btn btn-default" />
</div>
</div>
</div>
}
回答by tchelidze
Form.Idis required if onsubmithandler implements generic functionality, applicable for multiple forms. (example : disabling all input fields)
Form.Id如果onsubmit处理程序实现适用于多种表单的通用功能，则需要。（例如：禁用所有输入字段）
Form
形式
@using (Html.BeginForm(new {
id = "form24",
onsubmit = "return onSubmitHandler(id);"
}))
handler
处理程序
<script type="text/javascript">
function onSubmitHandler(formId) { /*formId is form24 */ }
</script>
