asp .net mvc中具有视图模型的多个路由参数答案

【问题标题】：Multiple routing parameters with view model in asp .net mvcasp .net mvc中具有视图模型的多个路由参数
【发布时间】：2013-11-09 19:16:15
【问题描述】：

我正在尝试路由并为搜索生成一个对 seo 友好的 url。

目前我的视图模型如下：

public class SearchFormViewModel
    {
        //[Required(ErrorMessage="Keyword is required")]
        public string Keyword { get; set; }

        public IEnumerable<SelectListItem> TransactionTypes { get; set; }
        public int TransactionTypeId { get; set; }

        public IEnumerable<SelectListItem> RoomLookUps { get; set; }
        public int? MinBeds { get; set; }
        public int? MaxBeds { get; set; }
        ...
    }

当这个表单被提交时，它会进入一个控制器：

    public ActionResult SearchProperties(SearchFormViewModel viewModelInp)
    {
         // Perform search;
    }

并显示搜索结果。但是生成的url如下：

http://localhost:49191/search/searchproperties?Keyword=London&TransactionTypeId=2&MinBeds=&MaxBeds=&MinPrice=&MaxPrice=

我需要一个看起来像这样的 URL

http://localhost:49191/flats-to-rent/London?MinBeds=&MaxBeds=&MinPrice=&MaxPrice=

我不知道如何将参数从 ViewModel 传递给 Route

以下路线不起作用：

routes.MapRouteLowercase(
                "Search-Properties-Buy",
                "flats-to-rent/{Keyword}",
                new { controller = "Search", action = "SearchProperties", Keyword = UrlParameter.Optional },
                new { TransactionTypeId = "2" }
            );

我尝试了其他各种方法，但似乎都不起作用，并且出现 404 错误。

我找不到任何可能对我有帮助的例子。

【问题讨论】：

提交时，表单数据被序列化并发送到服务器。在这种情况下，您没有使用 ASP.NET MVC 路由。您的 URL 是正确的，但从不使用客户端数据。我想“生成的网址如下”是在按下提交按钮后生成的。
你是对的。有没有办法创建我需要的 URL？
您需要覆盖客户端、您的提交按钮按下事件以及必须提交的构建字符串。没有其他方法可以做到这一点。告诉我，您正在向服务器发送 POST 或 GET 请求？
嗨罗伯托，这是一个 GET 请求

标签： c# seo routes asp.net-mvc-routing viewmodel

【解决方案1】：

好吧，我试着给你一个解决方案。放置一个包含由 asp.net mvc 生成的基本路由的输入字段：

<input type="hidden" value="@Url.Action("SearchProperties", new { Keyword = "{Prototype}" })" id="BaseSearchURL" />

如您所见，我指定了一个带有“{Prototype}”值的关键字，这指示 asp.net mvc 提供您配置的自定义路由，并且在渲染之后，在页面 HTML 中您应该会看到类似这样的内容：

<input type="hidden" value="server/flats-to-rent/{Prototype}" id="BaseSearchURL" />

之后，您可以使用 jquery 覆盖提交按钮按下事件，您可以编写自定义代码：

$(document).ready(function() {
    $('input[type=submit]').submit(function() {
        var baseURL = $('#BaseSearchURL').val();
        var keyword = $('input[name=Keyword]');
        var action = baseURL.replace('{Prototype}', keyword);
        var form = $(this).parents('form');
        // Get all parameter except Keyword
        var params = $('input[name!=Keyword], select, textarea', form).serialize();
        action += "?" + params;
        document.location = action;
    });
});

步骤很简单：

获取先前生成的路由模板表单
获取必须替换为“{Prototype}”的关键字；
获取表单参数并将其附加到操作中
调用 document.location 以启动特定 URL。

【讨论】：