슬라이더 컨트롤 데이터 바인딩(C#)Databinding the Slider Control (C#)

Christian Wenzby Christian Wenz

코드 다운로드 또는 PDF 다운로드Download Code or Download PDF

AJAX 컨트롤 도구 키트의 슬라이더 컨트롤은 마우스를 사용 하 여 제어할 수 있는 그래픽 슬라이더를 제공 합니다.The Slider control in the AJAX Control Toolkit provides a graphical slider that can be controlled using the mouse. 슬라이더의 현재 위치를 다른 ASP.NET 컨트롤에 바인딩할 수 있습니다.It is possible to bind the current position of the slider to another ASP.NET control.

개요Overview

AJAX 컨트롤 도구 키트의 슬라이더 컨트롤은 마우스를 사용 하 여 제어할 수 있는 그래픽 슬라이더를 제공 합니다.The Slider control in the AJAX Control Toolkit provides a graphical slider that can be controlled using the mouse. 슬라이더의 현재 위치를 다른 ASP.NET 컨트롤에 바인딩할 수 있습니다.It is possible to bind the current position of the slider to another ASP.NET control.

단계Steps

ASP.NET AJAX 및 Control Toolkit의 기능을 활성화 하려면 페이지의 아무 곳에 나 <form> 요소 내에 ScriptManager 컨트롤을 배치 해야 합니다.In order to activate the functionality of ASP.NET AJAX and the Control Toolkit, the ScriptManager control must be put anywhere on the page (but within the <form> element):

<asp:ScriptManager ID="asm" runat="server" />

그런 다음 페이지에 두 개의 TextBox 컨트롤을 추가 합니다.Next, add two TextBox controls to the page. 하나는 그래픽 슬라이더로 변환 되 고 다른 하나는 슬라이더의 위치를 보유 하 게 됩니다.One will be transformed into a graphical slider, and the other one will hold the position of the slider.

<asp:TextBox ID="Slider1" runat="server" />
<asp:TextBox ID="SliderValue" runat="server" />

다음 단계는 이미 마지막 단계입니다.The next step is already the final step. ASP.NET AJAX 컨트롤 도구 키트의 SliderExtender 컨트롤은 첫 번째 텍스트 상자 밖의 슬라이더를 만들고 슬라이더 위치가 변경 될 때 두 번째 텍스트 상자를 자동으로 업데이트 합니다.The SliderExtender control from the ASP.NET AJAX Control Toolkit makes a slider out of the first text box and automatically updates the second text box when the slider position changes. 이 작업을 수행 하려면 SliderExtenderTargetControlID 특성을 첫 번째 텍스트 상자의 ID로 설정 해야 합니다. BoundControlID 특성을 두 번째 텍스트 상자의 ID로 설정 해야 합니다.In order for that to work, The SliderExtender's TargetControlID attribute must be set to the ID of the first text box; the BoundControlID attribute must be set to the ID of the second text box.

<ajaxToolkit:SliderExtender ID="se1" runat="server" TargetControlID="Slider1"
 BoundControlID="SliderValue" />

브라우저에서 볼 수 있듯이 데이터 바인딩은 양방향으로 작동 합니다. 텍스트 상자에 새 값을 입력 하면 슬라이더의 위치가 업데이트 됩니다.As you can see in the browser, the data binding works in both directions: entering a new value in the text box updates the slider's position. 두 번째 텍스트 상자를 읽기 전용으로 설정 하는 경우 사용자가 해당 값을 수동으로 업데이트 하는 것이 더 어려워질 수 있도록 텍스트 필드에 weak 보호를 추가할 수 있습니다.If you make the second text box read only, you may add a weak protection to the text field so that it is harder for the user to manually update the value in there.

슬라이더와 텍스트 상자가 동기화 되어 있습니다.Slider and text box are in sync

슬라이더와 텍스트 상자가 동기화 되어 있습니다 (전체 크기 이미지를 보려면 클릭).Slider and text box are in sync (Click to view full-size image)