如何在 MVC 5 中为不同设备以不同方式显示数据

Question

令人惊讶的是，经过多次搜索后，我找不到解决方案或类似问题，这可能是一个大脑放屁的时刻。我想使用媒体查询在不同设备上以不同方式显示数据。

所以在大型设备上我想以表格形式显示，在移动设备上显示一个自定义“listview”强>。

我可以通过在模型中创建 2 个循环来实现这一点，如下所示：

<div class="row display-large">
    <!--TABLE HERE-->
    @foreach (var emp in Model)
    <!--EACH ROW-->
</div>

<div class="row display-small">
    @foreach (var emp in Model)
    <!--EACH CUSTOM LIST ITEM-->
</div>

然后使用媒体查询，我可以显示/隐藏相关的查询（显示-小/大）。 但是我不能忍受自己这样做，它会增加页面大小并且只是非常糟糕的做法，所以我的问题是如何在不复制 HTML 的情况下实现这一点。

提前致谢。

Answer 1

也许你可以这样做：

在服务器端的某处创建全局变量，例如

public static class GlobalVars
{
     public static bool IsLarge {get; set;}
}

像这样添加到控制器中

[HttpPost]
public ActionResult SetDisplayMode(bool isLarge)
{
    GlobalVars.IsLarge = isLarge;
    return new HttpStatusCodeResult(System.Net.HttpStatusCode.OK);
}

在你看来添加：

<script>
 var data = $( window ).width() > 720)? true : false;
 $.post("@Url.Action("SetDisplayMode", "$ControllerNameHere")", { isLarge: data});     
</script>

<div class="row display-small">
    @foreach (var emp in Model)
    if(Web.GlobalVars.IsLarge) { <!--EACH ROW-->} else { <!--EACH CUSTOM LIST ITEM--> }
</div>

将 $ControllerNameHere 更改为您的控制器名称