在MVC3中添加onsubmit事件调用JS函数答案

【问题标题】：Add onsubmit event to call JS function in MVC3在MVC3中添加onsubmit事件调用JS函数
【发布时间】：2016-12-07 18:15:38
【问题描述】：

我在 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>

当我按下时如何运行这个 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" />
}

但它似乎不起作用 - 当我按 Enter 时，我出于某种原因获取页面的源并到达 localhost/?onsubmit=productDefinition.runSearch() URL。
问题的根源是什么？如何让 onsubmit 的行为与 onclick 的行为相同？

【问题讨论】：

点击搜索按钮时不会使用哪个js函数？
在提交表单时你能运行 JavaScript 吗？
当 onlick - 是的，onsumbit no

标签： c# javascript html asp.net-mvc asp.net-mvc-3

【解决方案1】：

 @using (Html.BeginForm(new { onsubmit = "return runSearch();" }))



<script type="text/javascript">
    function runSearch() {
           // your logic to perform the search.
           return true;
    }
</script>

【讨论】：

我认为这不会起作用，因为 MVC 会将您的参数视为路由值的集合 - msdn.microsoft.com/en-us/library/dd470793(v=vs.108).aspx
@Sergey 它应该使用 HTML Helper 重载而不是 RouteValues。 OP 可以使用最适合他的重载作为附加参考：chenz101tutorials.blogspot.co.uk/2010/10/…
但是只有两个 HtmlHelper.BeginForm 的重载采用单个参数并且都将其作为 routeValues 来威胁。您的链接也证明了这一点，他们指定 ID 属性如下：Html.BeginForm(null, null, FormMethod.Post, new { id="myForm"})
@Sergey - 这个重载将把它当作一个助手：msdn.microsoft.com/en-us/library/dd505244(v=vs.108).aspx
我参加聚会有点晚了，但我同意谢尔盖的观点。 Html.BeginForm(null, null, FormMethod.Post, new { onsubmit = "return someJsScript();"}) 对我有用。 null 参数在渲染时只使用默认值

【解决方案2】：

您需要使用following version of BeginForm method 来指定html 属性。

但是，使用内联 javascript 被认为是一种不好的做法，因此我建议将 id 属性分配给您的表单并在外部 javascript 文件中处理其提交事件。如果您在项目中使用 jQuery，这里是他们文档中的一个很好的示例 - http://api.jquery.com/submit/。在 JavaSCript 计划中，它有点棘手，但仍然很容易做到。

【讨论】：

runSearch JS 函数位于 n ProductDefinition.js。所以我必须这样做：使用 (@Html.BeginForm (new {id="searchForm"}")) { ... } 并在 ProductDefinition.js: $("searchForm").submit(function() { runSearch(); return false }); 该文件中的所有条目都类似于 func_name: function() 我如何包装 sumbit 处理程序？
几乎，您的代码应该如下所示 - Html.BeginForm(null, null, FormMethod.Post, new { id="searchForm"})。您可以像这样将提交处理程序添加到 ProductDefinition.js 文件的末尾 - $(function(){$("searchForm").submit(function() { runSearch(); return false });})

【解决方案3】：

@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>
}

【讨论】：

【解决方案4】：

如果onsubmit 处理程序实现通用功能，则需要Form.Id，适用于多种表单。（示例：禁用所有输入字段）

表格

@using (Html.BeginForm(new { 
    id = "form24",
    onsubmit = "return onSubmitHandler(id);" 
 }))

处理程序

<script type="text/javascript">
   function onSubmitHandler(formId) { /*formId is form24 */ }
</script>

【讨论】：