Transform Querystring to RouteValue in Razor View

Question

Я застрял в очень подробных деталях.

Я хочу, чтобы пользователь мог фильтровать результаты в виде индекса.

Для этого я создал выпадающий список, который получает населенную thourgh моего 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} 
); 

После submi t event Я переадресовываюсь на URL-адрес /Index?Name=ChosenValue Это абсолютно правильная фильтрация. Однако я хотел бы избавиться от запроса и преобразовать маршрут в /Index/ChosenValue.

Примечание: «Имя», «ChosenValue» & «SomeProperty» - это просто фиктивные замены для имен фактических свойств.

Answer 1

Вместо отправки формы, вы можете сцепить /Captains/Index/ с выбранным значением выпадающего меню и перенаправлять на URL, используя window.location.href ниже

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

Answer 2

Я думаю, что вы ищете неправильное поведение маршрутизации из форму отправить. Тип разрешения маршрута, которое вы надеетесь увидеть, действительно происходит только на стороне сервера, где маршрутизация MVC знает все о доступных определениях маршрутов. Но процесс подачи формы, который происходит в браузере, знает только о вводе форм и их значениях. Он не знает, что «Имя» является специальным параметром маршрута ... он просто набирает все значения формы как параметры запроса.

Поэтому, если вы хотите отправить браузер в/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> 

Выше вы устанавливаете URL с фиктивным значением «Name», который можно заменить позже, то вы будете делать замену с выбором и перенаправлять в JavaScript:

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

Answer 3

Если вы хотите удалить строку запроса с URL-адреса, потому что это выглядит странно, тогда измените свой 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(); 
}); 

Вам нужно будет изменить подпись вашего контроллера, чтобы он соответствовал любому необязательному параметру, указанному в конфигурации маршрута. В вашем примере «Имя».