Question

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:

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

Can anyone help?

Answer 1

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:

@{
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>