4

プロジェクトにAsp.NetMVC3を使用しています。

ページの1つで、MSチャートを使用しています。ビューには、次のようなグラフを示す画像があります。

<img src="@Url.Action("RenderCharts", "Home", new
                 {
                     XAxisColor = ViewBag.XAxisColor,
                     YAxisColor = ViewBag.YAxisColor,

                 })" alt="Charts" runat="server"  />

チャート軸の色を変更するために使用される2つのチェックボックスがあります。チェックボックスをクリックすると、ページが送信され、チェックボックスのステータスが保存され、そのチャートに基づいてレンダリングされます。

bool XAxisColor = (@ViewBag.XAxisColor) ?? true;
bool YAxisColor = @ViewBag.YAxisColor ?? false;

@Html.CheckBox("chkXAxisColor", XAxisColor, new { @Id = "chkXAxisColor", 
                       onClick = "this.form.submit();" })
        X Axis Color

@Html.CheckBox("chkYAxisColor", YAxisColor, new { @Id = "chkScatter", 
                      onClick = "this.form.submit();" })
        Y Axis Color

ページが最初に読み込まれると、RenderCharts（）アクションが呼び出され、グラフがレンダリングされます。しかし、チェックボックスのいずれかをクリックすると、RenderCharts（）アクションが2回呼び出されます。

私はこの問題を理解できませんでした。ここからダウンロードできるサンプルアプリケーションを作成しましたhttps://www.dropbox.com/s/ig8gi3xh4cx245j/MVC_Test.zip

どんな助けでもいただければ幸いです。前もって感謝します。

4

3 に答える 3

2

これはInternetExplorerと関係があるようです。サンプルアプリケーションを使用すると、Google ChromeとFirefoxの両方ですべてが正常に機能しますが、IE9を使用する場合、ポストバックに2つのアクションリクエストがあります。

[ネットワーク]タブのF12開発ツールを使用すると、中止されたように見えるRenderChartsへの最初のリクエストが表示されます。

ネットワークアクティビティグラフのキャプチャ

真ん中の（中止された）行は、おそらく、あなたが見ている追加の要求です。なぜこれが起こるのか、私にはわかりません！

于 2012-06-16T09:50:12.977 に答える
2

ついに答えを得た。問題は

runat="server"

Imgタグで。

runatを削除すると、問題が修正されました。

于 2012-06-26T09:35:52.147 に答える
0

代わりにJQueryを少し使用するだけで、次の方法でIEの問題を解決できます。いくつかの可能な利点...

  1. クロスブラウザの問題を解消します。
  2. これは目立たないアプローチです（ビューにjavascriptとHTMLを混在させないでください）。
  3. ajaxを介して画像を更新できます。

スクリプトフォルダ（「chart.js」など）に新しいファイルを作成します。このファイルは、ドキュメントレディ関数のチェックボックスのクリックイベントに匿名関数をアタッチするだけです。明らかに、ページにもスクリプト参照を含める必要があります。

$(document).ready(function () {
    // Attach a function to the click event of both checkboxes
    $("#chkXAxisColor,#chkScatter").click(function () {
        // Make an ajax request and send the current checkbox values.
        $.ajax({
            url: "/Home/RenderCharts",
            type: "GET",
            cache: false,
            data: {
                XAxisColor: $("#chkXAxisColor").attr("checked"),
                YAxisColor: $("#chkScatter").attr("checked")
            },
            success: function (result) {
                alert(result);
                $("#chart").attr("src", result);
            }
        });
    });
});

何よりも、あなたはあなたのビューからjavascriptを排除することができます:)

...
<div style="margin: 2px 0 2px 0">
    @Html.CheckBox("chkXAxisColor", XAxisColor, new { @Id = "chkXAxisColor" })
    X Axis Color
    @Html.CheckBox("chkYAxisColor", YAxisColor, new { @Id = "chkScatter" })
    Y Axis Color            
</div>
...

これはもちろん、IEの問題を排除する非常に基本的な例ですが、画像を更新する方法や読み込み中のgifを表示する方法など、あと数行でさらに凝ったものにすることができます。

うまくいけば、それはあなたにとって実行可能な解決策です！

于 2012-06-16T19:28:52.123 に答える