4

我正在为一个项目使用 Asp.Net MVC3。

在其中一个页面中，我使用的是 MS Charts。在视图中，我有一个显示图表的图像，如下所示：

<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() 操作并呈现图表。但是，当我单击任何 CheckBox 时，RenderCharts() Action会被调用两次。

我无法理解这个问题。我创建了一个示例应用程序，可以从这里下载https://www.dropbox.com/s/ig8gi3xh4cx245j/MVC_Test.zip

任何帮助，将不胜感激。提前致谢。

4

3 回答 3

2

这似乎与 Internet Explorer 有关。使用您的示例应用程序，在 Google Chrome 和 Firefox 中一切正常，但在使用 IE9 时，回发时有两个 Action 请求。

使用网络选项卡上的 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 回答