Entering Value in Partial View and Posting it back to Main Controller in ASP.NET MVC 5

Question

I have a Main ViewModel class. This Main ViewModel contains a "partial" class.

The "partial" class has a "partial" view.

In my controller, I am using the "Main ViewModel" class and initializing a "Main View". This "Main View" contains a "partial view" which is based of the "partial class".

My problem is, when I edit/enter values in this partial view controls and then submit the "Main View" back to the controller, the newly entered values are not coming in. I was expecting the data to be bound to the "Partial View" when I called it from the main view like.

@Html.Partial("_TestPartial", Model.SomeTestInfo)

Am I missing something ? Please advise.

Here is my main controller.

public class TestController : Controller
{
    // GET: Test
    public ActionResult Index()
    {
        TestViewModel testViewModel = new TestViewModel();

        return View(testViewModel);
    }

    [HttpPost]
    public ActionResult Index(TestViewModel tvm)
    {
        string name = tvm.SomeTestInfo.TestName;
        int age = tvm.SomeTestInfo.TestAge;

        return View(tvm);
    }
}

Here is my ViewModel and the Partial Classes.

public class TestViewModel
{
    public TestPartial SomeTestInfo { get; set; }

    public TestViewModel()
    {
        SomeTestInfo = new TestPartial();
    }
}

public class TestPartial
{
    public string TestName { get; set; }
    public int TestAge { get; set; }

    public TestPartial()
    {

    }
}

Here is my Partial View

@model PartialViewEditTest.Models.TestPartial


@using (Html.BeginForm()) 
{
    
    <div class="form-horizontal">
        <h4>TestPartial</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.TestName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.TestName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.TestName, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.TestAge, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.TestAge, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.TestAge, "", new { @class = "text-danger" })
            </div>
        </div>

    </div>
}


@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

=================================

Here is my main view which calls the partial view and submits back to the controller.

===================

    @model PartialViewEditTest.Models.TestViewModel

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>


@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
    
    <div class="form-horizontal">
        <h4>TestViewModel</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })

        @Html.Partial("_TestPartial", Model.SomeTestInfo)

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

===================