Question

我正在使用Asp.Net MVC3进行项目。

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

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

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

我有2个CheckBoxes，用于更改Chart Axes Colors。单击该复选框后，将提交页面并存储复选框状态，并根据该图表进行渲染：

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（）Action 并呈现图表。但是当我点击任何一个CheckBox时， RenderCharts（）Action 会被调用两次。

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

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

Answer 1

这似乎与Internet Explorer有关。使用您的示例应用程序，Google Chrome和Firefox都可以正常运行，但在使用IE9时，回发上有两个操作请求。

使用网络选项卡上的F12开发人员工具，它显示对RenderCharts的初始请求，该请求似乎已中止：

Capture of Network Activity graph

我怀疑，中间的（中止）线是你看到的额外请求。为什么会这样，我不知道！

Answer 2

终于得到了答案。问题是

runat="server"

在Img标签中。

删除 runat 修复了问题。

Answer 3

我可以通过简单地使用一些JQuery来消除IE问题。一些可能的优势......

它消除了跨浏览器问题。
这是一种不显眼的方法（不在视图中混合使用javascript和HTML）。
您可以通过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等只有几行。

希望这对你来说是一个可行的解决方案！

MVC动作被调用两次？

3 个答案: