Question

我一直试图解决这个问题几天，所以这里有：

我有一个自定义控件（Web控件），它以编程方式在for循环中创建多个Web控件，每个控件都包含一个jquery滑块。我尝试使用javascript字符串创建滑块，从代码后面，通过包含一个变量来更改滑块div id，这样它就是唯一的并且不与其他的冲突。我遇到的问题是，虽然创建了webcontrols，但只创建了第一个jquery滑块（在第一个控件中）。

所以：

主控制

    protected void Page_Load(object sender, EventArgs e)
    {
       //create the custom web control with sliders in each
        for (int a = 0; a < 9; a++)
        {
            CustomControl sliderControl = (CustomControl)LoadControl("CustomControl.ascx");
            sliderControl.SliderID = a;
            sliderControl.ID = "sliderControl_" + a;
            sliderControl.ClientIDMode = System.Web.UI.ClientIDMode.Static;
            thismaincontainerdiv.Controls.Add(sliderControl);

        }
    }

SliderControl - 最初在此处创建滑块但会导致与任何其他滑块控件ID冲突：

    <script>

$(function () {
    $("#slider").slider({
        value: 1,
        min: 1,
        max: 10,
        step: 1,
        slide: function (event, ui) {
            $("#amount").val("$" + ui.value);

        }
    });
    $("#amount").val("$" + $("#slider").slider("value"));

});

    </script>

    <div id="slidercontainer" runat="server" style="width:100%; height:87px; background-color:lightgray">

<div id="sliderdescription" runat="server" style="width:100%; height:60px;">

    <div id="startblockdesc" runat="server" style="width:30px; height:100%; float:left"></div>

    <div id="descdiv" runat="server" style="position:relative; top:25px">
    <asp:Label ID="lbdescription" runat="server" style="width:100%; height:32px; font-size:20px; font-family:Helvetica" Text="Description"  ></asp:Label>
    </div>

</div>

<div id="sliderdiv" runat="server" style="width:100%; height:27px;">

    <div id="startblockslider" runat="server" style="width:40px; height:100%; float:left"></div>
    <div id="slider"></div>

</div>

然后，通过不使用上面的滑块控件。 Javascript允许我更改用于滑块的div的ID：

        protected void Page_Load(object sender, EventArgs e)
    {
        string stringSliderID = "slider_" + this.SliderID;

        string JavaScriptString = @"

              var sliderID = <SliderID>;

              var slider = document.getElementById('slider');
              slider.id = 'slider_' + sliderID;

              $(function () {
                  $('#slider_' + sliderID).slider({
                      value: 1,
                      min: 1,
                      max: 10,
                      step: 1,
                      slide: function (event, ui) {
                          $('#amount').val('$' + ui.value);

                      }
                  });
                  $('#amount').val('$' + $('#slider_' + sliderID).slider('value'));
              }); 


          ";

        System.Web.UI.ScriptManager.RegisterStartupScript(this, this.GetType(), "Slider", JavaScriptString.Replace("<SliderID>", this.SliderID.ToString()), true);         
    }

非常感谢任何帮助。

这更清楚了吗？我来看看那个链接。感谢您的评论。

感谢。

Answer 1

To link that resolved

这回答了我关于如何通过jquery在一个页面上以编程方式创建多个滑块的问题。但是，我无法在单个Web控件中创建单个滑块。但在宏伟的计划中，有一个有效的解决方案。非常感谢。

在单个Web控件中创建多个Jquery滑块 - asp.net c＃

1 个答案: