2012-04-18 10 views
0

私のウェブサイトで私はビットマップを動的に生成しており、ブラウザの幅と高さに従ってレンダリングする必要があり、ページにオーバーフローがないようにする必要があります。MVC3剃刀ブラウザ画面の幅と高さの表示

は私が成功した画像を作成し、それをレンダリングしますが、私は

ビューレンダリングブラウザが幅を取得する方法を知っていると、高さと画像のためのアクションに渡していないています

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

誰でも手助けできますか?

+0

.. 右 ? (*とそのハードコーディングされた値は無効です.. *)。 CSSを使って画像のサイズを変更するのが良い。 –

+0

ブラウザのサイズを変更すると、画像をレンダリングする必要があります。これはajaz呼び出しで行うことができます。実行時に作成されるマッピングのためにCSSを使用することはできません –

答えて

1

。 イメージ要素をページに追加してソースを変更するのではなく、単に関数内にイメージタグを生成し、それをページのdivに追加しました。私はハード(とにかくんUrl.Action @何()である)URL呼び出しをコード化し、これはここで の作品アクションへの呼び出し用としての私のコードです:あなたは、ユーザーが自分のブラウザのサイズを変更できることを理解

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

上記のヘルプはすべて役に立ちました。私は正しい方向に向かった。私はちょうど上の答えで提供されている例を得ることができませんでした –

0

は、あなたは、次のようなものを試してみてください。この

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

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

     }); 
</script> 
1

を行うには、AJAX要求を行うことができます。私はこの作業を取得するために管理している

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

アクションの呼び出しは、質問アクションのように2つのパラメータを渡す必要があります。メソッドイメージ(int width、int height) –