使用重新路由和本地存储创建语言下拉菜单

Question

我有一个使用 Umbraco (MVC .NET) 的 Web 应用程序，它（目前）只有两个根。它们被命名为 "English" 和 "Swedish"。英语是默认网页，瑞典语对于用户来说应该是可选的。为了让用户能够更改语言，我使用 Razor 在下拉菜单中显示它们：

@{
   List<SelectListItem> languages= new List<SelectListItem>();
   foreach (var language in Model.Content.Siblings())
   {
      languages.Add(new SelectListItem
      {
         Text = language.Name,
         Value = language.Url
    });
}
@Html.DropDownList("LanguageSelect",new SelectList(languages,"Value","Text"), htmlAttributes: new { id = "LanguageSelect" });
}

这会在根级别正确输出根的名称。现在使用 javascript 我使用 onchange 重新路由：

document.getElementById("LanguageSelect").onchange = function() {
    window.location.href = this.value;      
};

这适用于从一种语言到另一种语言。现在困难的部分开始了：因为这个下拉列表存在于我的所有视图继承的主模板中，所以当加载新视图时，模板中的所有内容都会重新加载。因此下拉菜单被重新加载并且 selected 语言在下拉菜单中丢失。我不想查看 URL 应该在下拉列表中设置哪个值，而是想使用本地存储。所以我尝试在下拉菜单的 onchange 函数中设置它：

localStorage.setItem("LanguageSelectStoredUrl", this.value);

不过这样就省了URL。我也想保存文本，即 "Swedish" 并将下拉列表的当前值设置为存储值。这应该有效，对吧？如果是这样，我该怎么做？有什么理由不这样做吗？

我想这样做的另一个原因是因为我希望用户在以后的会话中不必通过使用再次选择语言：

$(document).onload(function(){
   if(localStorage.getItem("LanguageSelectStoredValue") != null){
      // Check if the dropdown value is equal to the stored value
      // If so do nothing
      // Else reroute to locally stored URL

但是因为我不知道如何存储下拉菜单的文本值，所以我不能这样做，也许有比 onload 更合适的事件挂钩？

为了完成手头的任务，我需要帮助解决以下问题：

如何获取 selected 下拉项的文本？
如何以编程方式 select 下拉列表中的值之一？
有没有比 onload 更好的挂钩事件？

还有什么我可能忽略的吗？

谢谢！

Answer 1

获取下拉列表的 selected 文本：

JavaScript:

var languageSelect = document.getElementById("LanguageSelect");
var selectedText = languageSelect.options[languageSelect.selectedIndex].text;

jQuery:

$('#LanguageSelect option:selected').text();

使用 $("#LanguageSelect").val('ValFromDdl'); 将允许您 select 下拉列表中的项目。
您可以使用$(document).ready读取您的存储对象并初始化下拉列表。

使用重新路由和本地存储创建语言下拉菜单

Creating a language dropdown menu with reroute and local storage

javascript

asp.net-mvc

jquery

umbraco

razor