Async Postback -Asp.net 다음에 스크롤 위치를 재설정하십시오

StackOverflow https://stackoverflow.com/questions/616210

문제

비동기 포스트 백 이후 스크롤 위치를 페이지 상단으로 재설정하는 가장 좋은 방법은 무엇입니까?

비동기 포스트 백은 ASP.NET GridView CommandField 열에서 시작되며 ASP.NET 업데이트 패널 업데이트 메소드는 GridView OnRowCommand에서 호출됩니다.

현재 응용 프로그램은 ASP.NET 3.5 웹 사이트입니다.

편집하다: 나는 모든 사람으로부터 훌륭한 피드백을 받았으며 스크립트 태그에서 PagerequestManager 메소드를 사용하여 끝났지 만 다음 질문은 다음과 같습니다.

GridView Control에서 사용자가 ASP.NET CommandField를 클릭 할 때만 실행하도록 구성하려면 어떻게 구성합니까? 페이지 상단으로 스크롤하지 않으려는 비동기 포스트 백을 수행하는 페이지에 다른 버튼이 있습니다.

편집 1 : PagerequestManager를 사용할 필요가없는 솔루션을 개발했습니다. 솔루션에 대한 내 후속 답변을 참조하십시오.

도움이 되었습니까?

해결책 3

다음은 이것을 기반으로 개발 한 다음 솔루션입니다. 원천

asp.net webform

<script language="javascript" type="text/javascript">
   function SetScrollEvent() {
      window.scrollTo(0,0);
   }
</script> 

<asp:GridView id="MyGridView" runat="server" OnRowDataBound="MyGridView_OnRowDataBound">
    <Columns>
        <asp:CommandField ButtonType="Link" ShowEditButton="true" />
    </Columns>
</asp:GridView>

ASP.NET WebForm 코드 뒤에 있습니다

protected void MyGridView_OnRowDataBound(object sender, GridViewRowEventArgs e)
{
    if(e.Row.RowType.Equals(DataControlRowType.DataRow))
    {
        foreach (DataControlFieldCell cell in e.Row.Cells)
        {
            foreach(Control control in cell.Controls)
            {
                LinkButton lb = control as LinkButton;

                if (lb != null && lb.CommandName == "Edit")
                    lb.Attributes.Add("onclick", "SetScrollEvent();");
            }
        }
    }
}

다른 팁

UpdatePanels를 사용하면 ASP.NET AJAX에 연결해야합니다. PagerequestManager

메소드를 추가해야합니다 엔드 레퍼스트 이벤트 후크입니다.

비동기 우편 백이 완료되고 제어가 브라우저로 반환 된 후에 발생합니다.

그래서 당신은 다음과 같은 것이 있습니다.

<script type="text/javascript">
  Sys.WebForms.PageRequestManager.getInstance().add_endRequest(pageLoaded);

  function pageLoaded(sender, args) {
     window.scrollTo(0,0);
  }
</script>

업데이트 요청이 완료되면 브라우저가 페이지 상단으로 다시 스크롤해야합니다.

물론 다른 이벤트가 있습니다.

beginRequest // Raised before the request is sent
initializeRequest // Raised as the request is initialised (good for cancelling)
pageLoaded // Raised once the request has returned, and content is loaded
pageLoading // Raised once the request has returned, and before content is loaded

비동기식 포스트백의 아름다움은 페이지가 "전체 페이지 재 장전"이 없으므로 유지 관리를 설정하지 않고도 스크롤 높이를 유지한다는 것입니다.이 경우 실제로 해당 효과가 발생하기를 원하므로 수동으로 만들어.

업데이트 된 질문에 응답하려면 편집하십시오

좋아, 따라서 특정 버튼 누름에 위치 만 재설정 해야하는 경우 다음과 같은 작업을 수행해야합니다.

대신 Tegrequest에 연결하여 시작하십시오.

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);

Args 매개 변수에서 다음에 액세스하기 때문입니다.

args.get_postBackElement().id

전체 이벤트를 시작한 버튼의 ID를 알려줍니다. 그런 다음 여기에서 값을 확인한 다음 페이지를 이동하거나 변수에 저장 한 다음 마지막 요청에 쿼리하여 레이스 조건을 인식 할 수 있습니다. 기타 사용자가 원래 업데이트가 완료되기 전에 다른 버튼을 클릭하는 경우.

그것은 당신이 행운으로 갈 것입니다 -이 주위에 몇 가지 예가 있습니다. PagerequestManager 이벤트와 협력합니다

다음은 Ajax에서 스크롤 막대 위치를 맨 위로 재설정하는 완벽한 솔루션입니다.

클라이언트 사이드 코드

function ResetScrollPosition()
{
    setTimeout("window.scrollTo(0,0)", 0);
}

서버 사이드 코드 

ScriptManager.RegisterStartupScript(Page, this.GetType(), "ScrollPage", "ResetScrollPosition();", true);

Window.scrollto (0,0) 만 작동하지 않습니다. 이 경우 Ajax는 우선 순위가 우선하므로 Settimeout 기능을 사용해야합니다.

asp.net ajax를 사용하고 있습니까? 그렇다면 클라이언트 라이브러리에 BeginRequest와 EndRequest에 두 가지 유용한 이벤트가 있습니다. 부분/비동기 Postbacks의 문제 중 하나는 일반 페이지가 당신이하고있는 일에 대한 단서를 얻지 못했다는 것입니다. 시작 및 엔드 레퍼스트 이벤트는 클라이언트에서 스크롤 위치를 유지할 수있게 해줄 수 있습니다. js가 var를 가질 수 있습니다. 물론이 일이 전에는 본 적이 있지만 링크를 찾을 수 없습니다. 내가 예를 찾으면 게시 할 것입니다

이 튜토리얼에서 가져온 :

http://aspnet.4guysfromrolla.com/articles/111407-1.aspx

우리는 유지 관리를 설정합니다

그런 다음 스크롤 위치를 재설정 해야하는 경우 메소드를 호출합니다.

Private Sub ResetScrollPosition()
If Not ClientScript.IsClientScriptBlockRegistered(Me.GetType(), "CreateResetScrollPosition") Then
   'Create the ResetScrollPosition() function
   ClientScript.RegisterClientScriptBlock(Me.GetType(), "CreateResetScrollPosition", _
                    "function ResetScrollPosition() {" & vbCrLf & _
                    " var scrollX = document.getElementById('__SCROLLPOSITIONX');" & vbCrLf & _
                    " var scrollY = document.getElementById('__SCROLLPOSITIONY');" & vbCrLf & _
                    " if (scrollX && scrollY) {" & vbCrLf & _
                    "    scrollX.value = 0;" & vbCrLf & _
                    "    scrollY.value = 0;" & vbCrLf & _
                    " }" & vbCrLf & _
                    "}", True)

   'Add the call to the ResetScrollPosition() function
   ClientScript.RegisterStartupScript(Me.GetType(), "CallResetScrollPosition", "ResetScrollPosition();", True)
End If
End Sub

페이지 속성을 유지 관리 했습니까? Async Postback을 수행하는 경우 그렇지 않은지 확실하지 않습니다.

편집 : 시도 할 수있는 한 가지는 페이지 상단 근처의 특정 항목에 초점을 맞추는 것입니다. 이는 더러운 작업이 될 수 있습니다.

asp.net 양식이 다시 게시되기 전에 설정 한 hscrolltop이라는 숨겨진 입력을 사용합니다. 그런 다음 페이지가로드되면 숨겨진 입력의 값에 따라 스크롤 탑을 설정합니다.

새 페이지 에서이 코드를 사용해보십시오.

<div style="height:500px"></div>

<form id="Form1" runat=server onsubmit="javascript:saveScrollTop();">
    <input type=submit value="Submit" runat=server>
    <input type="hidden" id="hScrollTop" runat=server>
</form>

<div style="height:1000px"></div>

<script language="javascript">
    function saveScrollTop() {
        document.getElementById("<%= hScrollTop.ClientID %>").value = document.body.scrollTop;
        return true;
    }

    window.onload = function() {
        document.body.scrollTop = document.getElementById("<%= hScrollTop.ClientID %>").value;
    }

</script>

Page.RegisterStartupScript("MyScript", "<script language=javascript>setTimeout('window.scrollTo(0,0)', 0);</script>");

위를 페이지 상단으로 이동하도록 지시하려는 함수에 위의 내용을 넣으십시오. 페이지가 유효하지 않은 경우와 같이, 거기에 있으면 임시 JavaScript를 추가하여 페이지 상단으로 촬영합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top