ASP.NET MVC Beta Ajax upgrade problem

Question

I been waiting for sometime now to bring my Asp.net Preview 4 project up to snuff, totally skipping Preview 5 just because I knew I would have some issues.

Anyhow, here is the question and dilemma.

I have a few areas on the site which I have an ajax update type panel that renders content from a view using this technique found here. AJAX Panels with ASP.NET MVC

This worked fine in preview 4 but now in the beta I keep getting this ..

Sys.ArgumentNullException: Value cannot be null Parameter name eventObject

It has been driving me nuts...

My code looks like this

<% using (this.Ajax.BeginForm("ReportOne", "Reports", null, new AjaxOptions { UpdateTargetId = "panel1" }, new { id = "panelOneForm" })) { }  %>
<div class="panel" id="panel1"><img src="/Content/ajax-loader.gif" /></div>
<script type="text/javascript">
  $get("panelOneForm").onsubmit();
 </script>

so basically what its doing is forcing the submit on the form, which updates panel1 with the contents from the view ReportOne.

What am I missing? Why am I getting this error? Why did they go and change things? I love MVC but this is making me crazy.

Answer 1

Hi there,

I believe that calling someFormElement.onsubmit() simply invokes the event handlers registered for that event. To properly submit the form you should call someFormElement.submit() (without the "on" prefix).

I don't think we changed anything in the AJAX helpers' behavior between ASP.NET MVC Preview 4 and ASP.NET MVC Beta.

Thanks, Eilon

Answer 2

Unfortunately, just calling submit() won't fire the onsubmit event so the MVC Ajax script won't run. When the browser calls onsubmit() for you (because the user clicked the submit button), it actually provides a parameter called event (which you can see if you look at the Html outputted by the Ajax helper).

So, when you call onsubmit() manually, you need to provide this parameter (because the MVC Ajax code requires it). So, what you can do is create a "fake" event parameter, and pass it in to onsubmit:

<% using (this.Ajax.BeginForm("ReportOne", "Reports", null, new AjaxOptions { UpdateTargetId = "panel1" }, new { id = "panelOneForm" })) { }  %>
<div class="panel" id="panel1"><img src="/Content/ajax-loader.gif" /></div>
<script type="text/javascript">
  $get("panelOneForm").onsubmit({ preventDefault: function() {} });
</script>

The important part is the { preventDefault: function() {} } section, which creates a JSON object that has a method called "preventDefault" that does nothing. This is the only thing the MVC Ajax script does with the event object, so this should work just fine.

Perhaps a longer term fix would be if the MVC Ajax code had a check that simply ignored a null event parameter (wink @Eilon :P)

Answer 3

Having some irritating problems relating to this issue. Hope someone here can help me out.

var event = new Object();
function refreshInformation(){
document.forms['MyForm'].onsubmit({preventDefault: function(){} });
}

This is my current code, it works fine for updating the the form. Problem is the "var event" disrupts all other javascript events, if I have for example this:

<img src="myimg.gif" onmouseover="showmousepos(event)" />

its not the mouse event that's sent to the function, instead it's my "var event" that I must declare to get the onsubmit to function properly.

When using only

onsubmit({preventDefault: function(){} }

without the "var event" I get the

Sys.ArgumentNullException: Value cannot be null Parameter name eventObject

I've also tried using

submit()

this does a full postback and totally ignores the ajaxform stuff...at least in my solution.

Hmm...I realize this might be a little confusing, but if someone understands the problem, it would be great if you had a solution as well. =) If you need more info regarding the problem please just ask and I'll try to elaborate som more.