Geek Answers Handbook

Is MVC action called twice?

I am using Asp.Net MVC3 for a project.

On one of the pages I use MS Charts. In the view, I have an image that shows a diagram as follows:

<img src="@Url.Action("RenderCharts", "Home", new { XAxisColor = ViewBag.XAxisColor, YAxisColor = ViewBag.YAxisColor, })" alt="Charts" runat="server" />

I have 2 CheckBoxes that are used to change the colors of the axes of charts. When you click on the checkmark, the page is sent and the status of the flag is saved, and based on this diagram it is displayed:

 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

When the page first loads, a call to RenderCharts () is called and a chart is displayed. But when I click any of the CheckBox, the RenderCharts () Action gets twice> .

I could not understand this problem. I created a sample application that can be downloaded here https://www.dropbox.com/s/ig8gi3xh4cx245j/MVC_Test.zip

Any help would be greatly appreciated. Thanks in advance.

+4
source share
3 answers

Finally got an answer. The problem was

 runat="server"

in the Img tag.

Removing runat fixes the problem.

+2
source

This is similar to Internet Explorer. Using your sample application, everything works fine in both Google Chrome and Firefox, but when using IE9 there are two action requests in postback.

Using the F12 developer tools on the network tab, it shows the initial RenderCharts request, which seems to have been interrupted:

Capture of Network Activity graph

The line (interrupted) in the middle, I suspect, is the additional request that you see. Why this is happening, I do not know!

+2
source

I can fix the IE problem as follows by simply using a bit of jQuery. Several possible benefits ...

  • This fixes the problem between browsers.
  • This is an unobtrusive approach (not mixing javascript and HTML in the view).
  • You can refresh the image using ajax.

Create a new file in the scripts folder (for example, "chart.js") that simply attaches an anonymous function to the events of the click of your flags from the document’s ready function. You will obviously also need to include a script link in your page:

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

Best of all, you can exclude javascript from your view :)

 ... <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> ...

This, of course, is a very simple example that fixes the IE problem, but you can get interest from there in terms of how you update the image +, show the boot gif, etc. with only a few lines.

Hope this is the right solution for you!

0
source

More articles:


All Articles