ASP MVC3 jQuery移动级联下拉列表后不起作用

时间:2012-08-03 14:49:22

标签: ajax asp.net-mvc-3 jquery-mobile

寻求帮助......我正在使用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>
}

0 个答案:

没有答案