Question

我在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事件，它是form事件，所以我需要添加带有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" />
}

但它似乎没有用 - 当我按下输入我出于某种原因获取页面的来源并到达localhost /？onsubmit = productDefinition.runSearch（）URL。
可能是问题的根源是什么？如何为onsubmit获得与onclick相同的行为？

Answer 1

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



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

Answer 2

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

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

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

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

3 个答案: