ASP.NET MVC 5 Razor：根据屏幕尺寸渲染不同HTML视图

Hey there! Let's break down how to handle device-specific content rendering in ASP.NET MVC 5—including serving trimmed-down ViewModels and tailored layouts—so your dashboard works smoothly across desktops, tablets, and mobile devices.

Step 1: Detect the User's Device Type #

First, you need to reliably identify if the request is coming from a desktop, mobile, or tablet. The built-in Request.Browser works for basic cases, but for better accuracy (especially with modern devices that might spoof desktop user agents), I recommend using a dedicated library like DeviceDetector.NET (install via NuGet).

Here's a helper method to detect device type:

public enum DeviceType
{
    Desktop,
    Mobile,
    Tablet
}

private DeviceType GetCurrentDeviceType()
{
    // Use DeviceDetector.NET for more accurate detection
    var deviceDetector = new DeviceDetectorNET.DeviceDetector(Request.UserAgent);
    deviceDetector.Parse();

    if (deviceDetector.IsMobile())
    {
        return deviceDetector.IsTablet() ? DeviceType.Tablet : DeviceType.Mobile;
    }

    // Fallback to native detection if needed
    // bool isNativeMobile = Request.Browser.IsMobileDevice;
    return DeviceType.Desktop;
}

Step 2: Create Trimmed-Down ViewModels #

Instead of sending full datasets to mobile devices, create specialized ViewModels to reduce payload size:

// Desktop ViewModel: Full data set
public class DesktopPlayerStatsViewModel
{
    public List<ChartViewModel> AllCharts { get; set; } // All charts
    public List<StatisticViewModel> FullStats { get; set; } // 16 stats (2x8 grid)
}

// Mobile/Tablet ViewModel: Compact data set
public class MobilePlayerStatsViewModel
{
    public List<ChartViewModel> EssentialCharts { get; set; } // Only 2-3 core charts
    public List<StatisticViewModel> CompactStats { get; set; } // 8 stats (2x4 grid)
}

Step 3: Serve the Right Data & View from the Controller #

In your action method, detect the device, fetch the appropriate data, and return the corresponding ViewModel (and even a dedicated View if needed):

public ActionResult PlayerStats(string playerUCID)
{
    var deviceType = GetCurrentDeviceType();

    if (deviceType is DeviceType.Mobile or DeviceType.Tablet)
    {
        // Fetch compact data for mobile/tablet
        var mobileVm = new MobilePlayerStatsViewModel
        {
            EssentialCharts = _chartRepository.GetEssentialPlayerCharts(playerUCID),
            CompactStats = _statRepository.GetCompactPlayerStats(playerUCID)
        };

        // Return a dedicated mobile view (or reuse the main view with conditional logic)
        return View("MobilePlayerStats", mobileVm);
    }
    else
    {
        // Fetch full data for desktop
        var desktopVm = new DesktopPlayerStatsViewModel
        {
            AllCharts = _chartRepository.GetAllPlayerCharts(playerUCID),
            FullStats = _statRepository.GetAllPlayerStats(playerUCID)
        };

        return View("PlayerStats", desktopVm);
    }
}

Step 4: Build Device-Specific Razor Views #

Create separate views for desktop and mobile to tailor the layout:

Desktop View (PlayerStats.cshtml)

@model DesktopPlayerStatsViewModel

<div class="desktop-dashboard">
    <!-- Render all charts -->
    <div class="charts-grid desktop-charts">
        @foreach (var chart in Model.AllCharts)
        {
            @Html.Partial("_ChartCard", chart)
        }
    </div>

    <!-- Render 2x8 stats grid -->
    <div class="stats-grid desktop-grid">
        @foreach (var stat in Model.FullStats)
        {
            <div class="stat-item desktop-stat">
                <span class="stat-label">@stat.Label</span>
                <span class="stat-value">@stat.Value</span>
            </div>
        }
    </div>
</div>

Mobile View (MobilePlayerStats.cshtml)

@model MobilePlayerStatsViewModel

<div class="mobile-dashboard">
    <!-- Render only essential charts -->
    <div class="charts-grid mobile-charts">
        @foreach (var chart in Model.EssentialCharts)
        {
            @Html.Partial("_ChartCard", chart)
        }
    </div>

    <!-- Render 2x4 stats grid -->
    <div class="stats-grid mobile-grid">
        @foreach (var stat in Model.CompactStats)
        {
            <div class="stat-item mobile-stat">
                <span class="stat-label">@stat.Label</span>
                <span class="stat-value">@stat.Value</span>
            </div>
        }
    </div>
</div>

Bonus Optimization Tips #

• Cache Device Detection: Store the detected device type in a cookie or session to avoid re-parsing the user agent on every request.
• Reuse Partial Views: Use shared partials (like _ChartCard.cshtml) to avoid duplicating code between views.
• Test Edge Cases: Verify detection for devices that might report as desktop (e.g., iPad with desktop mode enabled) and adjust your logic if needed.

This approach ensures you're not just hiding content with CSS (which still loads all data) but actually serving smaller payloads and optimized layouts for each device type—fixing those mobile display issues for good.

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