私はasp.netmvc4を使用しています。
私は現在、カスケードドロップダウンを持つbeginformを使用しようとしています。私の問題は、カスケードドロップダウン(動的)からフォームに値を取得する方法がわからないことです。
3つのカスケードドロップダウンがあり、それぞれにID(trackId、RailCarID、およびDeckID)があります。のjqueryには値がありますが、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>