MVC: Form not rendering in partial view - asp.net-mvc

Question

I have a form with tabs. Subordinate to each tab is a partial view.
When the user submits to save changes, I want to call a method for that partial view, so for the partial view I put in <% using (Html.BeginForm(...) %>. But this gets ignored and clicking submit will call the method associated with the container view instead. Why is this, and how do I get this to work?
The View looks like;
<%# Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Employee.Master" Inherits="System.Web.Mvc.ViewPage<SHP.WebUI.Models.HolidayRequestViewModel>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
HolidayRequest
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="EmployeeContent" runat="server">
<% using (Html.BeginForm()) {%>
<%: Html.AntiForgeryToken() %>
<h2>Holiday Request</h2>
<p>You have <%: Html.DisplayFor(model => model.DaysAvailableThisYear) %> days left annual leave for this year
and <%: Html.DisplayFor(model => model.DaysAvailableNextYear) %> days left for next year.</p>
<p>If your request is approved and exceeds the number of days left, then those extra days will not be paid.</p>
<div id="tabs">
<ul>
<li>Approver</li>
<li>Single Date</li>
<li>Date Range</li>
</ul>
<div id="tabs-1">
<% Html.RenderPartial("GetApproverTab", Model); %>
</div>
<div id="tabs-2">
<% Html.RenderPartial("GetSingleDateTab", Model); %>
</div>
<div id="tabs-3">
<% Html.RenderPartial("GetDateRangeTab", Model); %>
</div>
</div>
<%: Html.HiddenFor(x => x.EmployeeId) %>
<% } %>
</asp:Content>
The partial view looks like;
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<SHP.WebUI.Models.HolidayRequestViewModel>" %>
<% using (Html.BeginForm("GetSingleDateTab", "Employee", FormMethod.Post, new { id = "frmSingleDate" }))
{ %>
<p>Enter your day or part day of Annual Leave here.</p>
<table>
<tr>
<td align="right">Date:</td>
<td><%: Html.EditorFor(x => x.SingleDate) %></td>
</tr>
<tr>
<td align="right">Morning Only:</td>
<td><%: Html.CheckBoxFor(x => x.MorningOnlyFlag) %></td>
</tr>
<tr>
<td align="right">Afternoon Only:</td>
<td><%: Html.CheckBoxFor(x => x.MorningOnlyFlag) %></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="Save" /></td>
</tr>
</table>
<% } %>
and the controller looks like;
#region Employee Holiday Request
public ActionResult HolidayRequest()
{
return View(new HolidayRequestViewModel(Employee.GetLoggedInUser().EmployeeId));
}
[HttpPost] // This is the method that gets executed
public ActionResult HolidayRequest(HolidayRequestViewModel hrvm)
{
if (ModelState.IsValid)
{
hrvm.Update();
return View(new HolidayRequestViewModel(hrvm.EmployeeId));
}
return View(hrvm);
}
[HttpPost] // This is the method I want to get executed.
public ActionResult GetSingleDateTab(HolidayRequestViewModel hrvm)
{
if (ModelState.IsValid)
{
hrvm.Update();
return View(new HolidayRequestViewModel(hrvm.EmployeeId));
}
return View("GetSingleDateTab", hrvm);
}
#endregion

Answer 1

You can't have nester forms in html.

Answer 2

I discover an unbelievable solution. Just insert a <script> tag above the <form> tag.
<script type="text/javascript">
// don't remove <script> tag
</script>
<form ....