마스터 페이지 및 ASP.NET AJAX(VB)
작성자 : Scott Mitchell
ASP.NET AJAX 및 master 페이지를 사용하는 옵션에 대해 설명합니다. ScriptManagerProxy 클래스를 사용하여 확인합니다. 에서는 Master 페이지 또는 콘텐츠 페이지에서 ScriptManager를 사용하는지 여부에 따라 다양한 JS 파일이 로드되는 방법을 설명합니다.
소개
지난 몇 년 동안 점점 더 많은 개발자가 AJAX 지원 웹 애플리케이션을 빌드하고 있습니다. AJAX 지원 웹 사이트는 다양한 관련 웹 기술을 사용하여 응답성이 뛰어난 사용자 환경을 제공합니다. MICROSOFT의 ASP.NET AJAX 프레임워크 덕분에 AJAX 지원 ASP.NET 애플리케이션을 쉽게 만들 수 있습니다. ASP.NET AJAX는 ASP.NET 3.5 및 Visual Studio 2008에 기본 제공됩니다. ASP.NET 2.0 애플리케이션에 대한 별도의 다운로드로도 사용할 수 있습니다.
ASP.NET AJAX 프레임워크를 사용하여 AJAX 지원 웹 페이지를 빌드할 때 프레임워크를 사용하는 각 페이지에 정확히 하나의 ScriptManager 컨트롤을 추가해야 합니다. 이름에서 알 수 있듯이 ScriptManager는 AJAX 사용 웹 페이지에 사용되는 클라이언트 쪽 스크립트를 관리합니다. 최소한 ScriptManager는 브라우저에 ASP.NET AJAX 클라이언트 라이브러리를 구성하는 JavaScript 파일을 다운로드하도록 지시하는 HTML을 내보냅니다. 또한 사용자 지정 JavaScript 파일, 스크립트 사용 웹 서비스 및 사용자 지정 애플리케이션 서비스 기능을 등록하는 데 사용할 수 있습니다.
사이트에서 master 페이지를 사용하는 경우 모든 단일 콘텐츠 페이지에 ScriptManager 컨트롤을 추가할 필요는 없습니다. 대신 master 페이지에 ScriptManager 컨트롤을 추가할 수 있습니다. 이 자습서에서는 master 페이지에 ScriptManager 컨트롤을 추가하는 방법을 보여 있습니다. 또한 ScriptManagerProxy 컨트롤을 사용하여 특정 콘텐츠 페이지에 사용자 지정 스크립트 및 스크립트 서비스를 등록하는 방법도 살펴봅니다.
참고
이 자습서에서는 ASP.NET AJAX 프레임워크를 사용하여 AJAX 지원 웹 애플리케이션을 디자인하거나 빌드하는 것을 탐색하지 않습니다. AJAX 사용에 대한 자세한 내용은 이 자습서의 끝에 있는 추가 읽기 섹션에 나열된 리소스뿐만 아니라 ASP.NET AJAX 비디오 및 자습서를 참조하세요.
ScriptManager 컨트롤에서 내보낸 태그 검사
ScriptManager 컨트롤은 ASP.NET AJAX 클라이언트 라이브러리를 구성하는 JavaScript 파일을 다운로드하도록 브라우저에 지시하는 태그를 내보냅니다. 또한 이 라이브러리를 초기화하는 페이지에 약간의 인라인 JavaScript를 추가합니다. 다음 태그는 ScriptManager 컨트롤을 포함하는 페이지의 렌더링된 출력에 추가되는 콘텐츠를 보여 줍니다.
<script src="/ASPNET_MasterPages_Tutorial_08_CS/WebResource.axd?d=T8EVk6SsA8mgPKu7_sBX5w2 t=633363040378379010" type="text/javascript"></script>
<script src="/ASPNET_MasterPages_Tutorial_08_CS/ScriptResource.axd?d=SCE1TCh8B24VkQIU5a8iJFizuPBIqs6Lka7GEkxo-6ROKNw5LVPCpF_pmLFR-R-p_Uf42Ahmr_SKd8lwgZUWb2uPJmfX0X_H6oLA50bniyQ1 t=633465688673751480" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>
<script src="/ASPNET_MasterPages_Tutorial_08_CS/ScriptResource.axd?d=SCE1TCh8B24VkQIU5a8iJFizuPBIqs6Lka7GEkxo-6ROKNw5LVPCpF_pmLFR-R-phT96yZPngppiP_VXlN4Vz2RuVtvwDiQzF9xt42dUCiYjL0UylAJoyYzStwvObx0U0 t=633465688673751480" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ScriptManager1', document.getElementById('form1'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90);
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
Sys.Application.initialize();
//]]>
</script>
태그는 <script src="url"></script>브라우저에 URL에서 JavaScript 파일을 다운로드하고 실행하도록 지시합니다. ScriptManager는 이러한 세 개의 태그를 내보낸다. 하나는 파일을 WebResource.axd참조하고 다른 두 파일은 파일을 ScriptResource.axd참조합니다. 이러한 파일은 실제로 웹 사이트에 파일로 존재하지 않습니다. 대신 이러한 파일 중 하나에 대한 요청이 웹 서버에 도착하면 ASP.NET 엔진은 querystring을 검사하고 적절한 JavaScript 콘텐츠를 반환합니다. 이러한 세 개의 외부 JavaScript 파일에서 제공하는 스크립트는 ASP.NET AJAX 프레임워크의 클라이언트 라이브러리를 구성합니다. ScriptManager에서 내보낸 다른 <script> 태그에는 이 라이브러리를 초기화하는 인라인 스크립트가 포함됩니다.
ScriptManager에서 내보낸 외부 스크립트 참조 및 인라인 스크립트는 ASP.NET AJAX 프레임워크를 사용하는 페이지에 필수적이지만 프레임워크를 사용하지 않는 페이지에는 필요하지 않습니다. 따라서 ASP.NET AJAX 프레임워크를 사용하는 페이지에 ScriptManager만 추가하는 것이 이상적일 수 있습니다. 이것으로 충분하지만 프레임워크를 사용하는 페이지가 많으면 ScriptManager 컨트롤을 모든 페이지에 추가하게 됩니다. 즉, 반복적인 작업입니다. 또는 master 페이지에 ScriptManager를 추가한 다음 이 필요한 스크립트를 모든 콘텐츠 페이지에 삽입할 수 있습니다. 이 방법을 사용하면 master 페이지에 이미 포함되어 있으므로 ASP.NET AJAX 프레임워크를 사용하는 새 페이지에 ScriptManager를 추가할 필요가 없습니다. 1단계에서는 master 페이지에 ScriptManager를 추가하는 방법을 안내합니다.
참고
master 페이지의 사용자 인터페이스에 AJAX 기능을 포함하려는 경우 이 문제에 대해 선택할 수 없습니다. master 페이지에 ScriptManager를 포함해야 합니다.
master 페이지에 ScriptManager를 추가하는 한 가지 단점은 위의 스크립트가 필요한지 여부에 관계없이 모든 페이지에서 내보내집니다. 이로 인해 ScriptManager가 포함되어 있지만(master 페이지를 통해) ASP.NET AJAX 프레임워크의 기능을 사용하지 않는 페이지에 대한 대역폭이 낭비됩니다. 하지만 얼마나 많은 대역폭이 낭비되나요?
- ScriptManager에서 내보낸 실제 콘텐츠(위 그림 참조)는 1KB를 약간 초과합니다.
- 그러나 요소에서 참조하는
<script>세 개의 외부 스크립트 파일은 압축되지 않은 데이터의 약 450KB로 구성됩니다. gzip 압축을 사용하는 웹 사이트에서는 이 총 대역폭을 100KB 가까이 줄일 수 있습니다. 그러나 이러한 스크립트 파일은 브라우저에서 1년 동안 캐시되므로 한 번만 다운로드한 다음 사이트의 다른 페이지에서 다시 사용할 수 있습니다.
가장 좋은 경우 스크립트 파일이 캐시되면 총 비용은 1KB이며 무시할 수 있습니다. 최악의 경우, 그러나 스크립트 파일이 아직 다운로드되지 않았고 웹 서버가 어떤 형태의 압축도 사용하지 않는 경우 대역폭 적중은 약 450KB이며, 이는 광대역 연결을 통해 1~2초에서 전화 접속 모뎀을 통해 사용자에게 최대 1분까지 추가할 수 있습니다. 좋은 소식은 외부 스크립트 파일이 브라우저에 의해 캐시되기 때문에 이 최악의 시나리오는 자주 발생하지 않는다는 것입니다.
참고
master 페이지에 ScriptManager 컨트롤을 배치하는 것이 여전히 불편하다면 웹 양식(<form runat="server">master 페이지의 태그)을 고려합니다. 포스트백 모델을 사용하는 모든 ASP.NET 페이지에는 정확히 하나의 웹 양식이 포함되어야 합니다. 웹 양식을 추가하면 여러 숨겨진 양식 필드, 태그 자체 및 <form> 필요한 경우 스크립트에서 포스트백을 시작하기 위한 JavaScript 함수와 같은 추가 콘텐츠가 추가됩니다. 이 태그는 포스트백하지 않는 페이지에는 필요하지 않습니다. 이 불필요한 태그는 master 페이지에서 웹 양식을 제거하고 필요한 각 콘텐츠 페이지에 수동으로 추가하여 제거할 수 있습니다. 그러나 master 페이지에 웹 양식을 사용하면 특정 콘텐츠 페이지에 불필요하게 추가되는 단점이 더 큽니다.
1단계: 마스터 페이지에 ScriptManager 컨트롤 추가
ASP.NET AJAX 프레임워크를 사용하는 모든 웹 페이지에는 정확히 하나의 ScriptManager 컨트롤이 포함되어야 합니다. 이 요구 사항 때문에 일반적으로 모든 콘텐츠 페이지에 ScriptManager 컨트롤이 자동으로 포함되도록 master 페이지에 단일 ScriptManager 컨트롤을 배치하는 것이 좋습니다. 또한 ScriptManager는 UpdatePanel 및 UpdateProgress 컨트롤과 같은 ASP.NET AJAX 서버 컨트롤 앞에 와야 합니다. 따라서 Web Form 내의 ContentPlaceHolder 컨트롤 앞에 ScriptManager를 배치하는 것이 가장 좋습니다.
Site.master master 페이지를 열고 Web Form 내의 페이지에 ScriptManager 컨트롤을 추가하지만 요소 앞에 <div id="topContent"> 추가합니다(그림 1 참조). Visual Web Developer 2008 또는 Visual Studio 2008을 사용하는 경우 ScriptManager 컨트롤은 AJAX 확장 탭의 도구 상자에 있습니다. Visual Studio 2005를 사용하는 경우 먼저 ASP.NET AJAX 프레임워크를 설치하고 도구 상자에 컨트롤을 추가해야 합니다. ASP.NET AJAX 다운로드 페이지를 방문하여 ASP.NET 2.0에 대한 프레임워크를 가져옵니다.
ScriptManager를 페이지에 추가한 후 에서 로 MyManager변경합니다.ScriptManager1ID
그림 01: 마스터 페이지에 ScriptManager 추가(전체 크기 이미지를 보려면 클릭)
2단계: 콘텐츠 페이지에서 ASP.NET AJAX 프레임워크 사용
master 페이지에 ScriptManager 컨트롤을 추가하면 이제 모든 콘텐츠 페이지에 ASP.NET AJAX 프레임워크 기능을 추가할 수 있습니다. Northwind 데이터베이스에서 임의로 선택한 제품을 표시하는 새 ASP.NET 페이지를 만들어 보겠습니다. ASP.NET AJAX 프레임워크의 타이머 컨트롤을 사용하여 15초마다 이 디스플레이를 업데이트하여 새 제품을 표시합니다.
먼저 라는 ShowRandomProduct.aspx루트 디렉터리에 새 페이지를 만듭니다. 이 새 페이지를 master 페이지에 바인딩하는 것을 Site.master 잊지 마세요.
그림 02: 웹 사이트에 새 ASP.NET 페이지 추가(전체 크기 이미지를 보려면 클릭)
마스터 페이지[SKM1]의 제목, 메타 태그 및 기타 HTML 헤더 지정 자습서에서 명시적으로 설정되지 않은 경우 페이지 제목을 생성하는 라는 BasePage 사용자 지정 기본 페이지 클래스를 만들었습니다. ShowRandomProduct.aspx 페이지의 코드 숨김 클래스로 이동하여 에서 파생 BasePage 되도록 합니다(대신 System.Web.UI.Page).
마지막으로 이 단원에 Web.sitemap 대한 항목을 포함하도록 파일을 업데이트합니다. 마스터에서 콘텐츠 페이지 상호 작용 단원의 아래에 <siteMapNode> 다음 태그를 추가합니다.
<siteMapNode url="~/ShowRandomProduct.aspx" title="Master Pages and ASP.NET AJAX" />
이 <siteMapNode> 요소의 추가는 단원 목록에 반영됩니다(그림 5 참조).
임의로 선택한 제품 표시
로 돌아갑니다 ShowRandomProduct.aspx. Designer 도구 상자에서 Content 컨트롤로 UpdatePanel 컨트롤을 MainContent 끌어서 해당 ID 속성을 로 ProductPanel설정합니다. UpdatePanel은 부분 페이지 포스트백을 통해 비동기적으로 업데이트할 수 있는 화면의 지역을 나타냅니다.
첫 번째 작업은 UpdatePanel 내에서 임의로 선택된 제품에 대한 정보를 표시하는 것입니다. DetailsView 컨트롤을 UpdatePanel로 끌어서 시작합니다. DetailsView 컨트롤의 ID 속성을 로 ProductInfo 설정하고 및 HeightWidth 속성을 지웁합니다. DetailsView의 스마트 태그를 확장하고 데이터 원본 선택 드롭다운 목록에서 DetailsView를 라는 RandomProductDataSource새 SqlDataSource 컨트롤에 바인딩하도록 선택합니다.
그림 03: DetailsView를 새 SqlDataSource 컨트롤에 바인딩(전체 크기 이미지를 보려면 클릭)
(콘텐츠 페이지[SKM2] 자습서의 마스터 페이지와 상호 작용에서 만든)을 통해 NorthwindConnectionString Northwind 데이터베이스에 연결하도록 SqlDataSource 컨트롤을 구성합니다. select 문을 구성할 때 사용자 지정 SQL 문을 지정하도록 선택한 다음, 다음 쿼리를 입력합니다.
SELECT TOP 1 ProductName, UnitPrice
FROM Products
ORDER BY NEWID()
TOP 1 절의 SELECT 키워드(keyword) 쿼리에서 반환된 첫 번째 레코드만 반환합니다. 함수는 NEWID() 새 GUID(Globally Unique Identifier Value)를 생성하고 절에서 ORDER BY 테이블의 레코드를 임의 순서로 반환하는 데 사용할 수 있습니다.
그림 04: 임의로 선택된 단일 레코드를 반환하도록 SqlDataSource 구성(전체 크기 이미지를 보려면 클릭)
마법사를 완료한 후 Visual Studio는 위의 쿼리에서 반환된 두 열에 대한 BoundField를 만듭니다. 이 시점에서 페이지의 선언적 태그는 다음과 유사하게 표시됩니다.
<asp:UpdatePanel ID="ProductPanel" runat="server">
<ContentTemplate>
<asp:DetailsView ID="ProductInfo" runat="server" AutoGenerateRows="False"
DataSourceID="RandomProductDataSource">
<Fields>
<asp:BoundField DataField="ProductName" HeaderText="ProductName"
SortExpression="ProductName" />
<asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice"
SortExpression="UnitPrice" />
</Fields>
</asp:DetailsView>
<asp:SqlDataSource ID="RandomProductDataSource" runat="server"
ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT TOP 1 ProductName, UnitPrice FROM Products ORDER BY NEWID()"></asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
그림 5는 브라우저를 ShowRandomProduct.aspx 통해 볼 때 페이지를 보여줍니다. 브라우저의 새로 고침 단추를 클릭하여 페이지를 다시 로드합니다. 임의로 선택된 새 레코드의 ProductName 및 UnitPrice 값이 표시됩니다.
그림 05: 임의 제품의 이름 및 가격이 표시됩니다(전체 크기 이미지를 보려면 클릭).
15초마다 새 제품 자동 표시
ASP.NET AJAX 프레임워크에는 지정된 시간에 포스트백을 수행하는 타이머 컨트롤이 포함되어 있습니다. 포스트백 시 타이머의 Tick 이벤트가 발생합니다. Timer 컨트롤이 UpdatePanel 내에 배치되면 부분 페이지 포스트백이 트리거되며, 그 동안 데이터를 DetailsView에 다시 바인딩하여 임의로 선택한 새 제품을 표시할 수 있습니다.
이렇게 하려면 도구 상자에서 타이머를 끌어 UpdatePanel에 놓습니다. 타이머의 ID 를 에서 Timer1 로 ProductTimer 변경하고 해당 Interval 속성을 60000에서 15000으로 변경합니다. 속성은 Interval 포스트백 사이의 밀리초 수를 나타냅니다. 15000으로 설정하면 타이머가 15초마다 부분 페이지 포스트백을 트리거합니다. 이 시점에서 타이머의 선언적 태그는 다음과 유사하게 표시됩니다.
<asp:UpdatePanel ID="ProductPanel" runat="server" onload="ProductPanel_Load">
<ContentTemplate>
...
<asp:Timer ID="ProductTimer" runat="server" Interval="15000">
</asp:Timer>
</ContentTemplate>
</asp:UpdatePanel>
Timer Tick 의 이벤트에 대한 이벤트 처리기를 만듭니다. 이 이벤트 처리기에서 DetailsView의 DataBind 메서드를 호출하여 데이터를 DetailsView에 다시 바인딩해야 합니다. 이렇게 하면 DetailsView가 데이터 원본 컨트롤에서 데이터를 다시 검색하도록 지시합니다. 그러면 브라우저의 새로 고침 단추를 클릭하여 페이지를 다시 로드할 때와 마찬가지로 임의로 선택된 새 레코드를 선택하고 표시합니다.
Protected Sub ProductTimer_Tick(ByVal sender As Object, ByVal e As System.EventArgs) Handles ProductTimer.Tick
ProductInfo.DataBind()
End Sub
이제 모든 작업을 마쳤습니다. 브라우저를 통해 페이지를 다시 방문합니다. 처음에는 임의의 제품의 정보가 표시됩니다. 인내심을 가지고 화면을 watch 경우 15초 후에 새 제품에 대한 정보가 기존 디스플레이를 마술처럼 대체한다는 것을 알 수 있습니다.
여기서 발생하는 작업을 더 잘 보려면 디스플레이가 마지막으로 업데이트된 시간을 표시하는 Label 컨트롤을 UpdatePanel에 추가해 보겠습니다. UpdatePanel 내에 레이블 웹 컨트롤을 추가하고, 해당 컨트롤을 ID 로 LastUpdateTime설정하고, 해당 Text 속성을 지웁습니다. 다음으로 UpdatePanel의 Load 이벤트에 대한 이벤트 처리기를 만들고 레이블에 현재 시간을 표시합니다. UpdatePanel의 Load 이벤트는 전체 또는 부분 페이지 포스트백마다 발생합니다.
Protected Sub ProductPanel_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles ProductPanel.Load
LastUpdateTime.Text = "Last updated at " & DateTime.Now.ToLongTimeString()
End Sub
이 변경이 완료되면 페이지에 현재 표시된 제품이 로드된 시간이 포함됩니다. 그림 6은 처음 방문했을 때의 페이지를 보여줍니다. 그림 7은 타이머 컨트롤이 "틱"하고 UpdatePanel이 새로 고쳐진 후 15초 후에 새 제품에 대한 정보를 표시하는 페이지를 보여줍니다.
그림 06: 임의로 선택한 제품이 페이지 로드에 표시됩니다(전체 크기 이미지를 보려면 클릭).
그림 07: 15초마다 임의로 선택한 새 제품이 표시됩니다(전체 크기 이미지를 보려면 클릭).
3단계: ScriptManagerProxy 컨트롤 사용
scriptManager는 ASP.NET AJAX 프레임워크 클라이언트 라이브러리에 필요한 스크립트를 포함하여 사용자 지정 JavaScript 파일, 스크립트 사용 웹 서비스에 대한 참조 및 사용자 지정 인증, 권한 부여 및 프로필 서비스를 등록할 수도 있습니다. 일반적으로 이러한 사용자 지정은 특정 페이지에만 적용됩니다. 그러나 사용자 지정 스크립트 파일, 웹 서비스 참조 또는 인증, 권한 부여 또는 프로필 서비스가 master 페이지의 ScriptManager에서 참조되는 경우 웹 사이트의 모든 페이지에 포함됩니다.
Page-by-page 기준으로 ScriptManager 관련 사용자 지정을 추가하려면 ScriptManagerProxy 컨트롤을 사용합니다. ScriptManagerProxy를 콘텐츠 페이지에 추가한 다음 ScriptManagerProxy에서 사용자 지정 JavaScript 파일, 웹 서비스 참조 또는 인증, 권한 부여 또는 프로필 서비스를 등록할 수 있습니다. 특정 콘텐츠 페이지에 대해 이러한 서비스를 등록하는 효과가 있습니다.
참고
ASP.NET 페이지에는 두 개 이상의 ScriptManager 컨트롤만 있을 수 있습니다. 따라서 scriptManager 컨트롤이 master 페이지에 이미 정의된 경우 콘텐츠 페이지에 ScriptManager 컨트롤을 추가할 수 없습니다. ScriptManagerProxy의 유일한 목적은 개발자가 master 페이지에서 ScriptManager를 정의할 수 있는 방법을 제공하지만 여전히 페이지 단위로 ScriptManager 사용자 지정을 추가할 수 있는 기능을 제공하는 것입니다.
ScriptManagerProxy 컨트롤이 작동하는 것을 보려면 클라이언트 쪽 스크립트를 사용하여 타이머 컨트롤을 일시 중지하거나 다시 시작하는 단추를 포함하도록 UpdatePanel ShowRandomProduct.aspx 을 확대해 보겠습니다. 타이머 컨트롤에는 이 원하는 기능을 달성하는 데 사용할 수 있는 세 가지 클라이언트 쪽 메서드가 있습니다.
_startTimer()- 타이머 컨트롤 시작_raiseTick()- 타이머 컨트롤이 "틱"되도록 하여 서버에 Tick 이벤트를 다시 게시하고 발생합니다._stopTimer()- 타이머 컨트롤을 중지합니다.
라는 변수와 라는 timerEnabledToggleTimer함수를 사용하여 JavaScript 파일을 만들어 보겠습니다. 변수는 timerEnabled 타이머 컨트롤이 현재 활성화되어 있는지 또는 사용하지 않도록 설정되어 있는지 여부를 나타내며, 기본값은 true입니다. 함수는 ToggleTimer 일시 중지/다시 시작 단추에 대한 참조와 타이머 컨트롤의 클라이언트 쪽 id 값이라는 두 개의 입력 매개 변수를 허용합니다. 이 함수는 의 값을 timerEnabled토글하고, 타이머 컨트롤에 대한 참조를 가져오고, 타이머를 시작하거나 중지하고(값 timerEnabled에 따라) 단추의 표시 텍스트를 "일시 중지" 또는 "다시 시작"으로 업데이트합니다. 이 함수는 일시 중지/다시 시작 단추를 클릭할 때마다 호출됩니다.
먼저 라는 Scripts웹 사이트에 새 폴더를 만듭니다. 다음으로 JScript 파일 형식의 Scripts TimerScript.js 폴더에 새 파일을 추가합니다.
그림 08: 폴더에 Scripts 새 JavaScript 파일 추가(전체 크기 이미지를 보려면 클릭)
그림 09: 새 JavaScript 파일이 웹 사이트에 추가되었습니다(전체 크기 이미지를 보려면 클릭).
다음으로 파일에 다음 스크립을 추가합니다 TimerScript.js .
var timerEnabled = true;
function ToggleTimer(btn, timerID)
{
// Toggle the timer enabled state
timerEnabled = !timerEnabled;
// Get a reference to the Timer
var timer = $find(timerID);
if (timerEnabled)
{
// Start timer
timer._startTimer();
// Immediately raise a tick
timer._raiseTick();
btn.value = 'Pause';
}
else
{
// Stop timer
timer._stopTimer();
btn.value = 'Resume';
}
}
이제 이 사용자 지정 JavaScript 파일을 에 ShowRandomProduct.aspx등록해야 합니다. 으로 돌아가 ShowRandomProduct.aspx 서 ScriptManagerProxy 컨트롤을 페이지에 추가하고, 을 ID 로 MyManagerProxy설정합니다. 사용자 지정 JavaScript 파일을 등록하려면 Designer ScriptManagerProxy 컨트롤을 선택한 다음, 속성 창 이동합니다. 속성 중 하나는 Scripts입니다. 이 속성을 선택하면 그림 10에 표시된 ScriptReference 컬렉션 편집기 표시됩니다. 추가 단추를 클릭하여 새 스크립트 참조를 포함하고 Path 속성 ~/Scripts/TimerScript.js에 스크립트 파일의 경로를 입력합니다.
그림 10: ScriptManagerProxy 컨트롤에 스크립트 참조 추가(전체 크기 이미지를 보려면 클릭)
스크립트 참조를 추가한 후 다음 태그 코드 조각과 같이 ScriptManagerProxy 컨트롤의 선언적 태그가 단일 ScriptReference 항목이 있는 컬렉션을 포함 <Scripts> 하도록 업데이트됩니다.
<asp:ScriptManagerProxy ID="MyManagerProxy" runat="server">
<Scripts>
<asp:ScriptReference Path="~/Scripts/TimerScript.js" />
</Scripts>
</asp:ScriptManagerProxy>
이 항목은 ScriptReference 렌더링된 태그에 JavaScript 파일에 대한 참조를 포함하도록 ScriptManagerProxy에 지시합니다. 즉, ScriptManagerProxy ShowRandomProduct.aspx 에 사용자 지정 스크립트를 등록하면 페이지의 렌더링된 출력에 이제 다른 <script src="url"></script> 태그인 <script src="Scripts/TimerScript.js" type="text/javascript"></script>가 포함됩니다.
이제 페이지의 클라이언트 스크립트에서 TimerScript.js 에 정의된 함수를 호출 ToggleTimer 할 ShowRandomProduct.aspx 수 있습니다. UpdatePanel 내에 다음 HTML을 추가합니다.
<input type="button" id="PauseResumeButton"
value="Pause"
onclick="ToggleTimer(this, '<%=ProductTimer.ClientID %>');" />
이렇게 하면 "일시 중지" 텍스트가 있는 단추가 표시됩니다. 클릭할 때마다 JavaScript 함수 ToggleTimer 가 호출되어 단추에 대한 참조와 id 타이머 컨트롤(ProductTimer)의 값을 전달합니다. 타이머 컨트롤의 값을 가져오기 id 위한 구문을 확인합니다. <%=ProductTimer.ClientID%>타이머 컨트롤 ClientID 의 ProductTimer 속성 값을 내보낸다. 콘텐츠 페이지의 컨트롤 ID 명명[SKM3] 자습서에서는 서버 쪽 값과 결과 클라이언트 쪽 ID 값 간의 차이점과 클라이언트 쪽 idid을 반환하는 방법에 대해 ClientID 설명했습니다.
그림 11은 브라우저를 통해 처음 방문했을 때 이 페이지를 보여줍니다. 타이머는 현재 실행 중이며 표시된 제품 정보를 15초마다 업데이트합니다. 그림 12는 일시 중지 단추를 클릭한 후의 화면을 보여줍니다. 일시 중지 단추를 클릭하면 타이머가 중지되고 단추의 텍스트가 "다시 시작"으로 업데이트됩니다. 사용자가 다시 시작을 클릭하면 제품 정보가 새로 고쳐지고 15초마다 계속 새로 고쳐집니다.
그림 11: 일시 중지 단추를 클릭하여 타이머 컨트롤을 중지합니다(전체 크기 이미지를 보려면 클릭).
그림 12: 다시 시작 단추를 클릭하여 타이머를 다시 시작합니다(전체 크기 이미지를 보려면 클릭).
요약
ASP.NET AJAX 프레임워크를 사용하여 AJAX 지원 웹 애플리케이션을 빌드할 때는 모든 AJAX 지원 웹 페이지에 ScriptManager 컨트롤이 포함되어야 합니다. 이 프로세스를 용이하게 하기 위해 각 콘텐츠 페이지에 ScriptManager를 추가하지 않고도 master 페이지에 ScriptManager를 추가할 수 있습니다. 1단계에서는 master 페이지에 ScriptManager를 추가하는 방법을 보여 주었고, 2단계에서는 콘텐츠 페이지에서 AJAX 기능 구현을 살펴보았습니다.
사용자 지정 스크립트, 스크립트 사용 웹 서비스에 대한 참조 또는 사용자 지정된 인증, 권한 부여 또는 프로필 서비스를 특정 콘텐츠 페이지에 추가해야 하는 경우 콘텐츠 페이지에 ScriptManagerProxy 컨트롤을 추가한 다음, 해당 페이지에서 사용자 지정을 구성합니다. 3단계에서는 ScriptManagerProxy를 사용하여 특정 콘텐츠 페이지에 사용자 지정 JavaScript 파일을 등록하는 방법을 검토했습니다.
행복한 프로그래밍!
추가 정보
이 자습서에서 설명하는 topics 대한 자세한 내용은 다음 리소스를 참조하세요.
- ASP.NET AJAX Framework
- ASP.NET AJAX 자습서
- AJAX 비디오 ASP.NET
- Microsoft ASP.NET AJAX를 사용하여 대화형 사용자 인터페이스 빌드
- NEWID를 사용하여 레코드 임의 정렬
- 타이머 컨트롤 사용
저자 정보
여러 ASP/ASP.NET 책의 저자이자 4GuysFromRolla.com 창립자인 Scott Mitchell은 1998년부터 Microsoft 웹 기술을 연구해 왔습니다. Scott은 독립 컨설턴트, 트레이너 및 작가로 일합니다. 그의 최신 책은 샘스 자신을 가르친다 ASP.NET 3.5 24 시간. Scott은 에서 mitchell@4GuysFromRolla.com 또는 에서 자신의 블로그 http://ScottOnWriting.NET를 통해 연락할 수 있습니다.
특별 감사
이 자습서 시리즈는 많은 유용한 검토자가 검토했습니다. 예정된 MSDN 문서를 검토하시겠습니까? 그렇다면 에서 줄을 놓습니다. mitchell@4GuysFromRolla.com
피드백
출시 예정: 2024년 내내 콘텐츠에 대한 피드백 메커니즘으로 GitHub 문제를 단계적으로 폐지하고 이를 새로운 피드백 시스템으로 바꿀 예정입니다. 자세한 내용은 다음을 참조하세요. https://aka.ms/ContentUserFeedback
다음에 대한 사용자 의견 제출 및 보기