Asp.net mvc Html.ActionLink 在引导选择中不起作用答案

【问题标题】：Asp.net mvc Html.ActionLink not working in Bootstrap SelectAsp.net mvc Html.ActionLink 在引导选择中不起作用
【发布时间】：2016-09-24 12:23:54
【问题描述】：

我想为我的页面的本地化选择创建一个下拉列表。但是，如果我尝试使用 <ul> 标签 Html.ActionLink 帮助器创建真正的链接，使用如下语言代码

 @{
    var routeValues = this.ViewContext.RouteData.Values;
    var controller = routeValues["controller"] as string;
    var action = routeValues["action"] as string;
  }

 <ul>
    <li>
        @Html.ActionLink("TR", @action, @controller, new { culture = "tr" }, new { rel = "alternate", hreflang = "tr" })
    </li>
    <li>
        @Html.ActionLink("EN", @action, @controller, new { culture = "en" }, new { rel = "alternate", hreflang = "en" })
    </li>
</ul>

但如果我想在 Bootstrap 选择控件中执行此操作，它只会在其中显示文本，而不是转到我的 url。

<select class="bs-select form-control" data-width="auto" id="js-data-example-ajax" name="js-data-example-ajax">
    <option>@Html.ActionLink("TR", @action, @controller, new {culture = "tr"}, new {rel = "alternate", hreflang = "tr"})</option>
    <option>@Html.ActionLink("EN", @action, @controller, new { culture = "en" }, new { rel = "alternate", hreflang = "en" })</option>
</select>

【问题讨论】：

标签： jquery html asp.net asp.net-mvc twitter-bootstrap

【解决方案1】：

你还有这样的选择

<option data-url="@Url.Action(@action, @controller)">
 TR
</option>

您在 jquery 中的下拉更改事件看起来像

$('#js-data-example-ajax').on('change', function() {
        var yourUrl = $('#js-data-example-ajax').find(":selected").data('url');
        document.location = yourUrl ;
    });

【讨论】：

【解决方案2】：

我在我的项目中做了同样的事情，请参考下面的代码：

我已经使用 JavaScript 完成了这项工作。

我的 .cshtml 代码：

@Html.DropDownList(
    "url",
    new SelectList(new[]
    {
        new SelectListItem { Text = "About", Value = Url.Action("About", "Home") },
        new SelectListItem { Text = "MyPage", Value = Url.Action("Index", "Home") },
        new SelectListItem { Text = "APage", Value = Url.Action("AnyPage", "Home") },
    }, "Value", "Text"),
    "-- Pick an URL ---",
    new { id = "urlddl" }
)

我的 JQuery 代码：

$(function() {
    $('#urlddl').change(function() {
        var url = $(this).val();
        if (url != null && url != '') {
            window.location.href = url;
        }
    });
});

使用 jQuery，您可以订阅此下拉列表的更改事件并导航到相应的 URL。

希望它能解决你的问题。

谢谢

【讨论】：