MVC4 : Sending child Partial view values to controller?

Question

First of all I must say this I am new to MVC4 and developing this app and learning MVC4 simultaneously :).

In this app, Below is the parent view where 3 partial views are rendered also there is one button:

[code]
 <td id="track">@Html.Partial("_Track",Model)</td><br>
<td id="tech">
 <div id="Technologies"> @Html.Partial("_Technology",Model)
</div></td></tr> 
..
[some code]
..

<td class="subtopic">
 <div class="subtopiclist" id="subque">@Html.Partial("_Subtopics",Model)</div><br>
 <input type="Submit" value="Fetch Interview Questions" name="Fetch" id="Fetch" />
           </td>

Partial View1 (it contains dropdownlist) :

@model MvcApplication3.Models.CommonWrapper

@using (Ajax.BeginForm("SelectTrack", "Home", new AjaxOptions { UpdateTargetId = "Technologies" }))
{ 
    @Html.DropDownListFor(
            m=>m.SelectedTrackId,
            new SelectList(Model.track, "TrackId", "TrackName"),
           string.Empty
        )
}
  <script type="text/javascript">
    $('#SelectedTrackId').change(function () {
        $(this).parents('form').submit();
    });
</script>

Parital View2 (it contains dropdownlist):

@model MvcApplication3.Models.CommonWrapper
@if (Model.tech != null && Model.tech.Count() > 0)
{
    using (Ajax.BeginForm("SelectTechnology", "Home", new AjaxOptions { UpdateTargetId = "subque" }))
    { 
     @Html.HiddenFor(m => m.SelectedTrackId)
     @Html.DropDownListFor(
            m => m.SelectedTechId,
            new SelectList(Model.tech, "TechId", "TechName"),
            string.Empty
            )
    }
}

  <script type="text/javascript">
    $(document).on('change', '#SelectedTechId', function () {
        $(this).parents('form').submit();
    });

</script>

Partial view 3 (it contains multiple checkboxes):

@if (Model.subtopic != null && Model.subtopic.Count() > 0)
{
<table>
@for (int i = 0; i < Model.subtopic.Count; i++)
{
 <tr><td>
    @Html.CheckBoxFor(m => m.subtopic[i].IsSelected, new { id = "subTopic_" + i })
    @Html.HiddenFor(m => m.subtopic[i].SubtopicName)
    @Html.DisplayFor(m => m.subtopic[i].SubtopicName)
     <td>
     </tr>   
}
</table>

}

Now In parent view, I want to fetch the values from these three partial views.Also, I need to send these fetched values to controller.
How to do this ? can anybody please help me on this.
Thanks in advance

Added controller code :

[HttpPost]
        public ActionResult SelectTrack(int? selectedTrackId)
        {
            CommonWrapper wrapper = new CommonWrapper();
            wrapper.tech = new List<TechModel>();

            if (selectedTrackId.HasValue)
            {
                wrapper.tech = (from s in CommonWrapper.GetTechnology()
                                where s.TrackId == selectedTrackId
                                orderby s.TechName
                                select s).ToList();
            }

            return PartialView("_Technology", wrapper);

        }

        [HttpPost]
        public ActionResult SelectTechnology(int? selectedTechId)
        {
            CommonWrapper wrapper = new CommonWrapper();
            wrapper.subtopic = new List<SubtopicsModel>();

            if (selectedTechId.HasValue)
            {
                wrapper.subtopic = (from s in CommonWrapper.GetSubtopics()
                                           where s.TechId == selectedTechId
                                           orderby s.SubtopicName
                                           select s).ToList();
            }

            return PartialView("_Subtopics", wrapper);

        }

Answer 1

Try changing the ajax forms to simply using jquery to post to a desired controller action. This then separates your partial views from requiring an update target.

You can apply this method for each of your drop down lists calling a different controller action.

Remove your Ajax.BeginForm's and the corresponding jquery code and replace each with the below.

Parent View

<script type="text/javascript">
    $(function ()
    {
        $("#SelectedTrackId").change(function ()
        {
            var selectedValue = $(this).val();
            $.ajax(
            {
                type: "post",
                data: selectedValue,
                url: url,
                success: function (data)
                {
                    // data contains your partial view
                    $("#some-container-id").html(data);
                }
            });
        });
    });
</script>

Answer 2

I'd put together a ViewModel and put this in the [HttpPost] Controller Action

Hope this helps

Christian