html - 如何在 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;}
}

像这样添加到 Controller

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

在你的 View 中添加:

<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 更改为您的 Controller 名称