Ajax.BeginForm - need two forms to get it work

StackOverflow https://stackoverflow.com/questions/21251749

  •  30-09-2022
  •  | 
  •  

Question

my question is simple.

This code works fine, like expected. Submitting form causes div update. But if I delete the first (empty) form, it won't work anymore. It's needed to be there to work well. Why? It's really annoying for me. Because I can't solve it.

<% using (Ajax.BeginForm(new AjaxOptions { })) { }%>

<% using(Ajax.BeginForm("UpdateForm", new AjaxOptions{UpdateTargetId="textEntered"})) { %>
 <%= Html.TextBox("textBox1")%>  
 <input type="submit" value="Submit"/><br />
 <span id="textEntered">Nothing Entered</span>
<% } %>

Hope you will help me. Cheers

EDIT: added full code

view:

<head runat="server">
<title>Index</title>
  <script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
  <script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
</head>
<body>
 <form runat="server" id="form1">

 <p>
  Page Rendered: <%= DateTime.Now.ToLongTimeString() %>
 </p>
 <span id="status">No Status</span>
 <br />   
 <%= Ajax.ActionLink("Update Status", "GetStatus", new AjaxOptions{UpdateTargetId="status" }) %>
 <br /><br />

 <% using (Ajax.BeginForm(new AjaxOptions { })) { }%>

 <% using(Ajax.BeginForm("UpdateForm", new AjaxOptions{UpdateTargetId="textEntered"})){ %>
  <%= Html.TextBox("textBox1")%>  
  <input type="submit" value="Submit"/><br />
  <span id="textEntered">Nothing Entered</span>
 <% } %>

</form>
</body>

controller:

public class HomeController : Controller
{

public ActionResult Index()
{
 return View();
}

public string GetStatus()
{
 return "Status OK at " + DateTime.Now.ToLongTimeString();
}

public string UpdateForm(string textBox1)
{
 if (textBox1 != "")
 {
    return "You entered: \"" + textBox1.ToString() + "\" at " + DateTime.Now.ToLongTimeString();
 }
 return String.Empty;
 }
}

but trust me, the code should work fine, it's made by tutorial.

EDIT2: okey, now it works according to comments. But, if there can't be form in another form, why it works with 3 forms?:) there is one "main" form, and my ajax form. doesn't work. if in "main" form are two ajax forms, it works. Huh?

Was it helpful?

Solution

Try to remove <form runat="server" id="form1"> and </form> from your code. Nested forms are not allowed in HTML.

I could not reproduce the same issue locally, so in order to investigate why exactly that happens, look at HTML source, debug your HTTP traffic with Fiddler, try that in different browsers etc. I suspect that the browser in your case might recognise the second form as a closing tag for the first one, and that's why the third form worked. You can see that if you explore DOM elements tree created by your browser.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top