問題描述

我正在為 DropDown 創建一個表單，如下所示:

I'm creating a form for a DropDown like this:

@{
    Html.BeginForm("View", "Stations", FormMethod.Get);
}
@Html.DropDownList("id", new SelectList(ViewBag.Stations, "Id", "Name"), new { onchange = "this.form.submit();" })
@{
    Html.EndForm();
}

如果我從下拉列表中選擇一個值，我會被重定向到正確的控制器，但 URL 不是我想要的:

If I choose a value from my dropdown I get redirected to the correct controller but the URL is not as I would like to have it:

/Stations/View?id=f2cecc62-7c8c-498d-b6b6-60d48a862c1c

/Stations/View?id=f2cecc62-7c8c-498d-b6b6-60d48a862c1c

我想要的是:

/Stations/View/f2cecc62-7c8c-498d-b6b6-60d48a862c1c

/Stations/View/f2cecc62-7c8c-498d-b6b6-60d48a862c1c

那么如何將 id= 查詢字符串參數替換為我想要的更簡單的 URL 方案?

So how do I get the id= querystring parameter replaced by the more simple URL Scheme I want?

推薦答案

帶有 FormMethod.Get 的表單將始終將其表單控件的值作為查詢字符串值回發.瀏覽器無法根據您的路由配置生成 url，因為它們是服務器端代碼.

A form with FormMethod.Get will always post back the values of its form controls as query string values. A browser cannot generate a url based on your route configurations because they are server side code.

如果您真的想生成 /Stations/View/f2cecc62-7c8c-498d-b6b6-60d48a862c1c，那么您可以使用 javascript/jquery 構建自己的 url 并重定向

If you really wanted to generate /Stations/View/f2cecc62-7c8c-498d-b6b6-60d48a862c1c, then you could use javascript/jquery to build your own url and redirect

@using (Html.BeginForm("View", "Stations", FormMethod.Get))
{
    @Html.DropDownList("id", new SelectList(ViewBag.Stations, "Id", "Name"))
}

var baseUrl = '@Url.Action("View", "Stations")';
$('#id').change(function() {
    location.href = baseUrl + '/' $(this).val();
});

附注:在 .change() 事件上提交不是預期的行為，并且會使用戶感到困惑.建議您添加一個按鈕讓用戶進行選擇，檢查它然后提交表單(處理按鈕的 .click() 事件而不是下拉列表的 .change() 事件)

Side note: Submitting on the .change() event is not expected behavior and is confusing to a user. Recommend you add a button to let the user make their selection, check it and then submit the form (handle the button's .click() event rather that the dropdownlist's .change() event)

這篇關于mvc Html.BeginForm 不同的 URL 架構的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！