快速搜索表单未提交 MVC答案

【问题标题】：Quick Search Form Not Submitting MVC快速搜索表单未提交 MVC
【发布时间】：2014-12-01 16:11:05
【问题描述】：

我目前有一个局部视图，它呈现在网站上每个页面的顶部。这个局部视图的目的是提供一个让用户快速搜索的表单。我已将部分视图表单设置如下：

    @using (Html.BeginForm())
            {
                <div class="col-md-7" style="text-align: right">                          
                    <div class="input-group input-group-sm col-sm-6 pull-right">
                        @Html.TextBox("caseReference")
                        <button type="submit">
                            <i class="fa fa-search"></i>
                        </button>
                    </div>
                </div>   
            }
            @Html.Partial("_MainNavigation")
        </div>
    </div>
</nav>

<script type="text/javascript">
    $(function () {
        $("form").on("submit", function (event) {
            event.preventDefault();
            var request = { caseReference: $('#caseReference').val() };
            submitForm(request, '@Url.Action("CaseSearch", "QuickSearch", new { area = "Search" })');
        });
    });

</script>

但是，在页面源下，表单操作呈现为带有发布操作的主页请求。我读过很多例子，这个任务看起来很简单。在@html.BeginForm() 方法中使用参数会更好吗？

【问题讨论】：

我不知道如何回答这个问题，只能说“是”......它会给出相同的结果，但可能出错的事情更少。
是的，使用@html.BeginForm() 方法的参数。并确保您没有其他表单中的表单。
所以在开发者工具中调试后，它正在向“Search/QuickSearch/CaseSearch”发出一个post请求，这似乎是正确的，并且请求正文包含caseReference。但是，我收到 404 错误“HTTP 404。您要查找的资源（或其依赖项之一）可能已被删除、更改名称或暂时不可用。”
只是为了清楚 404 错误是关于他的“搜索/快速搜索/案例搜索”URL

标签： asp.net-mvc forms search submit

【解决方案1】：

因此，在花了几个小时研究之后，我终于获得了可以在我的网站主页上使用的快速搜索功能。在 razorview 我有以下代码：

<div class="input-group input-group-sm col-sm-6 pull-right">
                @Html.Kendo().MaskedTextBox().Name("name").Mask("000000/0000").Deferred()
                <button id="search" type="submit">
                    <i class="fa fa-search"></i>
                </button>

<script type="text/javascript">
$(function () {
    $("#search").on("click", function (event) {
        event.preventDefault();
        var value = $('#name').val();
        value = value.replace(/[/]/g, "_");
        var refVal = value;
        var url = '@Url.Action("Action", "Contoller", new { area = "Area" })' + '//' + refVal;
        $.ajax({
            type: 'GET',
            url: url,
            cache: false,
            dataType: 'json',
            contentType: "application/json;",
            success: function (result) {
                if (result.success) {
                    window.location.href = result.url;
                }
                else {
                    bootbox.alert(result.message);
                }
            }
        });
    });
});

但是关于以下行：

        var url = '@Url.Action("Action", "Contoller", new { area = "Area" })' + '//' + refVal;

如果我对 url 进行硬编码并附加搜索词，它可以在主页上运行，因为我们位于根目录但从其他页面失败，为了解决这个问题，我尝试使用 @Url.Action。但是，这会在 html 源代码中产生以下结果：

        var url = '' + '//' + refVal;

withing JS 中的 URL.Action 方法有一定的使用方法吗？

【讨论】：