한 동안 쉐어포인트 개발만 하다가 오늘 ASP.NET을 좀 사용하게 되어서 개발을 마치고 확인하던 중..

IE에서는 잘 보이는데 크롬에서 메뉴가 이상하게 나타나는 현상을 보게 되었습니다.

Rander 이벤트 부분을 전혀 타지를 않네요…

 

일단 저는 System.Web.UI.WebControls.Menu를 상속받아서 커스텀 컨트롤로 만든 상태이구요..

아래와 같이 IE에서는 정상적으로 나오는 것을 확인 할 수 있습니다.

 

헌데 크롬에서는 아래와 같이 나타납니다.

 

클릭해 보면 크롬의 경우 버튼으로 구현되어 자기 스스로 랜더링 부분을 확!!! 바꿔 버린 상태입니다.

검색하니 바로 나오긴 하네요..

 

방법은 코드를 넣는 방법과 그리고 ASP_Browsers 폴더에 browser 파일을 이용하는 방법이 있습니다.

일단 코드는 아래와 같이 작성하시면 됩니다.

protected void Page_PreInit(object sender, EventArgs e)
{
	if (Request.ServerVariables["http_user_agent"].IndexOf("Safari", StringComparison.CurrentCultureIgnoreCase) != -1)
	{
		Page.ClientTarget = "uplevel";
	}
}

// 혹은 아래와 같은 방법!

protected void Page_PreInit(object sender, EventArgs e)
{
	if (Request.UserAgent.Contains("AppleWebKit"))
		Request.Browser.Adapters.Clear();
}

 

그리고 Browser파일을 이용하는 방법은 프로젝트 파일에서 마우스 오른쪽 –> 추가 –> ASP.NET 폴더 추가 –> App_Browsers 추가 그리고 생성된 폴더에서 마우스 오른쪽 –> 추가 –> 새 파일 추가 –> browser 파일 선택 후 파일명은 chrome.browser 로 합니다.

 

그리고 아래 부분 코드 추가

<browsers>
	....
	<browser refID="Safari1Plus">
		<controlAdapters>
			<adapter controlType="System.Web.UI.WebControls.Menu" adapterType="" />
		</controlAdapters>
	</browser>
</browsers>

그리고 아직 운영에서 직접 돌려본 경험이 없어서. 어떻게 되는지 정확히는 말씀 못 드리겠습니다. ㅡ.ㅡ;;;;

일단 잘 나오긴 합니다. *_*

 

고맙습니다.


 

MSDN

Custom Site Map Providers in ASP.NET 2.0

Site Map Providers

 

Code

Web.config

 

 

aspx

 

MSSQL Table

 

 

MSSQL Stored Procedure

 

 

MSSQL Table-Data

 

 

SqlSiteMapProvider.cs

 

 

Output





 

asp.net에서 updatepanel을 사용하였을 경우

jquery 혹은 body tag 의 onload event가 동작하지 않습니다.

 

처음에는 동작하나. 이벤트가 발생하여  updatepanel이 동작한 후부터는 정상적인 동작이 되지 않습니다.

 

Sys.webForms.PageRequestManager를 이용하여 처리 할 수 있습니다.

 

다음은 예제 소스입니다.

aspx

	
	

다음 강조된 부분을 참고하시면 됩니다.
    

 

cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication2.Test
{
	public partial class UpdatePanel_In_Pageload_script : System.Web.UI.Page
	{
		protected void Page_Load(object sender, EventArgs e)
		{

		}

		protected void btnTest_Click(object sender, EventArgs e)
		{
			txtRunatServer.Value = "test";
		}
	}
}

asp.net을 이용하여 web page 작성 시.

treeview control을 이용하는 경우가 많이 있습니다.

 

헌데 이놈의 라인이.. 깨지는 현상이 발생 됩니다.

 

오늘은 그 수정 방안을 알아보고자 합니다.

 

현상은 아래와 같습니다.

 

Code는 아래와 같습니다.

Tree.aspx (class 설정을 다음과 같이 합니다. CssClass="treestyle")


 

style 추가로 해당 현상을 수정할 수 있습니다.

Tree.aspx


    
	

 

적용 후 모습입니다.

 

Internet Explorer 8

 

호환성 보기 모드

 

FireFox 3.6

 

이렇게 모든 브라우저에서 잘 되는 것을 확인 할 수 있습니다.

IE 6에서는 원래 잘나오더군요 *_*

 

감사합니다.





1.4 doPostBack() 함수 사용하기

 

ASP.NET에서 새롭게 소개 된 웹 폼 페이지에서 서버와의 Submit 동작을 포스트 백(PostBack)이라는 동작으로 처리하고 있습니다. 포스트 백은 버튼 컨트롤(Button, LinkButton, ImageButton)들을 등록하면 확인할 수 있습니다. 이런 포스트 백의 이벤트를 클라이언트 스크립트에서 직접 접근하여 처리하는 방법에 대해서 지금부터 알아보도록 하겠습니다.

 

① PostBack 알아보기

웹 폼을 하나 만든 후 LinkButton과 Button, ImageButton을 하나씩 추가하여 다음과 같이 만들어 봅시다.

 

■ PostBack.aspx

------------------------------------------------------------------------

<%@ Page language="c#" Codebehind="PostBack.aspx.cs" AutoEventWireup="false" Inherits="ClientScript.PostBack" %>


             
                           
                           
                           
                           
                           
             
             
                           

LinkButton



------------------------------------------------------------------------

 

PostBack.aspx 페이지를 실행하면 LinkeButton, Button, ImageButton이 출력되고, 각각의버튼을 클릭하면 포스트 백이 발생합니다. ASP.NET에서는 이렇듯 버튼 컨트롤을 사용하는 것 만으로도 포스트 백이 동작하도록 이미 정의가 되어 있는 것입니다. 실행결과를 간단히 살펴본 후 HTML 소스 보기를 이용하여 클라이언트에 출력되는 코드를 한번 살펴보도록 합시다. 다음은 HTML 소스 코드 중에 중요한 내용만 정리한 것입니다.

 

■ PostBack.aspx.html

------------------------------------------------------------------------

LinkButton


------------------------------------------------------------------------

 

출력되는 HTML 코드에서 확인할 수 있듯이 ASP.NET의 웹 폼은 포스트 백을 기반으로 하며, 포스트 백을 처리하는 클라이언트 스크립트는 바로 __doPostBack() 메서드 부분입니다. LinkButton 컨트롤의 HTML 출력에서의 링크가 javascript:__doPostBack(‘LinkButton1’,’’)으로 설정되어 있는 것을 확인할 수 있습니다. Button 컨트롤의 경우에는 submit으로 변환되기 때문에 버튼을 클릭하면 폼 자체가 submit 되면서 포스트 백이 일어나게 됩니다. 또한 메서드의 인자로 eventTarget과 eventArgument는 각각 포스트 백을 일으키는 컨트롤의 UniqeID와 넘겨주는 인자를 가리키게 됩니다.

 

이렇듯 웹 폼에서 포스트 백 이벤트를 발생하기 위해서는 __doPostBack() 메서드를 호출해야 한다는 것을 한번 더 확인하고 다음으로 넘어갑시다.

 

② 클라이언트 스크립트에서의 포스트 백 사용

포스트 백 이벤트를 클라이언트에서 제어하게 되는 경우를 한번 알아봅시다. 앞서 살펴본 코드에서 포스트 백을 발생하기 위해서는 앞의 코드에서처럼 __doPostBack() 메서드를 사용하여야 하는데 직접 코드를 입력하여도 되지만 ASP.NET에서는 이미 Page 클래스에 메서드가 정의되어 있습니다. 바로 GetPostBackEventReference, GetPostBackClientHyperlink 메서드로 __doPostBack()의 문자로 반환하게 됩니다. 두 메서드의 차이로는 GetPostBackEventReference를 통해서는 doPostBack() 메서드의 문자가 출력되지만, GetPostBackClientHyperlink는 앞의 LinkButton의 출력결과처럼 <a> 태그에서 doPostBack() 메서드를 호출할 수 있도록 javascript: 문자가 앞에 붙게 됩니다. 이런 메서드들을 이용한다면 쉽게 클라이언트 스크립트나 HTML 컨트롤에서 포스트 백을 구현할 수 있게 됩니다.

 

그렇다면 실제 어떤 경우에 클라이언트에서 포스트 백을 사용하게 될까요? 예를 들어 버튼을 클릭하였을 때 발생하는 이벤트를 이미지의 하이퍼 링크를 클릭하였을 때도 똑같이 발생하고자 할 때, 로그인을 할 때 TextBox 컨트롤을 사용하고 있는 경우에 엔터를 눌렀을 때 버튼을 클릭한 것과 동일한 이벤트를 수행하고자 할 때 여러 가지 상황에서 활용할 수 있게 됩니다. 지금부터 간단한 예제를 통하여 클라이언트 또는 다른 컨트롤의 포스트 백으로 직접 접근하는 방법에 대해서 알아보도록 합시다. 예제는 Label 컨트롤과 Button 컨트롤을 추가하고, Button 컨트롤을 클릭할 때 Label에 버튼을 클릭하였다는 문자를 출력하게 됩니다. 간단히 이렇게 구현한 다음 HTML의 Button 컨트롤, HyperLink 컨트롤, TextBox 컨트롤들을 추가하여 각각 버튼을 클릭하였을 때와 엔터를 쳤을 때 모두 Button을 클릭한 결과를 나타낼 수 있도록 변경하였습니다. 코드를 확인해 봅시다.

 

■ DoPostBack.aspx

------------------------------------------------------------------------

<%@ Page language="c#" Codebehind="DoPostBack.aspx.cs" AutoEventWireup="false" Inherits="ClientScript.DoPostBack" %>


             
                           
                           
                           
                           
                           
                     
             
             
                           
                                        

HyperLink

">[HTML HyperLink]



------------------------------------------------------------------------

 

■ DoPostBack.aspx.cs (중요부분)

------------------------------------------------------------------------

private void Page_Load(object sender, System.EventArgs e)
{
             // 여기에 사용자 코드를 배치하여 페이지를 초기화합니다.
             Button2.Attributes["OnClick"] = "ImgButtonClick();";
             IMG1.Attributes["OnClick"] = "ImgButtonClick();";
             HyperLink1.NavigateUrl = Page.GetPostBackClientHyperlink(Button1, "");
             TextBox1.Attributes["onKeyPress"] = "if(event.keyCode == 13) {" + Page.GetPostBackEventReference(Button1) + "; return false;}";
}

…

private void Button1_Click(object sender, System.EventArgs e)
{
             Label1.Text += "Button 컨트롤에 의해 PostBack 되었습니다
"; }


------------------------------------------------------------------------

 

코드를 하나씩 확인해 보도록 합시다. 우선 aspx 파일에서 ImgButtonClick() 메서드를 선언하고, <%=Page.GetPostBackEventReference(Button1)%>를 통해서 Button1을 클릭하였을 때의 포스트 백을 발생하게 됩니다. 이런 효과는 cs 파일의 Button2.Attributes["OnClick"] = "ImgButtonClick();" 구문과 IMG1.Attributes["OnClick"] = "ImgButtonClick();" 구문에서 각각 처리되는 것을 확인할 수 있습니다. 출력되는 결과의 HTML 코드를 확인해 보면 각각의 컨트롤에 ImgButtonClick() 메서드가 맵핑되어 있는 것을 확인할 수 있습니다.

 

그리고 cs 파일의 HyperLink1.NavigateUrl = Page.GetPostBackClientHyperlink(Button1, "") 구문과 aspx 파일의 <a href="<%=Page.GetPostBackClientHyperlink(Button1, "")%>"> 구문을 통해서는 javascript:doPostBack(‘Button’,’’)로 맵핑하고 있습니다.

 

마지막으로 TextBox 컨트롤의 TextBox1.Attributes["onKeyPress"] = "if(event.keyCode == 13) {" + Page.GetPostBackEventReference(Button1) + "; return false;}" 통해서 엔터를 눌렀을 때에는 Button 클릭의 포스트 백을 발생하라고 선언하고 있습니다. 모든 작업이 완료된 후 실행 결과를 확인해 봅시다.




Transaction 을 이용한 Queue의 경우에는 SendMsgQueueTran을 이용하여 보내야 된다.
그렇지 않으면 Queue에 쌓이지 않는다...


너무 쉽다 ㅡ.ㅡ;;;

코드는 아래 더보기 클릭!!!




<base target="_self">

참 간단하다 ㅡ.ㅡ;;
메타 테그 쪽에 적용하면 되는 듯~

  1. Favicon of http://www.javarush.com BlogIcon tornado 2009.07.16 18:55

    작년에 가스에서 마이그레이션 하다가 이것땜에 짜증 지대로 났었지 ㅡㅡ;

+ Recent posts