javascript MVC3 razor 在视图中获取浏览器屏幕宽度和高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10208560/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
MVC3 razor get Browser Screen Width and Height in View
提问by Andy Clark
In my website I am generating a Bitmap dynamically and it needs to be rendered according to the browsers width and height so there is no overflow on the page.
在我的网站中，我正在动态生成一个位图，它需要根据浏览器的宽度和高度进行渲染，因此页面上没有溢出。
I have successfully created an image and rendered it but I do not know how to get the browsers width and height and pass it to the action for the image render
我已经成功创建了一个图像并渲染了它，但我不知道如何获取浏览器的宽度和高度并将其传递给图像渲染的动作
View:
看法：
@{
ViewBag.Title = "Index";
}
<h2>Home</h2>
<br />
<img src="@Url.Action("Image", new { height = , width = })" alt="image" usemap="#clickMap" height="" width="" />
Controller:
控制器：
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");
}
I have put a jQuery function in a file called Browser.js in to get the screen height but I dont have a clue how to reference this:
我在一个名为 Browser.js 的文件中放置了一个 jQuery 函数来获取屏幕高度，但我不知道如何引用它：
function getWidth() {
return $(window).width();
}
Can anyone help?
任何人都可以帮忙吗？
回答by Micha?
You might try something like the following:
您可以尝试以下操作：
$("img-selector").attr("src", "@Url.Action("Image")" + "?height=" + getHeight()
+ "&width=" + getWidth());
回答by Andy Clark
I have managed to get this working. Rather than adding an image element to the page and changing the source I have simply generated an image tag in a function and added that to a div in the page. as for the call to the action I hard coded the url call (which is what @Url.Action() does anyway) and this works Here is my code:
我已经设法让这个工作。我没有向页面添加图像元素并更改源，而是简单地在函数中生成了一个图像标记并将其添加到页面中的 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>
回答by Jayanga
you can do a ajax request to do this
你可以做一个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>
