Question

我在视图中坚持了一个非常基本的细节。

我希望能够让用户在“索引”视图中过滤结果。

为了做到这一点，我创建了一个下拉列表，该列表由我的viewmodel填充：

@using (Html.BeginForm("Index", "Captains", FormMethod.Get)) { 
    <div class="row">
        <div class="dropdown">
            @Html.DropDownList("Name", new SelectList(Model.SomeProperty), new { id = "FilterList" })    
        </div>
    </div>
 @* ... *@
}

此外，我还有一个小的jQuery片段，用于在更改事件上提交表单：

$('#FilterList').on('change', function () {
    var form = $(this).parents('form');
    form.submit();
});

我为此创建的路线如下所示：

routes.MapRoute(
        name: "IndexFilter",
        url: "{controller}/{action}/{Name}",
        defaults: new { Name = UrlParameter.Optional}
);

提交事件后，我会被重定向到网址 /Index?Name=ChosenValue 这是完全正确的过滤。但是我想摆脱查询字符串并将路由转换为 /Index/ChosenValue 。

注意：“名称”，“ChosenValue”＆amp; “SomeProperty”只是实际属性名称的虚拟替换。

Answer 1

您可以将/Captains/Index/与选定的下拉列表相关联，然后使用window.location.href重定向到网址，而不是提交表单，如下所示

$('#FilterList').on('change', function () {
    window.location.href = '/Captains/Index/' + $(this).val();
});

Answer 2

我认为您正在从表单提交中寻找错误的路由行为。您希望看到的路由解析类型实际上只发生在服务器端，其中MVC路由知道所有可用的路由定义。但是，在浏览器中发生的表单提交过程只知道表单输入及其值。它不知道＆＃34;姓名＆＃34;是一个特殊的路由参数...它只是将所有表单值作为查询字符串参数。

因此，如果您要将浏览器发送到/ Index / ChosenValue，但您不想在客户端上从头开始构建URL，则需要在呈现视图时在服务器上构造URL。你可以采取这种方法：

<div class="row">
    <div class="dropdown">
        @Html.DropDownList("Name", new SelectList(Model.SomeProperty), 
            new { 
                id = "FilterList", 
                data_redirect_url = @Url.Action("Index", "Captains", new { Name = "DUMMY_PLACEHOLDER" }) 
            })    
    </div>
</div>

在您的上方，使用虚拟＆＃34;名称＆＃34;设置网址。您可以在以后替换的值，然后您将使用javascript中的选择和重定向进行替换：

$('#FilterList').on('change', function () {
    var redirectUrl = $(this).data('redirect-url');
    window.location.href =  redirectUrl.replace("DUMMY_PLACEHOLDER", $(this).val());
});

Answer 3

如果您想将查询字符串从网址中删除，因为它看起来很奇怪，请更改 FormMethod.Post 。

但是，为了真正回答您的问题，我已成功尝试了以下内容（注意：这可能会被某些人视为黑客攻击）

简而言之：当列表更改时，客户端更新表单元素上的操作URL。

$('#FilterList').on('change', function () {
   var form = $(this).parents('form');
   var originalActionUrl = form.attr("action");
   var newActionUrl = originalActionUrl  + "/" + $(this).val();
   form.attr("action", newActionUrl);
   console.log(form.attr("action"));    
   form.submit();
});

您需要更改控制器的签名，以匹配您在路由配置中指定的任何可选参数值。在您的示例中，＆＃34;名称＆＃34;。

在Razor View中将Querystring转换为RouteValue

3 个答案: