MVC - Cannot seem to post to controller action using AJAX helper - asp.net-mvc

Question

I'm having issues posting a model to a controller action using the AJAX helper. The controller action doesn't get hit at all.
Code:
View:
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<ServiceNumberModel>" %>
<div id="ServiceNumberPanel">
<h1>
Based on your location we offer different plans</h1>
<% using (Ajax.BeginForm("AvailablePlans", "ServiceCheck", new AjaxOptions { UpdateTargetId = "AdslPlansPanel", HttpMethod = "Post" } ))
{ %>
<%=Html.ValidationSummary(true)%>
Your Phone Number:
<%=Html.TextBoxFor(m => m.HomePhoneNumber)%><br />
<%=Html.CheckBoxFor(m => m.BundleWithHomePhone)%>Bundle with Home Phone? <br/>
<input id="CheckServiceAvailabilityButton" type="submit" value="Check"/>
<% } %>
</div>
Model:
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
namespace ServiceCheck
{
public class ServiceNumberModel
{
[Required(ErrorMessage = "Please enter your phone number.")]
[RegularExpression(#"^[0]\d{9}$", ErrorMessage = "Please enter your phone number, including the area code")]
[DisplayName("Phone Number:")]
public string HomePhoneNumber { get; set; }
public bool BundleWithHomePhone { get; set; }
}
}
Controller:
[HttpPost]
public ActionResult AvailablePlans(ServiceNumberModel serviceNumberModel)
{
if (serviceNumberModel.BundleWithHomePhone)
return ReturnAvailableBundledPlans(serviceNumberModel);
return View("Index");
}
Generated HTML:
<div id="ServiceNumberPanel">
<h1>
Based on your location we offer different plans</h1>
<form action="/ServiceCheck/AvailablePlans" data-ajax="true" data-ajax-method="Post" data-ajax-mode="replace" data-ajax-update="#AdslPlansPanel" id="form0" method="post">
Your Phone Number:
<input data-val="true" data-val-regex="Please enter your phone number, including the area code" data-val-regex-pattern="^[0]\d{9}$" data-val-required="Please enter your phone number." id="HomePhoneNumber" name="HomePhoneNumber" type="text" value="" /><br />
<input data-val="true" data-val-required="The BundleWithHomePhone field is required." id="BundleWithHomePhone" name="BundleWithHomePhone" type="checkbox" value="true" /><input name="BundleWithHomePhone" type="hidden" value="false" />Bundle with Home Phone? <br/>
<input id="CheckServiceAvailabilityButton" type="submit" value="Check"/>
</form>
</div>
Behaviour:
When I click on submit, I get 'Resource cannot be found error':
The resource cannot be found. Description: HTTP 404. The resource you
are looking for (or one of its dependencies) could have been removed,
had its name changed, or is temporarily unavailable. Please review
the following URL and make sure that it is spelled correctly.
Requested URL: /ServiceCheck
Interestingly when I look at the source using firebug, I cannot see the form tags:
<div class="ExistingContent">
<h1>ServiceCheck</h1>
<div id="ServiceNumberPanel">
<div id="ServiceNumberPanel">
<h1> Based on your location we offer different plans</h1>
Your Phone Number:
<input id="HomePhoneNumber" type="text" value="" name="HomePhoneNumber" data-val-required="Please enter your phone number." data-val-regex-pattern="^[0]\d{9}$" data-val-regex="Please enter your phone number, including the area code" data-val="true">
<br>
<input id="BundleWithHomePhone" type="checkbox" value="true" name="BundleWithHomePhone" data-val-required="The BundleWithHomePhone field is required." data-val="true">
<input type="hidden" value="false" name="BundleWithHomePhone">
Bundle with Home Phone?
<br>
<input id="CheckServiceAvailabilityButton" type="submit" value="Check">
</div>
<div id="Div1">
</div>
</div>
Also, if I change the view to use the HTML helper it hits the controller without issue:
<div id="Div1">
<h1>
Based on your location we offer different plans</h1>
<% using (Html.BeginForm("AvailablePlans", "ServiceCheck"))
{ %>
<%=Html.ValidationSummary(true)%>
Your Phone Number:
<%=Html.TextBoxFor(m => m.HomePhoneNumber)%><br />
<%=Html.CheckBoxFor(m => m.BundleWithHomePhone)%>Bundle with Home Phone? <br/>
<input id="Submit1" type="submit" value="Check"/>
<% } %>
</div>
Please help!!!

Answer 1

I managed to find the issue.
In the master page I was using, which is shared across a number of applications, someone had added a rouge form:
<body>
<form id="form1" runat="server">
<uc1:header id="Header1" runat="server" />
<div class="ExistingContent">
<asp:contentplaceholder id="MainContent" runat="server" />
</div>
<uc2:footer id="Footer1" runat="server" />
</form>
</body>
This meant that I was trying to submit a form from within a form and the framework was defaulting to the parent.
Once removed, everything began to work as expected.