MVC3 razor 获取视图中的浏览器屏幕宽度和高度答案

【问题标题】：MVC3 razor get Browser Screen Width and Height in ViewMVC3 razor 获取视图中的浏览器屏幕宽度和高度
【发布时间】：2012-04-18 11:38:32
【问题描述】：

在我的网站中，我动态生成一个位图，它需要根据浏览器的宽度和高度进行渲染，因此页面上没有溢出。

我已成功创建并渲染了图像，但我不知道如何获取浏览器的宽度和高度并将其传递给图像渲染操作

查看：

@{
ViewBag.Title = "Index";
}
<h2>Home</h2>
<br />
<img src="@Url.Action("Image", new { height = , width = })" alt="image" usemap="#clickMap" height="" width="" />

控制器：

public ActionResult Image(int width, int height)
{
    MemoryStream stream = new MemoryStream();
    var image = DynamicImages.ImageGeneration.GetWorkflow(width, height);

    image.Save(stream, ImageFormat.Png);

    return File(stream.ToArray(), "image/png");
}

我已经在一个名为 Browser.js 的文件中放置了一个 jQuery 函数来获取屏幕高度，但我不知道如何引用它：

function getWidth() {
    return $(window).width();
}

谁能帮忙？

【问题讨论】：

您知道用户可以调整其浏览器的大小.. 对吗？（然后那些硬编码的值将无效..）。最好使用 CSS 来调整图像大小..
如果您的用户调整浏览器的大小，则必须渲染图像，我可以在 ajaz 调用中执行此操作。由于映射也将在运行时创建，因此无法使用 CSS

标签： javascript jquery asp.net-mvc-3 view razor

【解决方案1】：

您可以尝试以下方法：

$("img-selector").attr("src", "@Url.Action("Image")" + "?height=" + getHeight() 
    + "&width=" + getWidth());

【讨论】：

对 Action 的调用需要传递 2 个参数，如问题 action Method Image(int width , int height) 中所示

【解决方案2】：

我已经设法让它工作了。我没有在页面中添加图像元素并更改源，而是在函数中生成了一个图像标签并将其添加到页面中的 div 中。至于对操作的调用，我对 url 调用进行了硬编码（无论如何，这都是 @Url.Action() 所做的）并且这行得通这是我的代码：

@{
ViewBag.Title = "Index";
}
<h2>Home</h2>
<br />
<script type="text/javascript">

    $(document).ready(function () {
        renderWorkflow();
    });

    function renderWorkflow() {
        var width = $(window).width();
        var height = $(window).height();
        var imageLink = "<img id=\"workflow\" src=\"/Home/WorkflowImage?width=" + width + "&height=" + height + "\" alt=\"Workflow Image\" />";

        $("#workflowImage").html(imageLink);
    }

</script>
<div id="workflowImage">
    <p>Java script must be enabled in order to render the workflow</p>
</div>
<map id="clickMap" name="clickMap">
</map>

【讨论】：

以上所有帮助都很有用，并引导我朝着正确的方向前进。我只是无法获得上述答案中提供的示例

【解决方案3】：

你可以做一个ajax请求来做到这一点

<script type="text/javascript">
  var Height = //get height
  var Width = // get width

 $.get('@Url.Action("Image", "Controller")', { width: width, height: Height}, function (data) {              

        });
</script>

【讨论】：