ASP.NET7多语言切换：下拉按钮触发AJAX传递Culture失效问题排查

核心错误点分析 #

• 参数传递不匹配
  AJAX请求中data: { cultureInfo }存在两处问题：一是cultureInfo变量未定义，二是控制器接收的参数名是culture，而非cultureInfo，导致参数无法正确传递到后端。

• Success回调的this指向错误
  在AJAX的success回调函数中，this不再指向触发点击的.dropdown-item元素，直接使用$(this)会无法获取目标元素的图标和语言标识。

• 控制器逻辑不适配AJAX场景
  原控制器返回Redirect是针对普通HTTP请求的逻辑，AJAX不会自动跟随重定向刷新页面，反而会获取重定向后的页面HTML，完全不符合无刷新修改DOM的需求。

• 事件绑定时机与参数遗漏
  若JS代码在DOM加载完成前执行，事件绑定会失效；同时success函数未声明response参数却直接使用，会导致未定义错误。

修正后的代码实现 #

控制器代码

[HttpGet]
public IActionResult ChangeLanguage(string culture)
{
    Response.Cookies.Append(
        CookieRequestCultureProvider.DefaultCookieName,
        CookieRequestCultureProvider.MakeCookieValue(new RequestCulture(culture)),
        new CookieOptions() { Expires = DateTimeOffset.UtcNow.AddYears(1) });
    // AJAX请求无需重定向，返回成功状态即可
    return Ok();
}

JavaScript代码

// 确保DOM加载完成后执行事件绑定
$(document).ready(function() {
    // 使用事件委托兼容动态元素，同时绑定点击事件
    $("#countries").on("click", ".dropdown-item", function () {
        var $currentItem = $(this); // 保存当前点击元素的引用
        var targetCulture = $currentItem.find("span").data("lang");

        $.ajax({
            url: '/Client/Home/ChangeLanguage',
            type: 'GET',
            data: { culture: targetCulture }, // 参数名与控制器保持一致
            success: function () {
                // 修改顶部按钮的图标与语言文本
                var iconSrc = $currentItem.children("img").attr("src");
                var displayLang = targetCulture.toUpperCase();
                $("#page-header-country-dropdown img").attr("src", iconSrc);
                $("#page-header-country-dropdown span").text(displayLang);
            },
            error: function (xhr, textStatus, errorThrown) {
                console.error("语言切换失败:", errorThrown); // 增加错误日志便于调试
            }
        });
    });
});

修复说明 #

修改后，点击下拉项时会通过AJAX调用控制器设置语言Cookie，随后在success回调中直接修改页面DOM，全程无需刷新页面，彻底解决了原重定向导致的DOM修改丢失问题。

内容的提问来源于stack exchange，提问作者Baran