ASP를 참조합니다.JavaScript에서 ID에 의한 NET 제어?

ASP를 참조합니다.JavaScript에서 ID에 의한 NET 제어?

ASP 의 「은, 있는 가 변경되는 .NET 컨트롤은 이름 컨테이너에 있는 경우와 같이 ID가 변경될 수 있습니다. Button1실제로 아이디를 가지고 있을지도 모른다ctl00_ContentMain_Button1★★★★★★★★★★★★★★★★★★★★★★★★★★★

JavaScript를 .cs 파일에 문자열로 쓰고 컨트롤 클라이언트를 가져올 수 있다는 것을 알고 있습니다.클라이언트 스크립트를 사용하여 스크립트를 식별하여 페이지에 삽입하지만, ASP를 사용하여 JavaScript에서 직접 컨트롤을 참조할 수 있는 방법이 있습니다.NET Ajax?

dom을 재귀적으로 해석하여 원하는 ID를 포함하는 컨트롤을 찾는 함수를 작성하는 것은 신뢰할 수 없다는 것을 알게 되었기 때문에 회피책보다는 베스트 프랙티스를 찾고 있었습니다.

Dave Ward의 이 게시물에는 다음과 같은 내용이 있을 수 있습니다.

http://encosia.com/2007/08/08/robust-aspnet-control-referencing-in-javascript/

기사 발췌:

실제로 있다.인라인 ASP를 사용하는 것이 좋습니다.컨트롤의 클라이언트를 주입하는 NET 코드ID 속성:

$get('<%= TextBox1.ClientID %>')

이제 페이지 구조와 컨트롤의 중첩 수준에 관계없이 올바른 클라이언트 요소 ID가 참조됩니다.이 방법의 퍼포먼스 비용은 매우 적지만 클라이언트의 스크립팅 변경에 대한 탄력성을 높이기 위해서는 충분히 가치가 있다고 생각합니다.

그 투고의 코멘트 스레드에서 Dave가 작성한 샘플 코드:

<script>
  alert('TextBox1 has a value of: ' + $get('<%= TextBox1.ClientID %>').value);
</script>

위에서 링크한 기사에 대한 댓글 스레드에서도 논의가 잘 되고 있습니다.

수 있어요.ClientIDMode의 .'Static'아이디NET 드 net

<asp:TextBox ID="TextBox1" ClientIDMode="Static" runat="server"></asp:TextBox> 

결과는 다음과 같습니다.

<input name="ctl00$MainContent$TextBox1" type="text" id="TextBox1"> 

같은 아이디를 가지고 계시네요

이에 대한 몇 가지 생각:

1) asp.net ids는 말씀하신 대로 신뢰할 수 없기 때문에 id가 아닌 css 클래스로 요소를 얻는 것은 매우 행운이었습니다.이 기능을 사용하고 있는데 상당히 성능이 좋습니다.

function getElementsByClass(searchClass,node,tag) {
 var classElements = new Array();
 if ( node == null )
    {
        node = document;
    }

 if ( tag == null )
    {
        tag = '*';
    }

 var els = node.getElementsByTagName(tag);
 var elsLen = els.length;
 var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");

 for (i = 0, j = 0; i < elsLen; i++) 
    {
        if ( pattern.test(els[i].className) ) 
            {
                classElements[j] = els[i];
                j++;
            }
      }
 return classElements;
}

2) jQuery가 많은 도움이 됩니다.jQuery를 사용하면 ID가 특정 문자열로 끝나는 요소를 안정적으로 가져올 수 있습니다.이것이 jQuery를 사용하는 "이유"는 아니지만, 이는 분명 이점입니다.

3) 이 문제는 asp.net 4.0에서 수정될 예정이니 참고하시기 바랍니다:-) http://weblogs.asp.net/asptest/archive/2009/01/06/asp-net-4-0-clientid-overview.aspx

마크업 문서.getElementById('<%#TextBox1')의 데이터 바인딩 태그를 선호합니다.클라이언트 ID %>'). 서버 사이드 태그 구현 사용률 <% = TextBox1.클라이언트 ID %>

서버 사이드 태그는 뒤에 있는 코드의 돔에 컨트롤을 추가하는 것을 금지합니다.이러한 요구는 일반적으로 애플리케이션을 구축할 때 발생합니다.데이터 사운드 접근법에 의해 대규모 개서를 피할 수 있습니다.

서버 사이드 태그를 사용하는 경우 이 일반적인 작업을 수행하는 '코드 블록'이라고도 합니다.

이 폼을 클릭합니다.컨트롤추가(myControll);

는 실행 시 다음 오류를 생성합니다.

컨트롤에 코드 블록(즉, <% ... % >)이 포함되어 있으므로 Controls 컬렉션을 수정할 수 없습니다.

유감스럽게도 이것은 웹 사이트를 구축한 후에야 명백해지는 경우가 많습니다.

데이터 바인딩 제어 '<%#'을 구현하는 경우TextBox1 。ClientID %>'는 Page_Load 데이터바인드의 끝 등 적절한 장소에서 마크업으로 참조되는 제어속성의 값을 다음과 같이 해결합니다.

Page.DataBind()

참고 페이지.DataBind()는 페이지의 하위 컨트롤도 DataBind하도록 합니다. 페이지가 특정 하위 컨트롤의 데이터 바인딩을 별도로 처리할 경우 이는 원치 않는 부작용일 수 있습니다.이 경우 개별 제어에 대해 다음과 같이 데이터 바인딩을 수행할 수 있습니다.

TextBox1 。DataBind()

애플리케이션의 진화에 의해, 베이스 사이트 전체의 기능이 향상해, 베이스 제어를 추가할 수 있게 됩니다.서버측 태그를 사용해 Web 사이트 애플리케이션을 데이터 바인드로 대체하면, 특히 페이지가 스스로 데이터 바인딩을 처리하도록 코드화되어 있는 경우는 문제가 생깁니다.

이를 위한 "베스트 프랙티스"는 단 한 가지도 없다고 생각합니다.아주 좋은 방법이 많이 있어요여기 있습니다.

클라이언트 측 기능이 있는 모든 컨트롤은 컨트롤 마크업 바로 아래에 스크립트블록을 인라인으로 렌더링합니다.

<span id="something_crazy_long">
    control markup
</span>
<script type="text/javascript">new CustomControl('something_crazy_long');</script>

각 컨트롤에는 다음과 같은 JS가 함께 있습니다.

var CustomControl = function(id) {
    this.control = document.getElementByID(id);
    this.init();
};

CustomControl.prototype.init = function() {
    //do stuff to wire up relevant events
};

코드 배후에 다음과 같은 작업을 수행합니다.

class CustomControl : Control

override void Render(HtmlTextWriter writer)
{
    writer.WriteBeginTag("span");
    writer.WriteAttribute("id", this.ClientID);
    writer.Write(HtmlTextWriter.TagRightChar);
    //write control markup
    writer.WriteEndTag("span");
    writer.WriteBeginTag("script");
    writer.WriteAttribute("type", "text/javascript");
    writer.Write(HtmlTextWriter.TagRightChar);
    writer.Write(
        string.Format("new CustomControl('{0}');", this.ClientID)
    );
    writer.WriteEndTag("script");
}

여러 스크립트 태그를 피하기 위해 페이지 베이스 클래스의 함수를 사용하여 클라이언트 측에서 사용하는 컨트롤을 등록한 후 1개의 스크립트 태그 내의 html로 내보냅니다.

컨트롤을 하위 클래스로 분류하여 함수에 자동으로 등록하거나 부울 속성을 사용하여 클라이언트 측에서 사용할지 여부를 설정할 수도 있습니다.

'ctl00_ContentMain_Button1' - 브라우저에서 페이지가 렌더링될 때 asp.net에서 첫 번째 부분은 'ctl00' 그대로입니다.두 번째 부분은 'ContentMain'을 사용하는 ContentPlaceHolder의 ID입니다.세 번째는 컨트롤 '버튼1'의 ID입니다.

http://codedotnets.blogspot.in/2012/01/how-get-id-server-control-javascript.html이 마음에 들었어요.

아, 그리고 혹시 다른 사람이 이런 문제를 겪을 경우를 대비해서 이것도 찾았어요.

asp.net 컨트롤에는 커스텀jQuery 실렉터를 사용합니다.http://john-sheehan.com/blog/custom-jquery-selector-for-aspnet-webforms/

ID는 다음을 사용하여 얻을 수 있습니다.document.getElementById메서드도 있습니다.

언급URL : https://stackoverflow.com/questions/641280/reference-asp-net-control-by-id-in-javascript