Asp.Net의 마스터 페이지에서 컨트롤 ID 처리

1. 전체적인 조판과 디자인의 수요로 인해 우리는 종종 모판 페이지를 만들어서 전체 사이트의 통일성을 실현한다. 최근에 나는 통일성의 수요로 인해 원래의 전체 프로젝트의 단독 페이지를 모두 모판 페이지로 묶었다.그러나 일련의 실효 오류가 발생했다.2. 추상 모델은 전체 페이지의 내용이 너무 많기 때문에 나는 이 페이지에서 가장 본질적인 문제를 추상화했다.원래 단일 페이지는 단추를 이용하여 JS 이벤트를 터치하고 텍스트 필드에 "()"를 삽입하는 것입니다기능, 사실 현대 코드는 다음과 같다.

<head id="Head1" runat="server">

<title>        －YJingLee</title>

<script language="javascript" type="text/javascript">

// <!CDATA[

function insert() {

document.getElementById("txt").value=document.getElementById("txt").value+"(__)";

       return;

}

// ]]>

</script>

</head>

<body>

<form id="form1" runat="server">

<div>

<textarea id="txt" runat="server" name="txt" rows="10" cols="50"></textarea>

<asp:Button ID="btnInsert" runat="server" Text="      (_)" OnClientClick="insert();" />

<input id="btnInsert2" name="insert" onclick="insert();" type="button" value="     (_)"

runat="server" /></div>

</form>

</body>

</html>

위의 페이지는 정상적으로 사용할 수 있습니다.나중에 템플릿 페이지를 사용한 후 해당 코드는 다음과 같습니다.

<asp:content id="Content1" contentplaceholderid="ContentPlaceHolder1" runat="Server">

<script language="javascript" type="text/javascript">

// <!CDATA[

function insert() {

document.getElementById("txt").value = document.getElementById("txt").value + "(__)";

return;

}

// ]]>

</script>

<div>

   <textarea id="txt" runat="server" name="txt" rows="10" cols="50"></textarea>

   <asp:Button ID="btnInsert" runat="server" Text="      (_)"  OnClientClick="insert();"/>

   <input id="btnInsert2" name="insert" onclick="insert();" type="button"



value="     (_)" runat="server"/></div>

</asp:content>

열기 후 단추를 누르면 'Microsoft JScript 실행 중 오류:' document.getElementById (...) '가 나타납니다.비어 있거나 객체가 아닙니다.이게 무슨 이유일까요?원래는 멀쩡했는데, 어떻게 모판 페이지를 끼워 쓰면 이런 이상한 문제가 생기지?오랜 고민 끝에 친구와 토론하고 드디어 답을 찾았습니다. 셋째, 본질을 분석할 때 우리는 그 생성된 HTML 코드를 자세히 보았습니다. 단일 페이지:

<form name="form1" method="post" action="Default.aspx" id="form1">

<textarea name="txt" id="txt" rows="10" cols="50"></textarea>

<input type="submit" name="btnInsert" value="      (_)" onclick="insert();" id="btnInsert" />

<input name="btnInsert2" type="button" id="btnInsert2" onclick="insert();" value="     (_)" />

</form>

마스터 페이지가 포함된 후 생성된 HTML 코드를 봅니다.

<form name="aspnetForm" method="post" action="Default2.aspx" id="aspnetForm">

<textarea name="ctl00$ContentPlaceHolder1$txt" id="ctl00_ContentPlaceHolder1_txt"

rows="10" cols="50"></textarea>

<input type="submit" name="ctl00$ContentPlaceHolder1$btnInsert" value="      (_)"

onclick="insert();" id="ctl00_ContentPlaceHolder1_btnInsert" />

<input name="ctl00$ContentPlaceHolder1$btnInsert2" type="button" id="ctl00_ContentPlaceHolder1_btnInsert2"

onclick="insert();" value="     (_)" />

</form>

문제를 보았습니까? 원본 파일 컨트롤 요소의 ID와 HTML 파일을 생성하는 ID가 일치하지 않습니다.폼from의name 속성과 id 속성이 aspnetForm로 바뀌었고 컨트롤의 id 속성은 이유 없이ctl00ContentPlaceHolder1_접두사, 그name 속성에ctl00$ContentPlaceHolder1$접두사가 붙습니다.이제 알았어. 어쩐지'document.getElementById(...)'비어 있거나 객체가 아님"에 대한 오류가 발생했습니다. 페이지가 생성된 후 ID가 변경되었습니다.그러면 우리는 그것을 어떻게 해결합니까?그의 id가 변한 이상 우리는 JS 코드 id를 생성된 id로 바꾸었다.코드는 다음과 같습니다.

function insert() {

document.getElementById("ctl00$ContentPlaceHolder1$txt").value =

document.getElementById("ctl00$ContentPlaceHolder1$txt").value + "(__)";

return;

}

//또는 4

function insert() {

document.getElementById("ctl00_ContentPlaceHolder1_txt").value =

document.getElementById("ctl00_ContentPlaceHolder1_txt").value + "(__)";

return;

}

자, 문제는 해결되었지만, 생각해 보면 어떤 더 좋은 방법이 있을까?도대체 왜일까?사실 분석해 보면 이것은 나중에 생성된 클라이언트 id이다. 우리는 C#문장인 Control의 ClientID 속성을 이용하여 이렇게 쓸 수 있다.ClientID; txt는 원래 컨트롤의 id이고 그 뒤에 있는 ClientID는 새로 생성된 id입니다.txt.ClientID는 프로그램에서 가져온 후 새 ID를 생성하는 것이 더 좋지 않습니까?수정 코드는 다음과 같습니다.

function insert() {

document.getElementById("<%=txt.ClientID %>").value =

document.getElementById("<%=txt.ClientID %>").value + "(__)";

return;

}

그리고 백그라운드에서 Request.Form["txt"] 키 값을 변경해야 하며 Request로 변경해야 합니다.Form[<%=txt.ClientID%>]이(가) 페이지의 값을 수신할 수 있습니다.ID를 얻으려는 control이 사용자 컨트롤이라면 페이지를 만든 후에 클라이언트 ID를 얻을 수 있지만 이 대상을 얻지 못하기 때문에 그 속성을 설정하거나 얻을 수 없다.예를 들어 내가 해야 할 이 사용자 컨트롤은 세 개의 Drop Down List로 구성되어 있지만 나는 완전한 날짜 값(클라이언트를 가리킨다)을 얻고 싶다. 한 가지 생각은 먼저 세 개의 Drop Down List의 클라이언트 ID를 얻은 다음에 ID를 얻는 것이다.value+ID2.value+ID3.value에서 가져왔습니다. 그러나 한 페이지에 여러 개의 사용자 컨트롤을 넣어야 한다면, 클라이언트 ID를 몇 개 구해야 합니까?분명히 이렇게 하면 작업량이 매우 많을 뿐만 아니라, 많은 대상을 조작해야 하기 때문에 틀리기 쉽다.넷째, 이런 문제를 정리하면 우리가 프로그램을 작성할 때 자주 만나는 것과 같다. 정리해 보면 이것은'MasterPage를 사용했거나 GridView의 모델 열을 사용한 후 모든 요소의 ID가 일치하지 않는 문제'에 속해야 한다.여러 가지 이유(예를 들어 MasterPage를 사용했거나 GridView의 템플릿 열을 사용했을 때) 하나의 컨트롤러가 디자인할 때의 ID는 페이지를 생성한 후의 ID와 다르다. 컨트롤러 클라이언트 ID를 얻기 위해 우리는 생성된 페이지에서 시작하여 컨트롤러 id 수정 방법을 찾을 수 있다.

document.getElementById("ctl00$편집구역 ID$컨트롤 ID")

document.getElementById("ctl00 편집구역 ID 컨트롤 ID")

document.getElementById("<%=컨트롤 이름 ID.ClientID%>");//추천
우리가 디자인할 때 종종 엉뚱한 문제가 발생할 수 있다. 나는 우리가 문제에 부딪혔을 때 냉정하게 사고하고 주된 부분을 파악하며 밑바닥 구조에서 착안하여 그 원인을 바로잡고 최종적으로 답을 찾을 것이라고 생각한다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

작업 중 문제 해결 - (win 2003 asp. net) Session 과 페이지 전송 방법 으로 해결 방안 을 정상적으로 사용 할 수 없습니다.

또한 F 는 처음에 우리 의 BP & IT 프로젝트 팀 이 Forms 폼 검증 을 사용 했다 고 판단 할 수 있 습 니 다. 페이지 를 뛰 어 넘 는 것 은http://hr.bingjun.cc/MyTask/MyTas...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

Asp.Net의 마스터 페이지에서 컨트롤 ID 처리

좋은 웹페이지 즐겨찾기