mvc how to set Model values using jquery and then pass to the beginform

Question

I am using asp.net mvc4.

I am currently trying to use a beginform that has cascading dropdowns. My problem is that I can't figure out how to get the values from the cascading dropdowns (which are dynamic) into my form....

I have three cascading dropdowns that each have an id (trackId, RailCarID, and DeckID). The jquery for has the values, but I can't figure out how to get the jquery to assign the values to the model (ie. Model.SelectedTrack, Model.SelectedRailCar, Model.SelectedDeck).... so that I can pass the values back in the html.beginform. It appears to me that only Model values are accessible in the beginform but the model values can not be set in the jquery.

Here is my code (with some ideas commented out)

@using TBS.Etracs.Web.Main.Helpers
@using TBS.Etracs.Web.Main.Areas.Carrier.Models
@model LoadRailVehicleInputModel

@{
    ViewBag.Title = "Load Rail Vehicle";
}

<scripts>   
        <script src="@Url.Content("~/Scripts/jquery-1.9.1.js")"                    type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery-1.9.1.min.js")"                type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery-1.9.1.intellisense.js")"       type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery-1.10.1.min.js")"               type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.validate.min.js")"             type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
</scripts>

<h2>Load Rail Vehicles</h2>

@using (Html.BeginForm("LoadRailVehicle"))
{ 
    @*  Track DropDown *@
    <div class="divTable">
         <div class="divTableRow">
            <div class="divTableCell"><label>Track: </label></div>
            <div class="divTableCell">
                @Html.DropDownListFor(p => p.SelectedTrack,
                                     new SelectList(Model.TrackList),
                                     "Select a Track",
                                     new
                                     {
                                         id = "trackID",
                                         Class = "dropdownstyle",
                                         style = "width: 140px"
                                     })
            </div>
    </div>

    @*  Cascading RailCar DropDown *@
         <div class="divTableRow" id="RailCarDivID">
            <div class="divTableCell" > <label>Railcar: </label> </div>
            <div class="divTableCell">
                <select id="RailCarID" style    = "width: 140px"></select>
            </div>
    </div>

    @*  Cascading Deck DropDown *@ 
         <div class="divTableRow" id="DeckDevID">
            <div class="divTableCell" ><label>Deck: </label></div>
            <div class="divTableCell">
                 <select id="DeckID"  style    = "width: 140px"></select>
            </div>
    </div>

    @*  Vin TextBox (with Load Button)*@ 
         <div class="divTableRow">
            <div class="divTableCell"> <label>VIN</label> </div>
            <div class="divTableCell">
                @Html.TextBoxFor(p => p.VIN)
                <input type="submit" value="Load" name="LoadVehicle" />
            </div>
    </div>
   </div>

@*   
<input type="submit" value="Unloaded Vins"    name="SelectUnLoadedVin"    id="NotLoadedButton"   style="width: 140px" />
<input type="submit" value="Loaded Vins"      name="SelectLoadedVin"      id="LoadedButton"      style="width: 140px" />
<input type="submit" value="Replacement Vins" name="SelectReplacementVin" id="ReplacementButton" style="width: 140px" />        
  *@   
}

@* Buttons for Unloaded Vin, Loaded Vins, Replacement Vins*@ 
@* @Html.Partial("_LoadRail_ButtonRow", Model)  *@


@using (Html.BeginForm("LoadRailGrid", "MobileRail", new {  Model.SelectedTrack, Model.SelectedRailCar, Model.SelectedDeck} ))
{ 

<div class="divblockstyle">
        <input type="submit" value="Unloaded Vins"    name="SelectUnloadedVin"    id="NotLoadedButton"  style="width: 140px" />
        <input type="submit" value="Loaded Vins"      name="SelectLoadedVin"       style="width: 140px" />
        <input type="submit" value="Replacement Vins" name="SelectReplacementVin"  style="width: 140px" />
</div>  
}


<input type="submit" value="Back" onclick="history.back(); return false;" style="margin-right: 20px" />

<style>
    .ScanVINTextBoxStyle3 { width: 180px; }
    .divTable     { width: 50%;  height:  10%; display: table; }
    .divTableRow  { width: 100%; height: 100%; display: table-row;}
    .divTableCell { width: 25%;  height: 100%; display: table-cell;}
</style>

<script type="text/javascript">
    var idtrack;
    var idRailCar;
    var idDeck;

    $(document).ready(function()
    {
       $("#trackID").change(function () 
       {
           //    var idtrack = $(this).val();
           idtrack = $(this).val();
           $.getJSON('/Carrier/MobileRail/GetRailCars', { selectedTrack: idtrack },
               function(data)
               {
                   var items = '<option>Select a railcar</option>';
                   $.each(data, function (i,railcar) {
                       items += '<option>' + railcar + '</option>';
                   });
                   $('#RailCarID').html(items)
                   $('#RailCarDivID').show
               });

           Model.SelectedTrack = idtrack;
       });

    });



    $(document).ready(function () {
        $("#RailCarID").change(function () {
            //  var idRailCar = $(this).val();
            idRailCar = $(this).val();  //set the global variable
            $.getJSON('/Carrier/MobileRail/GetDecks', { SelectedRailCar: idRailCar },
                function (data) {
                    var items = '<option>Select a railcar</option>';
                    $.each(data, function (i, deck) {
                        items += '<option>' + deck + '</option>';
                    });
                    $('#DeckID').html(items)
                    $('#DeckDevID').show
                });
            Model.SelectedTrack = $('#RailCarID').val();
        });
    });

    $(document).ready(function() {
        $("#DeckID").change(function () {
            idDeck = $(this).val();  //set the global variable...
            Model.SelectedDeck = idDeck;
        });
    });


    $(document).ready(function () {
        $('#NotLoadedButton').click(function () {
            var vin1 = $('#VIN').val(); //This works for things that aren't set via javascript...   
                 var idTrack1 = idtrack;
                 var idrailcar1 = idRailCar;
                 var idDeck1 = idDeck;

                 Model.SelectedTrack = idtrack;
                 Model.SelectedRailCar = idRailCar;
                 Model.SelectedDeck = idDeck1;
        });
    });

    /*
    $.ajax(function(){
        type:"Get",
        url:"/Carrier/MobileRail/SelectUnloadedVin",
        data:"{SelectedTrack=idtrack, SelectedRailCar=idRailCar,SelectedDeck=idDeck}",
        complete:function(){location.href="/Carrier/MobileRail/_LoadRail_UnloadedVehicles"}
    }*/


    /*
    $(document).ready(function () {
        $('#NotLoadedButton').click(function () {
            var vin1 = $('#VIN').val(); //This works for things that aren't set via javascript...
            var idTrack1 = idtrack;
            var idrailcar1 = idRailCar;
            var idDeck1 = idDeck;

            $.getJSON('/Carrier/MobileRail/SelectUnloadedVin', { SelectedTrack: idTrack1, SelectedRailCar: idrailcar1, SelectedDeck: idDeck1 },
                function (data) {
                    alert('returned from selecta');
                });
        });
    });
    */





    /*
    $(document).ready(function () {
        $('#LoadedButton').click(function () {
            alert('Loaded Button was clicked.');
        });
    });

    $(document).ready(function () {
        $('#ReplacementButton').click(function () {
            alert('Replacement Button was clicked.');
        });
    });
    */


    /*
    $(document).ready( function() {
    $('a.pager-link').click( function() {
        var page = $(this).attr('href').split(/\?/)[1];
        $.ajax({
            type: 'POST',
            url: '/path-to-service',
            data: page,
            success: function(content) {
               $('#myTable').html(content);  // replace
            }
        });
        return false; // to stop link
    });
});
*/

</script>

Answer 1

LoadRailVehicleInputModel should have properties to receive the cascade dropdown selections. When I deal with this situation, I create partial views that will render those dynamics dropdowns, and those partialViews uses their own models to render their DropDowns.

I will give you a code example:

public RailCarViewModel {
   public Int32 IdSelectedRailCar {get;set;}
   public List<RailCar> Cars {get;set;}
}

public DeckViewModel{
   public Int32 IdSelectedDeck {get;set;}
   public List<Deck> Decks {get;set;}
}

public LoadRailVehicleInputModel{
   public Foo XptoProp {get;set;}
   public DeckViewModel DeckModel {get;set;}
   public RailCarViewModel RailModel {get;set;}
}

And the HTML should be something like:

@model LoadRailVehicleInputModel
@using(Html.BeginForm())
{
<div id="RailCarDropDown"> 
  @Html.Action("MyActionThatRenderRailCarDropDown", Model.RailModel)
</div>
<div id="DeckDropDown"> 
  @Html.Action("MyActionThatRenderDeckDropDown", Model.DeckModel)
</div>

<input type="submit" value="Save"/>
}

Doing this, your LoadRailVehicleInputModel will contain the dropdown selected ID item inside DeckModel prop and RailModel prop when you post your form.