Question

我正在使用asp.net mvc4。

我目前正在尝试使用具有级联下拉列表的beginform。我的问题是，我无法弄清楚如何从级联下拉列表（动态）中获取值到我的表单中....

我有三个级联下拉列表，每个下拉列表都有一个id（trackId，RailCarID和DeckID）。 jquery for有值，但我无法弄清楚如何让jquery为模型赋值（即Model.SelectedTrack，Model.SelectedRailCar，Model.SelectedDeck）....这样我就可以通过了这些值返回html.beginform。在我看来，只有模型值可以在beginform中访问，但模型值不能在jquery中设置。

这是我的代码（有一些想法被注释掉）

@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应该具有接收级联下拉选择的属性。当我处理这种情况时，我会创建部分视图来渲染这些动态下拉列表，而那些partialViews使用他们自己的模型来渲染他们的DropDowns。

我会给你一个代码示例：

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;}
}

HTML应该是这样的：

@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"/>
}

执行此操作时，您的LoadRailVehicleInputModel将在您发布表单时包含DeckModel prop和RailModel prop中的下拉列表选定ID项。

mvc如何使用jquery设置Model值，然后传递给beginform

1 个答案: