将 Html.BeginForm 映射到路由答案

【问题标题】：map Html.BeginForm to route将 Html.BeginForm 映射到路由
【发布时间】：2012-03-21 02:57:23
【问题描述】：

您好
我的问题是 ASP.NET MVC Routing , Html.BeginForm 的精确复制品，
我再次发布，因为建议的解决方案不起作用..
我的观点：

@using (@Html.BeginForm("Search", "Home",FormMethod.Get))
{
        input name="q" id="q" type="text" class="ipt" />
        @Html.DropDownList("SearchType", new SelectList(
      new[] { "All Words", "Any Word", "ZipCode" }, ("All Words")))


        input type="image" src="../../Content/images/search.png" />
}

（我已删除 http://localhost:4893/Home/Search?q=Brabant&SearchType=ZipCode&x=51&y=5，我希望它是 Home/Search/Brabant/ZipCode

编辑：

我认为这与路由无关，javascript 不起作用！我的问题是首先生成 url，而不是匹配它。

$('form').submit(function () {
        var data = $('input[name="q"]', this).val();
        window.location.href = this.action + '/' + encodeURIComponent(data);
        return false;
    });

【问题讨论】：

我相信我们需要查看路线的代码（在 global.asax 中）以提供帮助。
routes.MapRoute(null, // 路由名称 "", // 带有参数的 URL new { controller = "Home", action = "Index" } ); routes.MapRoute(null, "Home/Search/{q}/{SearchType}/{x}/{y}", new { controller = "Home", action = "Search" }, // 默认值 new { page = @"\d+" } // 约束：页面必须是数字 ); routes.MapRoute(null, "{q}/{SearchType}/Page{page}", new { controller = "Home", action = "Search" }, // 默认值 new { page = @"\d+" } / /约束：页面必须是数字）； routes.MapRoute(null, "{controller}/{action}");

标签： asp.net-mvc-3 asp.net-mvc-routing

【解决方案1】：

javascript 必须在 inside 表单

@using (@Html.BeginForm("Search", "Home", FormMethod.Get))
            {
                <script type="text/javascript">
                    $('form').submit(function () {
                        var q = $('input[name="q"]', this).val();
                        var e = document.getElementById("SearchType");
                        var SearchType = e.options[e.selectedIndex].text;

                        var idx = window.location.href.indexOf("/", 7);
                        var siteName = window.location.href.substring(0, idx).replace("http://", "");
                        var newPath = "http://" + siteName + '/' + q + '/' + SearchType;
                        window.location.href = newPath;
                        return false;
                    });
                </script>
                <div class="pf sleft">
                    <input name="q" id="q" type="text" class="ipt" />
                    @Html.DropDownList("SearchType", new SelectList(
              new[] { "All Words", "Any Word", "ZipCode" }, ("All Words")))
                </div>
                <div class="pf sright">
                    <input type="image" onclick="return CheckInput();" src="@Url.Content("~/Content/images/search.png")" />
                </div>
            }

【讨论】：

【解决方案2】：

在 Global.ascx 中指定一条新路由

 routes.MapRoute(
              "SearchRoute",
              "{controller}/{action}/{q}/{SearchType}/{x}/{y}",
              new {controller = "Home",action = "Search",q="",SearchType=""},

            );

编辑：

在您发布路线后，您的路线看起来不错，请尝试在默认路线上方定义它们

【讨论】：

【解决方案3】：

您是否收到任何 javascript 错误？你检查过 firebug 或 chrome 开发工具吗？

你为什么不直接提交表格

@using (@Html.BeginForm("Search", "Home",FormMethod.Get))
{
        input name="q" id="q" type="text" class="ipt" />
        @Html.DropDownList("SearchType", new SelectList(
      new[] { "All Words", "Any Word", "ZipCode" }, ("All Words")))


        <input id="submit" type="image" src="../../Content/images/search.png" />
     ...^ you had a type here i guess
}

和 jquery

$("#submit").click(function(e){
 $(this).closest('form').submit();
});

【讨论】：