JavaScript를 사용한 ASP.NET 포스트 백

81

나는 draggable을 div활용하는 여러 개의 작은 s가 있습니다 jQuery. 이들은 div에 배치되고 UpdatePaneldragstop에서 _doPostBack()JavaScript 함수를 사용 하여 페이지 양식에서 필요한 정보를 추출합니다.

내 문제는이 함수를 호출하면 전체 페이지가 다시로드되지만 업데이트 패널 만 다시로드되기를 원한다는 것입니다.

javascript  asp.net  webforms  updatepanel  postback 
— 어니 스팅 스
소스
div 모두 고유 ID가 있습니까?
— Nathan Taylor

답변:

228

다음은 완벽한 솔루션입니다.

asp.net 페이지의 전체 양식 태그

<form id="form1" runat="server">
    <asp:LinkButton ID="LinkButton1" runat="server" /> <%-- included to force __doPostBack javascript function to be rendered --%>

    <input type="button" id="Button45" name="Button45" onclick="javascript:__doPostBack('ButtonA','')" value="clicking this will run ButtonA.Click Event Handler" /><br /><br />
    <input type="button" id="Button46" name="Button46" onclick="javascript:__doPostBack('ButtonB','')" value="clicking this will run ButtonB.Click Event Handler" /><br /><br />

    <asp:Button runat="server" ID="ButtonA" ClientIDMode="Static" Text="ButtonA" /><br /><br />
    <asp:Button runat="server" ID="ButtonB" ClientIDMode="Static" Text="ButtonB" />
</form>

페이지 코드 비하인드 클래스의 전체 내용

Private Sub ButtonA_Click(sender As Object, e As System.EventArgs) Handles ButtonA.Click
    Response.Write("You ran the ButtonA click event")
End Sub

Private Sub ButtonB_Click(sender As Object, e As System.EventArgs) Handles ButtonB.Click
    Response.Write("You ran the ButtonB click event")
End Sub
  • LinkButton은 __doPostBack javascript 함수가 클라이언트에 렌더링되도록하기 위해 포함됩니다. 단순히 Button 컨트롤이 있다고해서이 __doPostBack 함수가 렌더링되지는 않습니다. 이 기능은 대부분의 ASP.NET 페이지에 다양한 컨트롤이 있기 때문에 렌더링되므로 일반적으로 빈 링크 단추가 필요하지 않습니다.

무슨 일이야?

두 개의 입력 컨트롤이 클라이언트에 렌더링됩니다.

<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
  • __EVENTTARGET __doPostBack의 인수 1을받습니다.
  • __EVENTARGUMENT __doPostBack의 인수 2를받습니다.

__doPostBack 함수는 다음과 같이 렌더링됩니다.

function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
  • 보시다시피 숨겨진 입력에 값을 할당합니다.

양식 제출 / 포스트 백 발생시 :

  • javascript:__doPostBack('ButtonB','')버튼 클릭 처리기 를 실행할 서버 제어 버튼의 UniqueID ()를 제공하면 해당 버튼에 대한 버튼 클릭 처리기가 실행됩니다.

클릭 핸들러를 실행하지 않고 대신 다른 작업을 수행하려면 어떻게해야합니까?

원하는 것은 무엇이든 인수로 전달할 수 있습니다. __doPostBack

그런 다음 숨겨진 입력 값을 분석하고 그에 따라 특정 코드를 실행할 수 있습니다.

If Request.Form("__EVENTTARGET") = "DoSomethingElse" Then
    Response.Write("Do Something else") 
End If

기타 참고 사항

  • 클릭 처리기를 실행할 컨트롤의 ID를 모르는 경우 어떻게합니까?
    • 을 설정할 ClientIDMode="Static"수없는 경우 다음과 같이 할 수 있습니다 __doPostBack('<%= myclientid.UniqueID %>', '')..
    • 또는: __doPostBack('<%= MYBUTTON.UniqueID %>','')
    • 원하는 경우 컨트롤의 고유 ID를 자바 스크립트에 삽입합니다.
— 브라이언 웹스터
소스
48
완전성을 위해 +1. StackOverflow를 사랑하게 만드는 훌륭한 답변입니다.
— Manitra Andriamitondra
3
이것은 내가 본 __doPostBack () ..에 대한 최고의 설명 중 하나입니다. 이것에 대해 +10!
— GuruC
1
@BrianWebster, 자세한 게시물에 감사드립니다. VB.NET 대신 C #을 사용하여 ASP.NET 3.5 이하를 사용하는 사람이 .aspx 파일의 마지막 두 줄을 다음과 같이 변경하도록 제안 할 수 있습니까? <asp : Button runat = "server"ID = "ButtonA"Text = "ButtonA"OnClick = "ButtonA_Click"/> <br /> <br /> <asp : Button runat = "server"ID = "ButtonB"Text = "ButtonB"OnClick = "ButtonB_Click"/>
— yangli.liy 2013
1
이것은 매우 유용한 솔루션입니다. 마스터 페이지를 사용하는 경우 버튼의 ID가 약간 난독 화됩니다. 포스트 백에 대한 올바른 ID를 얻는 데 도움이 필요하면 아래 user489998의 답변을 참조하십시오.
— DCastenholz 2014-06-19
1
@BrianWebster 누군가의 문제에 대한 완전한 해결책을 제공하고 잠재적 인 편차에 대한 적절한 대안을 제공 할 수있는 사람은 정말 드뭅니다.
— GoldBishop
15

Per Phairoh : 패널 이름이 변경되는 경우 페이지 / 컴포넌트에서 이것을 사용하십시오.

<script type="text/javascript">
     <!--
     //must be global to be called by ExternalInterface
         function JSFunction() {
             __doPostBack('<%= myUpdatePanel.ClientID  %>', '');
         }
     -->
     </script>
— Laramie
소스
10

Phairoh의 해결책은 이론적으로 타당 해 보이지만이 문제에 대한 또 다른 해결책을 찾았습니다. doPostBack 함수에 대한 매개 변수 (이벤트 대상)로 UpdatePanels ID를 전달하면 업데이트 패널이 다시 게시되지만 전체 페이지는 표시되지 않습니다.

__doPostBack('myUpdatePanelId','')

* 참고 : 두 번째 매개 변수는 이벤트 인수 추가 용입니다.

이것이 누군가를 돕기를 바랍니다!

편집 : 그래서 내가 입력 할 때 위와 같은 조언이 주어진 것 같습니다 :)

— 어니 스팅 스
소스
2
이것은 효과가있을 것이고 응용 프로그램에서 비슷한 작업을 수행했지만 실제로는 좋은 생각이 아니며 그렇게했을 때해야했던 것이 싫습니다. 업데이트 패널의 이름이 변경되면 중단됩니다. 이것을 사용자 정의 컨트롤 안에 넣으면 깨집니다. 마스터 페이지를 추가하면 중단됩니다. 예, 작동하지만 매우 취약합니다. 최소한 정적 문자열 대신 업데이트 패널의 ClientId 속성을 사용하세요.
— phairoh
9

__doPostBack직접 사용 하는 것은 2000 년대 sooooo입니다. 2018 년에 WebForms를 코딩하는 사람은 누구나 GetPostBackEventReference를 사용합니다.

(더 심각하게는 이것을 완전성에 대한 답으로 추가하는 것입니다. __doPostBack직접 사용하는 것은 좋지 않습니다 (단일 밑줄 접두사는 일반적으로 개인 구성원을 나타내고 이중은보다 보편적 인 개인 구성원을 나타냄). 우리는 ClientScriptManager.GetPostBackEventReference 에서 완전히 지원되는 메커니즘을 가지고 있습니다 .)

btnRefresh가 UpdatePanel 내부에 있고 포스트 백이 발생한다고 가정하면 다음과 같이 GetPostBackEventReference를 사용할 수 있습니다 ( inspiration ).

function RefreshGrid() {
    <%= ClientScript.GetPostBackEventReference(btnRefresh, String.Empty) %>;
}
— mlhDev
소스
이것은 아주 잘 작동합니다. 제 상황에서는 HTML 마크 업에서 btnRefresh를 클릭 할 때 새로 고칠 Target AJAX 컨트롤을 선언 할 수 있습니다. 이것을 사용함으로써 AJAX에 대한 지원으로 이것을 구현하는 것이 매우 간단 해졌습니다.
— DanielG
6

누구든지 이것에 문제가있는 경우 (나처럼) 버튼에 UseSubmitBehavior = "false"속성을 추가하여 버튼에 대한 포스트 백 코드를 얻을 수 있습니다. 버튼의 렌더링 된 소스를 살펴보면 실행해야하는 정확한 자바 스크립트가 표시됩니다. 제 경우에는 ID가 아닌 버튼 이름을 사용했습니다.

— user489998
소스
마스터 페이지를 사용할 때 매우 유용합니다.
— DCastenholz 2014-06-19
1
__doPostBack은 마스터 페이지를 사용할 때 항상 버튼의 이름을 사용하는 것 같습니다.
— Dennis T-Monica 복원-'14
2

업데이트 패널의 클라이언트 ID를 __doPostBack 함수에 전달해 보셨습니까? 우리 팀은 업데이트 패널을 새로 고치기 위해이 작업을 수행했으며 내가 아는 한 작동했습니다.

__doPostBack(UpdatePanelClientID, '**Some String**');
— 제레미 베이 드
소스
1

첫째, 업데이트 패널을 사용하지 마십시오. 이것은 마이크로 소프트가 웹 개발자를 위해 만든 두 번째로 악한 것입니다.

둘째, 업데이트 패널 을 사용해야 하는 경우 UpdateMode 속성을 Conditional로 설정해보십시오. 그런 다음 페이지에 추가하는 Asp : Hidden 컨트롤에 트리거를 추가합니다. 변경 이벤트를 트리거로 지정하십시오. dragstop 이벤트에서 숨겨진 컨트롤의 값을 변경합니다.

이것은 테스트되지 않았지만 이론은 소리가 나는 것 같습니다 ... 이것이 작동하지 않으면 asp : button으로 동일한 것을 시도하고 display : none 스타일을 설정하고 변경 이벤트 대신 클릭 이벤트를 사용하십시오.

— 페이로
소스
7
마이크로 소프트가 웹 개발자를 위해 만든 최초의 가장 악한 것은 무엇입니까?
— ErnieStings
2
로그인 컨트롤은 그 목록에서 꽤 높은 곳에 있어야합니다.
— kim3er 2009-08-20
1
UpdatePanels가 왜 그렇게 악한 지 설명해 주시겠습니까? 그렇다면 그 이유와 사용하지 않는 이유를 읽고 싶습니다. 지금까지 UpdatePanels에서 중요한 문제를 발견하지 못했습니다.
— Jan Kukacka 2015
@JanKukacka 그들은 AJAX의 열악한 추상화입니다. 업데이트 패널 작성에서 배운 기술은 ASP.NET Web Forms 외부의 모든 것에서 AJAX를 올바르게 활용할 수있는 것으로 직접 변환되지 않습니다. UpdatePanel은 디버그하기 어렵습니다. ViewState가 켜져 있으면 많은 양의 데이터가 불필요하게 서버로 /에서 서버로 전송되어 대역폭을 많이 사용합니다. 포스트 백을 수행하지 않고 서버와 대화해야 할 때 적절한 AJAX (아마도 jQuery와 같은 일부 경량 추상화 계층을 사용하여)를 학습하는 것이 훨씬 더 나은 솔루션입니다.
— mason
1

_doPostBack()양식 제출을 강제하기 때문에 전화를 걸 수 없습니다 . 왜 당신은 해제하지 않는 PostBack온 UpdatePanel?

— 알렉스 로드리게스
소스
1
질문. div를 끌면 _doPostBack이 사용자 또는 ASP.NET에 의해 자동으로 호출됩니까?
— Alex Rodrigues
그것은 자바 스크립트를 통해 저에 의해 호출됩니다
— ErnieStings
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.