MVC: Form not rendering in partial view

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.Mv开发者_开发技巧c.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><a href="#tabs-1">Approver</a></li>
            <li><a href="#tabs-2">Single Date</a></li>
            <li><a href="#tabs-3">Date Range</a></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

You can't have nester forms in html.

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 ....