1

FileStreamResult（またはFileResult）メソッドを使用して、（コントローラーアクションからの）かみそりビューページにグラフを表示していますが、これは期待どおりに機能します。

ただし、html要素をクリックした場合にのみグラフを表示できるのではないかと思います。

たとえば、要素をクリックして、モーダルポップアップでグラフを表示します。

Jqueryを使用して表示するモーダルを取得できます...ただし、チャートをdivに既にロードしている場合に限ります。

（パフォーマンス上の理由から）グラフなしでページを読み込み、クリックしたときにのみグラフを生成/読み込みしたいのですが。

なんらかのAjax呼び出しが必要だと思います...しかし、続行する方法については少し行き詰まっており、グーグルは有用なものを何も返しませんでした（写真のライトボックスのみ）

擬似コード：

HTML：

<img src='small chart icon.jpg' alt='click me to see chart' id='showchart'/>
<div>
    rest of page goes here...
</div>

C＃：

public FileStreamResult GetChart(){
    //generate any chart
    return FileStreamResult(newchartstream, "image/png");
}

JS：

<script>
$(document).ready(function(){
    $('#showchart').click(function(){
        //make ajax call to generate chart
        //show in modal with "close" button
        //OR
        //open a new page as a modal?
    });
});
</script>

編集

明確化：

コントローラは、多くの計算の結果といくつかの「要約」行（合計、平均など）を含むViewModel（EF4モデルから）を生成します

ビューは結果（ViewModel）をテーブルとして表示します。

要件：

要約行の1つをクリックすると、その要約行のグラフを表示するモーダルウィンドウが開きます。

2つの理由から、ViewModelのパラメーターを送信して最初から再生成する（すべての計算を再度実行するなど）ことを避けたい

1）バックエンドデータベースの数値が変更されている可能性があります...そのため、グラフには表に表示されている内容が反映されていません。

2）計算には時間がかかります！

また、チャートを常にロードしてjqueryでhide（）show（）を実行するのではなく、行がクリックされた場合にのみチャートを生成したいと思います。

ajax呼び出しについて考えましたが、画像を返す方法や、新しいページを開く方法がわかりません。

Url.Action（）メソッドで複雑なモデルを渡す方法がわかりません。

キャッシュが最良のオプションであると考え、クリックメソッドで新しいウィンドウの「昔ながらの」JavaScriptを呼び出し、パラメータを渡してキャッシュからオブジェクトを取得しますか？

4

2 に答える 2

0

いくつかの違いの質問が1つに混在しています。それぞれを1つの質問に分割する必要があります。質問のタイトルとして、-AJAXによる画像の読み込み-以下のコードスニペットを使用できます。

HTML：

<div id="chartholder"></div>
<a id="showchart">Show the chart</a> <!-- or any element else you want to fire show event -->

JS：

$(document).ready(function(){
    $("#showchart").click(function(){
        // Put your controller and action (and id if presented) below:
        var file = "/YourControllerToGetChart/GetChart/id"
        $("<img />").attr("src", file).load(function () {
            $(this) // the loaded image
                .css({"some-css-you-want":"some-value"})
                .appendTo($("#chartholder")); // fixed syntax
        });
    });
});

ご不明な点がある場合や、説明が必要な場合、またはCSSdiv id="chartholder"を使用してモーダルとして表示する方法を知りたい場合はお知らせください。乾杯。

于 2011-09-25T07:03:50.373 に答える
0

あなたにはそれをする多くの方法があります、しかしこれが私がすることです。

1 /適切なsrcを持つタグを返すアクションを作成します（コントローラーの名前がChartsControllerであると想定します）。

    public ActionResult GetImage(int chartId = 0)
    {
        var image = @"<img id='chart' src='" + Url.Action("GetChart", new {controller = "Charts", chartId = chartId}) + @"'/>";
        return this.Content(image);
    }

2 /あなたの見解では、チャートの内部にimgを含むモーダルのコンテンツ（jQuery-uiのように）を含むdivがどこかにあると思います。

<div id="modal-div">
    <div id="chart-div"></div>
</div>

3 /すべての行について、「GetImage」アクションを呼び出し、「chart-div」をに置き換えるAjaxリンクを作成する必要があります。「OnBegin」Javascript関数を指定できます。これは、モーダルを起動するためのコードを配置する場所です。

@Ajax.ActionLink("Show me the chart!", "GetImage", "User", new { chartId = @Model.Rows[i]}, new AjaxOptions()
                                                                                        {
                                                                                            HttpMethod="GET",
                                                                                            OnBegin = "showModalWindow",
                                                                                            UpdateTargetId="modal-div",
                                                                                            InsertionMode = InsertionMode.Replace
                                                                                        });

Ajaxリンクをクリックするたびに、モーダルが起動され、内部が置き換えられます（実際、モーダルのすべてのコンテンツが置き換えられます）。Ajaxリンクを機能させるには、「Scripts/jquery.unobtrusive-ajax.js」と「Scripts/jquery.validate.unobtrusive.js」を含めることを忘れないでください。

于 2011-09-26T20:20:15.123 に答える