Question

我正在使用ASP.NET MVC 5.这里，当我点击搜索栏时，它调用java脚本函数，当我向表单提供searchString值，然后单击SUBMIT时，它不提交任何内容。那是为什么？

<script>
    $(function () {
        $('a[href="#search"]').on('click', function (event) {
            event.preventDefault();
            $('#search').addClass('open');
            $('#search > form > input[type="search"]').focus();
        });

        $('#search, #search button.close').on('click keyup', function (event) {
            if (event.target == this || event.target.className == 'close' || event.keyCode == 27) {
                $(this).removeClass('open');
            }
        });
    });
</script>

查看：

<body>
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            @if (Request.IsAuthenticated)
            {
                @Html.ActionLink("TimeEntry", "Index", "TimeEntry", null, new {@class = "navbar-brand"})
            }
            else
            {
                @Html.ActionLink("TimeEntry", "Login", "User", null, new {@class = "navbar-brand"})
            }

        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("Clock In/Out(WIP)", "Index", "TimeEntry")</li>
                <li>@Html.ActionLink("Time Summary", "BackEnd", "TimeEntry")</li>



                <li>@Html.ActionLink("Users", "Index", "User")</li>
                <li><a href="#search">Search</a></li>


            </ul>

            <ul class="nav navbar-nav navbar-right">
                @if (Request.IsAuthenticated)
                {
                    <li> @Html.ActionLink("Log Out", "Logout", "User")</li>

                }
            </ul>


        </div>
    </div>
</div>

<div id="search">
    <button type="button" class="close" style="padding-top: 35px">x</button>
    @using (Html.BeginForm("Search", "User", FormMethod.Get))
    {
            @Html.TextBox("searchString","", new {@placeholder = "Search by First Name"})
            <button type="button" class="btn btn-primary">Search Rando</button>   
    }
</div>

<div class="container body-content">
    @RenderBody()
    <hr/>
    <footer>
        <p>&copy; @DateTime.Now.Year - My TimeClock Application</p>
    </footer>
</div>

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>

Answer 1

此行取消默认事件操作。把它拿出来让表格提交。

event.preventDefault();

这将允许表单提交。虽然该函数中的其他两行不再用于任何目的，因为它们正在修改文档的状态，但是一旦表单提交发生，浏览器就会离开文档。

Answer 2

<button type="button" class="btn btn-primary">Search Rando</button>

应改为

<button type="submit" class="btn btn-primary">Search Rando</button>

将type更改为submit

表单不在ASP.NET MVC中提交值

2 个答案: