Question

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

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

查看：

@{
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");
}

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

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

有人可以帮忙吗？

Answer 1

您可以尝试以下内容：

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

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

Answer 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剃刀在视图中获取浏览器屏幕宽度和高度

3 个答案: