JQuery Кароселлит и цикл и параметр из C #

Question

Я использую jquery Carosellite и Cycle для отображения изображений в виде кадров. Как передать значения в свойства, такие как скорость, видимый т. Д. Из codebehind (c #).

Ex HTML-код:

   <script type="text/javascript" language="javascript">
    $(function() {
        $(".anyClass").jCarouselLite({
            btnNext: ".next",
            btnPrev: ".prev",
            visible: 1,
            scroll: 1,
            speed: 1000
        });
    });
</script>

Гит.

Answer 1

Если вам не нравится смешивать код ASP.NET с разметкой, вы также можете сделать следующее:

разметка:

   <asp:HiddenField runat="server" id="hfVisible" Value="true" />
   <asp:HiddenField runat="server" id="hfSpeed" Value="1000" /> 

javascript:

 $(function() {
        $(".anyClass").jCarouselLite({
            btnNext: ".next",
            btnPrev: ".prev",
            visible: $('#hfVisible').val(),
            scroll: 1,
            speed: $('#hfSpeed').val();
        });
    });

код позади:

protected override void OnLoad(EventArgs e) {
  hfVisible.Value = true;
  hfSpeed.Value = 1000;
}

Примечание: если HiddenFields находятся в UserControl, не используйте идентификатор для ссылки на элементы, используйте вместо него класс или другие атрибуты;или чтобы избежать этого: используйте RegisterHiddenField:

ClientScriptManager cs = Page.ClientScript;
// Register the hidden field with the Page class.
cs.RegisterHiddenField('hfVisible', "false");
cs.RegisterHiddenField('hfSpeed', "1000");

Таким образом, вам не нужно объявлять HiddenFields в разметке.

Answer 2

Если свойства находятся в коде, вы можете вставить их на странице для быстрого решения:

$(function() {
    $(".anyClass").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev",
        visible: <%=Visible %>,
        scroll: 1,
        speed: <%=Speed %>
    });
});

На странице:

protected int Visible { get; set; }
protected int Speed { get; set; }

protected override void OnLoad(EventArgs e) {
  Visible = 1;
  Speed = 1000;
}