Question

我有一个滑块，在页面加载时我为滑块设置了一个默认值（25,75）。更改滑块值后，每次在更新面板内都有一个帖子，它会将值重置为25,75，如何阻止它进行重置。

 <asp:AsyncPostBackTrigger ControlID="ddl_RespondBy" EventName="SelectedIndexChanged" />

当我从下拉列表中选择一个选项时，滑块中的值将被重置。如何阻止它

 <script type="text/javascript">
        function pageLoad(sender, args) {
            $('.datePicker').datetimepicker({ dateFormat: 'dd/mm/yy' });
            $(function () {
                $("#slider-range").slider({
                    range: true,
                    min: 0,
                    max: 100,
                    values: [25, 75],
                    slide: function (event, ui) {
                        $("#minval").val("" + ui.values[0] + " - " + ui.values[1]);
                    }
                });
                $("#minval").val("" + $("#slider-range").slider("values", 0) +
            " - " + $("#slider-range").slider("values", 1));
            });
        }
    </script>

Answer 1

确保所有脚本都在UpdatePanel之外，并在.ready()中将您想要调用的内容放在pageLoad()中，并在$(document).ready(function() { $(function () { $("#slider-range").slider({ range: true, min: 0, max: 100, values: [25, 75], slide: function (event, ui) { $("#minval").val("" + ui.values[0] + " - " + ui.values[1]); } }); $("#minval").val("" + $("#slider-range").slider("values", 0) + " - " + $("#slider-range").slider("values", 1)); }); }); function pageLoad(sender, args) { $('.datePicker').datetimepicker({ dateFormat: 'dd/mm/yy' }); }中的每个异步回发中调用您想要的内容：

{{1}}

$(document).ready() and pageLoad() are not the same!

Answer 2

如果要在回发之间保持滑块的状态，则需要将滑块的值转换为实际返回服务器的某些输入，或者将滑块移动到更新面板之外并移动初始化代码超出pageLoad（）。对于第一种方法：

标记：

<asp:UpdatePanel runat="server">
    <ContentTemplate>
        <asp:HiddenField ID="hfSliderHandle1" Value="25" runat="server" />
        <asp:HiddenField ID="hfSliderHandle2" Value="75" runat="server" />
    </ContentTemplate>
</asp:UpdatePanel>

脚本：

var $h1 = $('input[id$="hfSliderHandle1"]'),
    $h2 = $('input[id$="hfSliderHandle2"]');

$("#slider-range").slider({
    range: true,
    min: 0,
    max: 100,
    values: [parseInt($h1.val()), parseInt($h2.val())],
    slide: function (event, ui) {
        $("#minval").val(ui.values[0] + " - " + ui.values[1]);
        $h1.val(ui.values[0]);
        $h2.val(ui.values[1]);
    }
});

你可以解析#minval中的任何内容来做同样的事情，但我对该元素的性质一无所知所以我只是提供解决方案，让你适应这个概念需要。例如，如果您的更新面板中的文本框预先填充了值“25 - 75”：

var $minVal = $("#minval");
var h1 = parseInt(/^\d+/.exec($minVal.val())[0]),
    h2 = parseInt(/\d+$/.exec($minVal.val())[0]);

$("#slider-range").slider({
    range: true,
    min: 0,
    max: 100,
    values: [h1, h2],
    slide: function (event, ui) {
        $minVal.val(ui.values[0] + " - " + ui.values[1]);
    }
});

回发导致滑块重置，如何阻止它重置（asp.net网站）

2 个答案: