2013-04-02 4 views
3

전체 페이지를 클릭 할 때 새로 고치지 않으려면 asp 버튼을 만들어야합니다.버튼 클릭시 페이지 새로 고침 중지

내 코드는 그림을 다른 그림으로 변경하기 만하면 그림의 색인이 페이지로드 방법으로 설정됩니다. 그리고 버튼을 클릭하여 다음 그림 인덱스로 이동할 때마다 전체 페이지가 새로 고침되고 페이지로드 방식이 호출됩니다. 그 후 다시 0으로 나는 버튼 여기

를 클릭하면 페이지로드 메소드를 호출 페이지 정지를 할 수있는 방법

에 인덱스 나 테이블에

을 기본 코드를 사용하고있어를 설정합니다 :

<tr> 
    <td> <asp:Button ID="Button1" runat="server" Text="Prev" OnClick="Button1_Click" OnClientClick="return false"/> </td> 
    <td> <img ID="pic" alt="" src="010.JPG" runat="server" width="200" height="200" /> </td> 
    <td> <asp:Button ID="Button2" runat="server" Text="Next" OnClick="Button2_Click" OnClientClick="return false"/> </td> 
</tr> 

이는 .cs이

private List<String> imagePathList = new List<String> { }; 
private List<Boolean> isActivePath = new List<Boolean> { }; 

protected void Page_Load(object sender, EventArgs e) 
{ 
     Debug.WriteLine("GALLARY *page load*"); 

     pic.Width = 200; 
     pic.Height = 200; 

     addToList(); 

     getImagePath(1); 
} 
protected void Button1_Click(object sender, EventArgs e) 
{ 
    Debug.WriteLine("GALLARY *Button1_Click*"); 
    int index = getActive(); 
    getImagePath(index = index - 1); 
} 
protected void Button2_Click(object sender, EventArgs e) 
{ 
    Debug.WriteLine("GALLARY *Button2_Click*"); 
    int index = getActive(); 
    getImagePath(index = index + 1); 
} 

private void getImagePath(int index) 
{ 
    Debug.WriteLine("GALLARY *getImagePath* index = "+index); 
    int length = imagePathList.Count; 

    if (index < length && index >= 0) 
    { 
     //pic.Src = imagePathList[index]; 
     //pic.Alt = imagePathList[index]; 
     pic.Src = imagePathList[index]; 
     pic.Alt = imagePathList[index]; 
     setActive(index); 
    } 
    else 
    { 
     pic.Src = "DOES NOT EXIST"; 
     pic.Alt = "DOES NOT EXIST"; 
    } 
} 

private void addToList() 
{ 
    Debug.WriteLine("GALLARY *addToList*"); 
    imagePathList.Clear(); 
    isActivePath.Clear(); 

    addImage("08.JPG"); 
    addImage("09.JPG"); 
    addImage("010.JPG"); 
    addImage("011.JPG"); 
    addImage("012.JPG"); 
} 

private void addImage(String filename) 
{ 
    Debug.WriteLine("GALLARY *addImage* filename = "+filename); 
    imagePathList.Add(filename); 
    isActivePath.Add(false); 
} 
private void setActive(int index) 
{ 
    Debug.WriteLine("GALLARY *setActive* index = " + index); 
    for (int i = 0; i > isActivePath.Count; i++) 
    { 
     isActivePath[i] = false; 
    } 

    isActivePath[index] = true; 
} 
private int getActive() 
{ 
    Debug.Write("GALLARY *getActive*"); 
    int temp = 0; 
    for (int i = 0; i > isActivePath.Count; i++) 
    { 
     if (isActivePath[i] == true) 
     { 
      temp = i; 
     } 
    } 
    Debug.WriteLine("index = " + temp); 
    return temp; 
} 
+0

'Button'에 'postback' 속성을 false로 설정했습니다. – Mido

+1

나는 updatepannel을 원합니다. –

+0

또는 html 버튼 사용을 고려합니다. 하지만 당신은 서버 측 코드에 접근 할 수 없을 것이다. (자바 스크립트를 대신 사용해야 할 것이다.) –

답변

-1
onClientClick="return false" 
파일입니다

그렇게해야합니다! Onclick은 ASP.net 함수를 참조하며 onClientClick은 HTML의 컨트롤에서 OnClick으로 렌더링합니다.

4

부분 업데이트에는 UpdatePanel을 사용해야합니다.

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

    <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Always" > 
    <ContentTemplate> 
    <asp:Image ID="Image1" runat="server" Height="23px" Width="24px" /> 

    <asp:Button ID="btnImageChange" runat="server" Text="Check" OnClick="btnImageChange_Click1" /> 
    </ContentTemplate> 
    <Triggers> 
    <asp:AsyncPostBackTrigger ControlID="btnImageChange" EventName="Click" /> 
    </Triggers> 
    </asp:UpdatePanel> 

그런 다음 코드에서 .cs이 쓰기 뒤에 : 뒤의 WebMethod 쓰기 버튼을

protected void btnImageChange_Click1(object sender, EventArgs e) 
    { 
    // you can add a loop here for the list of images... 
      Image1.ImageUrl = "~/Images/loading.gif"; 

} 
+0

이 페이지는 아무 문제가 없습니다 ...로드 페이지 메서드가 여전히 호출되고 있기 때문에 이미지가 변경되지 않습니다 – Julie20

+0

업데이트했습니다 ... 이 라인을 추가하십시오.이 라인을 추가하십시오. reaz

+0

이것은 OP를위한 가장 적절한 해결책 일 것입니다. 클라이언트 측에서 반환하는 것은 잘못되었습니다. OP가 실행해야하는 서버 측 코드는 어쨌든 실행되지 않습니다. –

-2

코드에서

 <script type="text/Javascript"> 
    function ChangeIndex(){ 
     $.ajax({ 
       url: "Url of your page/Methodname", 
       data: JSON.stringify({variableName,VariableValue}), 
       dataType: 'json', 
       type: 'POST', 
       contentType: 'application/json', 
       success: function (data) { 
        //set your image scr here 
       }, 
       error: function (data, status, jqXHR) { 
        //alert('There was an error.'); 
       } 

      } 
     </script> 

functon이 자바 스크립트를 호출 클릭

[WebMethod] 
    public static string Methodname(string variableName) 
    { 
     //Logic to get the index. 
     return "Index"; 
    } 

희망이 도움이됩니다. 제가 더 이상 당신을 도울 수 있도록 코드를 게시하십시오.

-2

그런 구식 버튼을 구현하지 마십시오. 대신 fly buttons 또는 jQuery 트리거 된 버튼을 사용하여 다시 게시하지 않을 수 있습니다.