ASP.NET Core中分离Razor Pages移动端与桌面端的最佳方案

你的现有方案问题分析 #

你当前的中间件通过UA判断后直接重定向到不同路由，这种方式会改变URL，而且和你现有的两个同路由页面设计冲突——你已经把两个页面都设为@page "/home"，重定向到/Mobile或/Desktop等于放弃了原有的同路由设计，反而增加了路由维护成本，还会多一次HTTP请求，影响用户体验和SEO。

推荐的最优实现方式 #

1. 自定义视图位置扩展（首推） #

ASP.NET Core允许扩展视图查找逻辑，让框架根据设备类型自动匹配对应的视图文件，全程保持URL统一，完全契合你现有同路由页面的设计。

步骤1：实现视图位置扩展类

创建MobileViewLocationExpander类，实现IViewLocationExpander接口，根据设备类型添加额外的视图查找路径：

public class MobileViewLocationExpander : IViewLocationExpander
{
    public void PopulateValues(ViewLocationExpanderContext context)
    {
        var userAgent = context.ActionContext.HttpContext.Request.Headers["User-Agent"].ToString();
        var detector = new DeviceDetector(userAgent);
        detector.Parse();
        // 把设备标识存入上下文，供后续视图查找使用
        context.Values["device"] = detector.IsMobile() ? "Mobile" : string.Empty;
    }

    public IEnumerable<string> ExpandViewLocations(ViewLocationExpanderContext context, IEnumerable<string> viewLocations)
    {
        if (context.Values.TryGetValue("device", out var device) && !string.IsNullOrEmpty(device))
        {
            // 优先查找带Mobile后缀的视图，比如HomeMobile.cshtml
            var mobileLocations = viewLocations.Select(loc => loc.Replace("{0}", "{0}" + device));
            return mobileLocations.Concat(viewLocations);
        }
        return viewLocations;
    }
}

步骤2：注册扩展

在Program.cs（或Startup.cs）中配置服务，添加自定义视图扩展：

// .NET 6+ Program.cs
builder.Services.AddControllersWithViews()
    .AddRazorOptions(options =>
    {
        options.ViewLocationExpanders.Add(new MobileViewLocationExpander());
    });

步骤3：保留现有文件结构

保持你的两个页面文件不变：

• 桌面端：/Home/Home.cshtml
• 移动端：/Home/HomeMobile.cshtml
  两个页面都保留@page "/home"指令，框架会自动根据设备类型优先加载HomeMobile.cshtml，找不到时再用默认的Home.cshtml。

2. 页面模型动态选择视图（灵活场景） #

如果需要支持用户手动切换设备视图等灵活需求，可以在页面模型中主动判断设备类型，指定返回的视图：

修改Home页面模型

public class HomeModel : PageModel
{
    public IActionResult OnGet()
    {
        var userAgent = Request.Headers["User-Agent"].ToString();
        var detector = new DeviceDetector(userAgent);
        detector.Parse();
        
        return detector.IsMobile() ? View("HomeMobile") : View();
    }
}

这种方式下，HomeMobile.cshtml不需要设置@page "/home"，只要放在同一目录下即可，URL始终保持/home。

3. 为什么不推荐重定向方案 #

• URL会随设备变化，不利于SEO和用户记忆
• 增加额外的HTTP请求，降低响应速度
• 破坏了同路由页面的设计初衷，需要维护两套路由规则

总结 #

优先选择自定义视图位置扩展方案，它代码侵入性低，完全适配你现有同路由页面的设计，后续扩展平板等其他设备视图也非常方便。如果需要业务层面的灵活控制（比如用户手动切换视图），再考虑页面模型动态选择视图的方式。

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