Html 如何在MVC5中为不同的设备显示不同的数据

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

因此，在大型设备上，我想以表格的形式显示，在移动设备上，我想显示一个自定义的“列表视图”

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

<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>

@foreach（模型中的var emp）
@foreach（模型中的var emp）

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

---

提前谢谢。

也许你可以这样做：

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

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>

变量数据=$（窗口）.width（）>720）？真：假；
$.post（@Url.Action（“SetDisplayMode”，“$ControllerNameHere”），{isLarge:data}）；
@foreach（模型中的var emp）
if（Web.GlobalVars.IsLarge）{}else{}

---

将$CONTROLLERNAME此处更改为您的控制器名称

可能您可以执行以下操作：

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

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>

变量数据=$（窗口）.width（）>720）？真：假；
$.post（@Url.Action（“SetDisplayMode”，“$ControllerNameHere”），{isLarge:data}）；
@foreach（模型中的var emp）
if（Web.GlobalVars.IsLarge）{}else{}

---

将$CONTROLLERNAME此处更改为您的控制器名称

也许我应该补充一下，布局之间的差异将包括移动设备上的功能有限和完全不同的布局，因此我不能只使用引导和“响应”功能CSS功能。也许我应该补充一下，布局之间的差异将包括移动设备上的有限功能和完全不同的布局，这就是为什么我不能只玩引导和“响应”CSS功能。我实际上是用其他属性、“禁用”等来做这件事的，不敢相信我没有想到，我们将测试一些状态更改、重新调整大小等，看看其他人怎么说，如果它在几个小时内仍然是最佳解决方案，我将接受作为答案，非常感谢。这似乎是您可以在这里执行的最简单的操作，但它应该工作。不幸的是，它不工作，您如何“检查显示大小”从服务器端…你不能真的…更新我的答案。尝试类似的方法我实际上对其他属性、“禁用”等进行了此操作，真不敢相信我没有想到这一点，将使用一些状态更改、重新调整大小等进行测试，看看其他人怎么说，如果它在几个小时内仍然是最佳解决方案，我会接受你的回答，非常感谢。这似乎是你在这里能做的最简单的事情，但它应该能工作。不幸的是，它不能工作，你怎么能从服务器端“检查显示大小”…你不能真的…更新我的答案。试试这样的