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

Posted

技术标签:

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

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

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

查看:

@
ViewBag.Title = "Index";

<h2>Home</h2>
<br />
<img src="@Url.Action("Image", new  height = , width = )"  usemap="#clickMap"   />

控制器:

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 【参考方案1】:

您可以尝试以下方法:

$("img-selector").attr("src", "@Url.Action("Image")" + "?&comcopy">对 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?&\" 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>

【讨论】:

以上是关于MVC3 razor 获取视图中的浏览器屏幕宽度和高度的主要内容,如果未能解决你的问题,请参考以下文章

MVC3 Razor - 模型和视图

mvc3中关于Razor视图中的及页面区别,以及在啥情况下用哪个页面,最好能有实例。

为啥 ASP.NET MVC3 区域和 Razor 视图会产生此错误?

在 MVC3 中登录 Razor 视图

asp.net mvc3.0中视图引擎razor和ASPX可以交互使用吗

带有 Razor 的 MVC3 - 避免在部分视图上定义多个 javascript 函数