MVC razor 获取 div 宽度并检查条件

Question

我有一个应该响应的视图。我的模型有两个属性 leftPosition 和 topPosition。现在我想要如果我的外部 div 的宽度小于 714，topPosition 和 leftPosition 设置为 0，否则它们将具有以下值他们从模型中收到。但是如何检查 mvc razor 语法中的外部 div 宽度。我尝试使用 javascript 并设置 mvc razor 变量，但我发现它不可能做 asp.net 是服务器端和 javascript 这样的事情是客户端。

mvc 局部视图

@foreach (var item in Model)
{
    if (Request.Browser.ScreenPixelsWidth < 1000)
     {
        {item.TopPosition = 0;}
         {item.LeftPosition = 0;}
     }
      Html.RenderPartial(@item.TileName, @item);
    }

我想使用 ("#desktopTilesContiner").Width 之类的东西，而不是这个 Request.Browser.ScreenPixelsWidth，我可以在我的条件下使用它。在我的图像中，我有不同的图块 - 实验室、病理学、程序、药物.这些是根据它们的顶部和左侧位置设置的，但在移动设备上我只希望它们进入一列而忽略它们的顶部和左侧位置。类似于图像二。

Answer 1

您的 Request.Browser.ScreenPixelsWidth < 1000 可以通过 css 媒体查询处理，如下所示：

@media all and (max-width: 1000px) { *content here* }

我还建议不要使用position: absolute（因此不需要整个顶部/左侧定位）并让 DOM 元素自然流动。