寻求帮助......我正在使用ASP MVC3和jQuery Mobile。我已经构建了一组级联下拉列表选项列表,在您第一次打开页面时可以正常工作。但是,在提交表单后,它将返回此页面,以便用户可以根据需要输入更多信息。问题是,在您返回页面后,级联下拉列表不再有效。
在Firebug中调试时,我没有在控制台中看到任何错误。我必须为他们做一个Control + F5刷新才能重新开始工作。如果我关闭jQuery mobile ajaxEnabled设置,那么它工作正常,所以它与jQuery移动框架和加载我认为的页面有关......
有人有什么想法吗?
由于
编辑:以下是此页面的视图。基本上发生的是$('#GasStation')。在用户返回此页面后,似乎永远不会触发更改事件。如果我禁用jQuery mobile ajax功能,它可以正常工作。
@model CPMobile.Models.FuelUsageModels.CreateModel
@{
Layout = "~/Views/Shared/M/_Layout.cshtml";
}
<h2>@ViewBag.Title</h2>
<div data-theme="b">
@Html.ValidationSummary(true, "Fuel usage recording failed. Please correct the errors and try again.")
<div data-role="fieldcontain">
@using (Html.BeginForm())
{
<div data-role="fieldcontain">
@Html.LabelFor(m => m.GasStation)
@Html.DropDownListFor(m => m.GasStation, Model.GasStationList, "Select Gas Station...")<br />
@Html.ValidationMessageFor(m => m.GasStation)
</div>
<div data-role="fieldcontain">
@Html.LabelFor(m => m.FuelType)
@Html.DropDownListFor(m => m.FuelType, Enumerable.Empty<SelectListItem>(), "Select Fuel Type...")<br />
@Html.ValidationMessageFor(m => m.FuelType)
</div>
<div data-role="fieldcontain">
@Html.LabelFor(m => m.EquipmentNumber)
@Html.TextBoxFor(m => m.EquipmentNumber, new { @required = "required" })<br />
@Html.ValidationMessageFor(m => m.EquipmentNumber)
</div>
<div data-role="fieldcontain">
@Html.LabelFor(m => m.MeasurementValue)
@Html.TextBoxFor(m => m.MeasurementValue, new { @required = "required", @type = "number" })<br />
@Html.ValidationMessageFor(m => m.MeasurementValue)
</div>
<div data-role="fieldcontain">
@Html.LabelFor(m => m.MeasurementDatetime)
@Html.EditorFor(m => m.MeasurementDatetime, new { @required = "required", @type = "date" })<br />
@Html.ValidationMessageFor(m => m.MeasurementDatetime)
</div>
<div data-role="fieldcontain">
<input type="submit" value="Submit" data-theme="b" />
</div>
}
</div>
</div>
@section scripts
{
<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>
<script type="text/javascript">
$('#GasStation').change(function () {
var selectedGasStation = $(this).val();
if (selectedGasStation != null && selectedGasStation != '') {
$.getJSON(
'@Url.Action("FuelType")',
{ gasStation: selectedGasStation },
function (fuelTypes) {
var fuelTypesSelect = $('#FuelType');
fuelTypesSelect.empty();
$.each(fuelTypes, function (fuelType, fuelTypeName) {
fuelTypesSelect.append($('<option/>', {
value: fuelType.value,
text: fuelTypeName.text
}));
});
fuelTypesSelect.selectmenu('refresh', true);
});
}
});
</script>
}