구성 요 소 를 작성 하고 자바 스 크 립 트 로 업데이트 패 널 을 업데이트 합 니 다.

다음으로 전송:
http://www.cnblogs.com/JeffreyZhao/archive/2007/01/31/update_the_updatepanels_by_js.html
UpdatePanel 은 Trigger 를 통 해 업 데 이 트 된 것 으로 알려 져 있다.Trigger 로 설 정 된 컨트롤 은 PostBack 이후 클 라 이언 트 에 의 해 캡 처 되 고 XML HttpRequest 대상 으로 콘 텐 츠 를 보 낸 다음 서버 쪽 에서 ScriptManager 가 협조 하여 Page 대상 의 출력 을 변경 하여 부분 새로 고침 효 과 를 얻 습 니 다.그러나 때때로 우 리 는 자바 스 크 립 트 를 사용 하여 UpdatePanel 을 새로 고 쳐 야 할 때 가 있 습 니 다. 이 럴 때 는 그다지 불편 합 니 다.
물론, 우 리 는 또 하나의 Workaround 에 속 하 는 방법 은 자바 스 크 립 트 를 사용 하여 단 추 를 누 르 는 것 입 니 다.우 리 는 종종 하나의 단 추 를 특정한 UpdatePanel 의 Trigger 로 설정 한 다음 에 클 라 이언 트 에서 그의 클릭 을 모 의 합 니 다. (제 가 나중에 언급 할 것 입 니 다. 사실은 이것 은 비교적 나 쁜 방법 입 니 다. 필요 없습니다) 업데이트 Panel 을 업데이트 시 킵 니 다.하지만 이런 방법 은 너무 번 거 롭 고 우아 하지 도 않다.
지금 우 리 는 구성 요 소 를 만들어 서 이 문 제 를 해결 할 것 이다.이 구성 요소 의 이름 은 JavaScriptUpdater 입 니 다. 별로 인 것 같 습 니 다. 저 는 이름 을 잘 짓 지 못 했 습 니 다.
일단 원 하 는 걸 정 해 볼 게 요.
우리 의 목적 은 클 라 이언 트 에서 자바 스 크 립 트 대 리 를 만 들 기 위해 서 입 니 다. 이 를 호출 한 후에 페이지 를 새로 고 칠 수 있 는 방법 을 제공 하 는 것 입 니 다.UpdatePanel 의 UpdateMode 가 Always 라면 반드시 업 데 이 트 됩 니 다.UpdateMode 를 Conditional 의 UpdatePanel 로 업데이트 하려 면 페이지 에 tag 를 작성 하여 어떤 UpdatePanel 도 업데이트 되 는 지 설정 해 야 합 니 다.우 리 는 가능 한 한 프로 그래 밍 작업 을 최소 화 할 필요 가 있다.
우리 가 먼저 사용 방식 을 고려 하 는 것 이 좋 습 니 다. 우리 가 작성 한 이 JavaScriptUpdater 는 페이지 에서 이렇게 사용 할 수 있 습 니 다: JavaScriptUpdater 사용 방식

<helper:JavaScriptUpdater runat="server" ID="Updater" MethodName="Refresh"
ResolveUpdatePanel="OnResolveUpdatePanel" Enabled="True">
<UpdatePanels>
<helper:UpdatePanel UpdatePanelID="UpdatePanel1" />
...
</UpdatePanels>
</helper:JavaScriptUpdater>

JavaScriptUpdater 는 클 라 이언 트 에서 프 록 시 를 만 드 는 방법 을 나타 내 는 간단 한 속성 MethodName 이 있 습 니 다.상기 예 에서 이 속성 은 Refresh 로 UpdatePanels. Refresh () 방법 으로 UpdatePanel 업 데 이 트 를 진행 할 것 임 을 나타 낸다.UpdatePanels 는 집합 속성 으로 어떤 UpdateMode 를 Conditional 의 UpdatePanel 로 지정 하여 함께 업데이트 할 수 있 습 니까?UpdatePanelID 를 찾 지 못 하면 ResolveUpdatePanel 이 벤트 를 호출 하여 UpdatePanel 을 지정 하도록 합 니 다.이 JavaScriptUpdater 가 적용 되 는 지 여 부 를 제어 하 는 Enabled 속성 도 있 습 니 다.
한 페이지 에 여러 개의 JavaScriptUpdater 를 설치 하면 여러 개의 JavaScript 프 록 시 방법 을 생 성 할 수 있 습 니 다.이런 설정 은 충분히 사용 할 수 있 을 것 이다.
JavaScriptUpdater 구현
자 연 스 럽 게, 우 리 는 먼저 가장 간단 한 두 가지 유형, UpdatePanel Helper. UpdatePanel 류 와 ResolveUpdatePanel EventArgs 류 를 정의 합 니 다.정말 간단 하기 때문에 코드 를 직접 붙 였 습 니 다: UpdatePanel 류
ResolveUpdatePanelEventArgs 클래스

namespace UpdatePanelHelper
{
public class UpdatePanel
{
private string _UpdatePanelID;
public string UpdatePanelID
{
get { return _UpdatePanelID; }
set { _UpdatePanelID = value; }
}
}
}

그리고 가장 중요 한 JavaScriptUpdater 클래스 를 만 드 는 것 을 고려 하기 시 작 했 습 니 다.먼저 간단 한 프레임 워 크 를 정의 합 니 다. 다음 과 같 습 니 다. JavaScriptUpdater 컨트롤 의 전체 프레임 워 크 와 속성 정의

namespace UpdatePanelHelper
{
public class ResolveUpdatePanelEventArgs : EventArgs
{
private string _ID = null;
public string ID
{
get { return _ID; }
}
private System.Web.UI.UpdatePanel _UpdatePanel = null;
public System.Web.UI.UpdatePanel UpdatePanel
{
get { return _UpdatePanel; }
set { _UpdatePanel = value; }
}
public ResolveUpdatePanelEventArgs(string id)
{
this._ID = id;
}
}
}

Enabled 나 MethodName 속성 이 페이지 Init 에서 만 수 정 될 수 있 도록 initialized 변 수 를 사용 합 니 다.컨트롤 은 여러 라 이 프 사이클 에서 작 동 하기 때문에 이러한 제한 을 하지 않 으 면 제어 가 번 거 롭 고 실수 하기 쉽다.아래 코드 에서 페이지 의 InitComplete 이벤트 에 응답 할 때 initialized 변 수 를 true 로 설정 합 니 다.
우 리 는 여기 서 자바 스 크 립 트 업데이트 패 널 을 업데이트 하 는 방법 을 실현 합 니 다. 전통 적 인 방법 과 는 다 릅 니 다. 다만 우 리 는 동적 으로 단 추 를 추가 하고 여기 서 LinkButton 을 사용 합 니 다.페이지 대상 의 Load 이벤트 에 응답 하여 Trigger 로 서 의 LinkButton 을 추가 합 니 다.다음: 동적 추가 LinkButton

namespace UpdatePanelHelper
{
[PersistChildren(false)]
[ParseChildren(true)]
[NonVisualControl]
public class JavaScriptUpdater : Control
{
private bool initialized = false;
private bool _Enabled = true;
public bool Enabled
{
get
{
return this._Enabled;
}
set
{
if (this.initialized)
{
throw new InvalidOperationException(
                        "Cannot set the property after initialized.");
}
this._Enabled = value;
}
}
private string _MethodName;
public string MethodName
{
get
{
return this._MethodName;
}
set
{
if (this.initialized)
{
throw new InvalidOperationException(
                        "Cannot set the property after initialized.");
}
this._MethodName = value;
}
}
public event EventHandler<ResolveUpdatePanelEventArgs> ResolveUpdatePanel;
private List<UpdatePanel> _UpdatePanels = new List<UpdatePanel>();
[PersistenceMode(PersistenceMode.InnerProperty)]
public List<UpdatePanel> UpdatePanels
{
get
{
return _UpdatePanels;
}
}
...
}
}

우리 페이지 에 있 는 PageInitComplete 이벤트 에서 Enabled 속성 이 true 인지 판단 합 니 다 (이 때 Enabled 속성 은 수정 할 수 없습니다). Enabled 가 ture 이면 페이지 의 Load 이벤트 에 응답 하여 LinkButton 을 동적 으로 추가 합 니 다.Visible 속성 을 False 로 설정 하지 않 습 니 다. 그렇지 않 으 면 HTML 이 페이지 에 나타 나 지 않 습 니 다.페이지 구조 에 도 나타 나 지 않 고 스타일 의 display 를 none 으로 설정 해 야 합 니 다.이 LinkButton 을 추가 하면 클 라 이언 트 ID 를 유지 하고 현재 페이지 의 ScriptManager 를 찾 아 RegisterAsyncPostBackControl 방법 을 사용 하여 이 LinkButton 을 비동기 새로 고침 페이지 의 컨트롤 로 등록 합 니 다.
예전 에 제 가 다른 사람 에 게 보 낸 범례 는 모두 Button 을 Trigger 로 사용 한 다음 에 클 라 이언 트 에서 JavaScript 를 사용 하여 클릭 했 습 니 다.이것 은 사실 매우 합 리 적 이지 않 고 비교적 좋 은 방법 은 사실 링크 버튼 을 사용한다.이 문제 의 원인 을 설명 하려 면 링크 버튼 이 페이지 에서 생 성 된 HTML 요 소 를 살 펴 봐 야 합 니 다.이것 은 < a / > 임 이 분명 합 니 다. 다음 과 같 습 니 다. LinkButton 에서 생 성 된 HTML 입 니 다.

private string clientButtonId = null;
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
this.Page.InitComplete += new EventHandler(Page_InitComplete);
}
private void Page_InitComplete(object sender, EventArgs e)
{
    this.initialized = true;

if (this.Enabled)
{
this.Page.Load += new EventHandler(Page_Load);
this.Page.PreRenderComplete += new EventHandler(Page_PreRenderComplete);
}
}
private void Page_Load(object sender, EventArgs e)
{
LinkButton button = new LinkButton();
button.Text = "Update";
button.ID = this.ID + "Button";
button.Style[HtmlTextWriterStyle.Display] = "none";
button.Click += new EventHandler(OnTrigger);
this.Page.Form.Controls.Add(button);
this.clientButtonId = button.ClientID;
ScriptManager.GetCurrent(this.Page).RegisterAsyncPostBackControl(button);
}

href 를 주의 하 십시오. 이 요 소 를 누 르 면 이 자바 스 크 립 트 코드 를 실행 할 것 임 을 표시 합 니 다.발 견 했 지?우 리 는 왜 원소 의 클릭 을 모 의 할 필요 가 있 습 니까? 우 리 는 직접 를 호출 합 니 다.doPost Back 함수 면 되 잖 아 요.Cool！그래서 이 제 는 페이지 의 PreRenderComplete 이벤트 에 응답 할 때 등록 해 야 할 Script 스 크 립 트 를 쉽게 얻 을 수 있 습 니 다.다음: PreRenderComplete 이벤트 에 스 크 립 트 를 등록 합 니 다.

<a id="UpdaterButton" href="javascript:__doPostBack('UpdaterButton','')">Update</a>

먼저 기본 스 크 립 트 를 등록 합 니 다. 저 희 는 같은 Type 과 Key 인 자 를 사용 하여 이 코드 가 한 번 만 등록 되 는 것 을 보장 합 니 다.모든 프 록 시 방법의 스 크 립 트 를 등록 할 때 이 스 크 립 트 의 client ButtonId 를 key 로 사용 하여 모든 스 크 립 트 가 등록 되 는 것 을 보장 합 니 다.참고 로 우 리 는 페이지 의 Client ScriptManager 를 사용 하여 스 크 립 트 를 등록 하여 비동기 업데이트 패 널 을 업데이트 할 때 스 크 립 트 를 클 라 이언 트 에 보 내지 않 을 것 을 보증 합 니 다.
친구 들 이 궁금 해 할 수도 있 습 니 다. 왜 우 리 는 페이지 의 PreRenderComplete 이벤트 에 스 크 립 트 를 등록 해 야 합 니까?페이지 의 Load 이벤트 에 함께 등록 하면 안 되 나 요?정 답 은 ScriptManager 도 이때 ASP. NET AJAX 의 기본 스 크 립 트 를 등록 하기 때 문 입 니 다. 저희 가 지금 이렇게 하 는 것 은 저희 가 등록 한 스 크 립 트 가 ASP. NET AJAX 의 스 크 립 트 뒤에 나타 날 수 있 도록 하기 위해 서 입 니 다.
아, 그 렇 군요.........................................................................맞 아, 사실 우 리 는 페이지 의 Load 이벤트 에 등록 할 수 있 는 방법 이 있 습 니 다. 저 는 지금 이렇게 하 는 것 이 습관 인 것 같 습 니 다. 아니면 ASP. NET AJAX 를 위 한 구성 요소 의 모드 인 페이지 에 응답 하 는 PreRenderComplete 이벤트, 등록 에 필요 한 스 크 립 트 입 니 다.
대부분의 작업 이 완료 되 었 습 니 다. 우 리 는 그 LinkButton 의 Click 이벤트 에 다시 응답 하면 됩 니 다.지정 한 UpdatePanel 을 강제로 업데이트 해 야 합 니 다.코드 는 다음 과 같 습 니 다. 아주 간단 합 니 다. 더 이상 설명 하지 않 겠 습 니 다. 업데이트 트리거

private const string BasicScripts =
@"if (!window.UpdatePanels) window.UpdatePanels = {};
UpdatePanels._createUpdateMethod = function(btnId)
{
return function()
{
__doPostBack(btnId, '');
}
}";
private const string RegisterMethodTemplate =
"/nUpdatePanels['{0}'] = UpdatePanels._createUpdateMethod('{1}');";
private void Page_PreRenderComplete(object sender, EventArgs e)
{
this.Page.ClientScript.RegisterClientScriptBlock(
this.GetType(),
"BasicScripts",
JavaScriptUpdater.BasicScripts,
true);
this.Page.ClientScript.RegisterClientScriptBlock(
this.GetType(),
this.clientButtonId,
String.Format(JavaScriptUpdater.RegisterMethodTemplate, 
this.MethodName, this.clientButtonId),
true);
}

JavaScriptUpdater 사용 하기
JavaScriptUpdater 는 매우 간단 합 니 다. 가장 간단 한 예 만 있 으 면 사용 방식 을 알 수 있 습 니 다. JavaScriptUpdater 는 예제 를 사용 합 니 다.

private void OnTrigger(object sender, EventArgs e)
{
if (this.Enabled)
{
foreach (UpdatePanel panel in this.UpdatePanels)
{
System.Web.UI.UpdatePanel updatePanel =
this.FindUpdatePanel(panel.UpdatePanelID);
if (updatePanel != null)
{
updatePanel.Update();
}
}
}
}
private System.Web.UI.UpdatePanel FindUpdatePanel(string id)
{
System.Web.UI.UpdatePanel result = null;
if (id != null)
{
result = this.NamingContainer.FindControl(id)
as System.Web.UI.UpdatePanel;
}
if (result == null)
{
ResolveUpdatePanelEventArgs e = new ResolveUpdatePanelEventArgs(id);
this.OnResolveUpdatePanel(e);
result = e.UpdatePanel;
}
return result;
}
private void OnResolveUpdatePanel(ResolveUpdatePanelEventArgs e)
{
if (this.ResolveUpdatePanel != null)
{
this.ResolveUpdatePanel(this, e);
}
}

맨 아래 에 정 의 된 단 추 를 누 르 면 UpdatePanels. Refresh () 방법 을 사용 하여 UpdatePanel 1 을 업데이트 합 니 다.UpdatePanel 1 의 UpdateMode 는 Condition al 입 니 다. 저 희 는 JavaScriptUpdater 에서 지정 하여 업 데 이 트 를 강제 하 는 데 사 용 됩 니 다.우 리 는 그것 이 생 성 한 자바 스 크 립 트 코드 와 HTML 을 다시 한 번 보면 그것 의 실현 방식 을 더욱 잘 알 수 있 을 것 이다.클 라 이언 트 에서 생 성 된 내용

<%@ Register Assembly="UpdatePanelHelper" Namespace="UpdatePanelHelper" TagPrefix="helper" %>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<%= DateTime.Now.ToString() %>
</ContentTemplate>
</asp:UpdatePanel>
<helper:JavaScriptUpdater runat="server" ID="Updater" MethodName="Refresh">
<UpdatePanels>
<helper:UpdatePanel UpdatePanelID="UpdatePanel1" />
</UpdatePanels>
</helper:JavaScriptUpdater>
<input type="button" onclick="UpdatePanels.Refresh()" value="Refresh" />

4. 567915. 원본 파일 을 다운로드 합 니 다.