ASP .NET MVC, Unknown runtime error in IE (nested forms)

Question

Hello!

i have view which looks something like this :

<% using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "someDiv", HttpMethod = "Post"))
   {%>

 <%= Ajax.ActionLink("Add new", "AddNewItem", new AjaxOptions { UpdateTargetId = "divAddNewItem", HttpMethod = "Get" })%>

<div id="divAddNewItem">
</div>

  <input type="submit" value="Create" />

<% } %>

"AddNewItem" action returns partial view, which is rendered to divAddNewItem, AddNewItem view code looks like this one :

<% using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "divAddNewItem", HttpMethod = "Post"))
   {%>

       <input type="submit" value="Add" />
<% } %>

in this case, after clicking "Add new" button IE will give exception (unknown runtime error), while chrome and firefox will work. i made some research, and it seems like nested form tags causing the problem.

would be glad to hear any possible hint or advice in solving this problem.

Thank You !

Answer 1

Nested forms are illegal in HTML. You can't do it. IE tends to react worse than Firefox, but you should not do it in either browser.

There can be several forms in a single document, but the FORM element can't be nested.

Answer 2

I prefer, in instances like this, to make a div which looks like a form (or even a dialog box a la DHTML) and wire up an ajax post of these "form" elements to an onclick event of the button. It's obviously a lot more work, but it's gotten me out of a lot of jams.