mvc use more than one form in one page filtered with the selection of radio Button

Question

I have a Page that contains 3 forms each form is displayed depending on the selected value of the radio button in the previous form (i use viewbag to control the visibility hope to find something better) and all that forms use the same view model .Is that possible to post the 3 forms to the same action and make the ViewModel holds all the selected Values to be send to another page or even stored in database ? i tried to do so put after each post the old selected value became null in the ViewModel. I also tried the solution posted here but still cannot hold all selected values together in the ViewModel so what is the best way to store my selected values to later use ?

RouteList.cs my ViewModel

    public class RoutesList
{
    public int ID { get; set; }
    public List<Route> Routes
    {
        get
        {
            Queries.BookingHandler handler = new Queries.BookingHandler();
            return handler.GetAllRoutes();
        }
        set { }
    }
    public List<Route> OppositeRoutes
    {
        get
        {
                Queries.BookingHandler handler = new Queries.BookingHandler();
                return handler.GetRoutDirections(long.Parse(SelectedRouteID));

        }
        set { }
    }
    public List<RouteStation> RouteStations
    {
        get
        {
                Queries.BookingHandler handler = new Queries.BookingHandler();
                return handler.GetRouteStations(long.Parse(SelectedOppositeRouteID));
        }
        set { }
    }
        public string SelectedRouteID { get; set; }
    public string SelectedOppositeRouteID { get; set; }
    public string SelectedFromStationID { get; set; }
    public string SelectedToStationID { get; set; }
    public int Count { get; set; }
}

and my Controller has an index action for both Get and post

 public ActionResult Index()
    {
        return View(new RoutesList());
    }


[HttpPost]
      public ActionResult Index(RoutesList route, FormCollection frm)
    {

        if (!string.IsNullOrEmpty(route.SelectedRouteID))
            ViewBag.isDirection = true;
        if (!string.IsNullOrEmpty(route.SelectedOppositeRouteID))
            ViewBag.isStations = true;
        if(!string.IsNullOrEmpty(route.SelectedFromStationID)&&!string.IsNullOrEmpty(route.SelectedToStationID))
            return RedirectToAction("Index", "Time", new { id = route.SelectedRouteID });

        return View(route);

    }

and my View Index.cshtml

@model BusStarBackend.Models.RoutesList
    @using (Html.BeginForm())
    {
        <table class="table table-hover">
            <tr>
                <th>Trips</th>
                <th>Price</th>
            </tr>
            @foreach (var item in Model.Routes)
            {
                <tr>
                    <td>
                        @Html.RadioButtonFor(m => m.SelectedRouteID, item.RouteID)
                        @Html.DisplayFor(model => item.RouteName)
                    </td>
                    <td>@Html.DisplayFor(m => item.TicketPrice)</td>
                    <td> </td>
                </tr>
            }
        </table>
        <input type="submit" value="next" class="btn btn-default" />
    }
@{
    using (Html.BeginForm())
    {
        if (ViewBag.isDirection != null && ViewBag.isDirection)
        {
            <table class="table">
                <tr>
                    <th>
                        Please selected your Direction
                    </th>
                    <th></th>
                </tr>

                @foreach (var item in Model.OppositeRoutes)
                {
                    <tr>
                        <td>
                            @Html.RadioButtonFor(m => Model.SelectedOppositeRouteID, item.RouteID)
                            @Html.DisplayFor(modelItem => item.RouteName)
                        </td>
                    </tr>
                }
            </table>
            <input type="submit" value="next" class="btn btn-default" />
        }
    }
}
@{
    if (ViewBag.isStations != null && ViewBag.isStations)

    {
        using (Html.BeginForm())
        {
            <div id="stations">

                <table class="table">
                    <tr>
                        <th>
                            From Station
                        </th>
                        <th>
                            To Station
                        </th>
                        <th></th>
                    </tr>

                    @foreach (var item in Model.RouteStations)
                    {
                        <tr>
                            <td>
                                @Html.RadioButtonFor(model => model.SelectedFromStationID, item.StationID)
                                @Html.DisplayFor(modelItem => item.Station.Name)
                            </td>
                            <td>
                                @Html.RadioButtonFor(model => model.SelectedToStationID, item.StationID)
                                @Html.DisplayFor(modelItem => item.Station.Name)
                            </td>
                        </tr>
                    }
                </table>
                <input type="submit" value="next" class="btn btn-default" />
            </div>
        }
    }
}

Answer 1

For the "easiest" fix, you should use your "if's" before the begin form, something like this:

@model BusStar.Models.RoutesList
@if (ViewBag.isDirection != null && ViewBag.isDirection)
   {...
    @using (Html.BeginForm())
    {.....

For a better solution you should use the 'Html.Action' method, build a partial view that contains your each of your forms, and render only the one you need based on the value from radio button.

Something like this:

2 partials view for each form - this is for the direction form: (called _directionForm.cshtml)

@model BusStar.Models.RoutesList
<table class="table">
<tr>
    <th>
       Please selected your Direction
    </th>
    <th></th>
    </tr>
    @foreach (var item in Model.OppositeRoutes)
    {
    <tr>
        <td>
            @Html.RadioButtonFor(m => Model.SelectedOppositeRouteID, item.RouteID)
            @Html.DisplayFor(modelItem => item.RouteName)
        </td>
    </tr>
    }
</table>
<input type="submit" value="next" class="btn btn-default" />

Your controller:

public ActionResult Index()
    {
        return View(new RoutesList());
    }

public ActionResult PartialForm(RoutesList route)
{
   if (!string.IsNullOrEmpty(route.SelectedRouteID))
   return view("__directionForm", route);

   return view("...", route); //your other view
}

[HttpPost]
      public ActionResult Index(RoutesList route, FormCollection frm)
    {

        //if (!string.IsNullOrEmpty(route.SelectedRouteID)) ViewBag.isDirection = true;
        //if (!string.IsNullOrEmpty(route.SelectedOppositeRouteID)) ViewBag.isStations = true;
        if(!string.IsNullOrEmpty(route.SelectedFromStationID)&&!string.IsNullOrEmpty(route.SelectedToStationID))
            return RedirectToAction("Index", "Time", new { id = route.SelectedRouteID });

        return View(route);

    }

And in your old view replace the two forms with:

Html.Action("PartialForm", Model)