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更改为您的控制器名称

如何在MVC 5中为不同设备显示不同的数据

1 个答案: