.NET이 ID를 먹는 것을 막을 수 있나요?

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

문제

저는 요즘 정보 설계자이자 JavaScript 개발자로 일하고 있지만 최근에는 다시 백엔드 코딩에 복귀하고 있습니다.그리고 HTML 프로토타입을 C# 기반 CMS와 통합하고 작업하는 동안 양식 요소에 대해 .NET에서 HTML ID 속성을 임의로 다시 작성하는 것에 대해 프로그래머들에게 큰 타격을 입혔습니다.

.NET에서 ID를 변경하는 코드 숨김 추론을 이해할 수 있지만 예를 들어 개발하려고 할 때 더 이상 ID를 사용할 수 없다는 사실은 다음과 같습니다.jQuery의 향상된 인터페이스로 인해 약간의 마찰이 발생하고 있습니다.이 문제를 해결하려면 어떻게 해야 합니까?

대신 클래스 특성을 사용해 보았지만 이는 정말 형편없고 의도한 바가 아니며 .NET에서 렌더링된 소스를 즉시 효과적으로 변경하는 문제를 해결하지 못합니다.이는 또한 CSS가 현재 덜 유용하고 생성 및 유지 관리 효율성이 떨어진다는 것을 의미합니다.

잠 못 이루는 밤을 덜 수 있도록 어떤 조언이나 조언이라도 대단히 감사하겠습니다...

도움이 되었습니까?

해결책

짧은 대답은 '아니오'입니다. 웹 양식을 사용하면 요소의 중첩에 따라 ID를 항상 다시 작성할 수 있습니다.ClientID 속성을 통해 ID에 액세스할 수 있으므로 페이지/컨트롤 끝에 있는 스크립트의 변수에 ID를 설정한 다음 jQuery에 넣을 수 있습니다.

이 같은:

<asp:button id="ImAButton" runat="server">Click Me</asp:button>

<script type="text/javascript">
var buttonId = "<%=ImAButton.ClientId%>";
$("#"+buttonId).bind('click', function() { alert('hi); });
</script>

내가 아는 해킹이지만 작동할 것이다.(초보자를 위해 언급해야 할 점은 Prototype $ get by id 메소드를 사용하고 있다는 것입니다)

다른 팁

한 가지 방법은 ID를 수동으로 재정의하는 것입니다.

public override string UniqueID
{
  get { return this.ID; }
}
public override string ClientID
{
  get { return this.ID; }
}

Rick Strahl이 블로그 게시물을 작성했습니다. 해당 접근 방식에 대한 추가 정보가 포함되어 있습니다.

ASP.Net MVC를 살펴보세요. 이는 ASP.Net이 기본적으로 생성하는 과도한 개체 계층 구조를 해결합니다.

이 사이트는 MVC로 작성되었습니다(내 생각에는). 구조를 살펴보세요.내가 지금 새로운 프로젝트를 진행하고 있다면 그것을 먼저 고려할 것입니다.

기본 ASP.Net을 사용하는 데 어려움을 겪고 있다면 ClientID 및 UniqueID를 주의해서 재정의하세요. 이로 인해 많은 웹 컨트롤이 중단되는 경향이 있습니다.

내가 찾은 가장 좋은 방법은 읽을 수 없는 ClientID를 Javascript에 전달하는 것입니다.

.net 컨트롤을 확장하고 관련 속성이 호출될 때 실제 ID를 반환하도록 할 수 있습니다.

ClientID는 id 속성이고 UniqueID는 html 요소의 name 속성입니다.따라서 다음과 같은 텍스트 상자를 만들고 프레임워크의 텍스트 상자 대신 이를 사용하면 ID 및 이름 속성이 서버 측 ID와 동일하게 렌더링됩니다.

public class MyTextBox : TextBox
{
    public override string ClientID { get { return ID; } }
    public override string UniqueID { get { return ID; } }
}

이 새로운 사용자 컨트롤을 사용하려면 기본적으로 사용자 지정 사용자 컨트롤에 대해 하듯이 이 컨트롤을 등록합니다. (web.config에서 할 수 있으므로 모든 페이지에서 할 필요는 없습니다.)

<%@ Register Assembly="MyLibrary" NameSpace="MyLibrary.WebControls" TagPrefix="MyPrefix" %>

텍스트 상자를 사용하는 것처럼 사용하세요.

<MyPrefix:MyTextBox ID="sampleTextBox" runat="server" />

개인적으로 저는 서버측 ASP.NET "마술"(아직 MS MVC를 사용하지 않음)과 클라이언트측 코드를 연결하기 위해 개발한 일련의 방법을 사용합니다. .유용할 수도 있고 그렇지 않을 수도 있는 것은 다음과 같습니다.

public void RegisterControlClientID(Control control)
{
   string variableDeclaration = string.Format("var {0} = \"{1}\";", control.ID, control.ClientID);
   ClientScript.RegisterClientScriptBlock(GetType(), control.ID, variableDeclaration, true);
}

따라서 서버측 코드에서는 간단히 이것을 호출하고 더 친숙한 이름을 사용하려는 컨트롤의 인스턴스를 전달하면 됩니다.즉, 동안 디자인 타임, ID가 "m_SomeTextBox"인 텍스트 상자가 있고 동일한 이름을 사용하여 JavaScript를 작성할 수 있기를 원할 수 있습니다. 간단히 서버측 코드에서 이 메소드를 호출하면 됩니다.

RegisterControlClientID(m_SomeTextBox);

그런 다음 클라이언트에서 다음이 렌더링됩니다.

var m_SomeTextBox = "ctl00_m_ContentPlaceHolder_m_SomeTextBox";

이렇게 하면 모든 JavaScript 코드가 ASP.NET이 변수 이름을 결정하는 것에 대해 상당히 무지할 수 있습니다.물론, 페이지에 컨트롤의 여러 인스턴스가 있는 경우(예를 들어 모두 m_SomeTextBox 인스턴스가 포함된 사용자 컨트롤의 여러 인스턴스를 사용하기 때문에)와 같이 이에 대한 몇 가지 주의 사항이 있지만 일반적으로 이 방법은 가장 기본적인 요구 사항에 유용합니다.

제가 주로 하는 일은 필드 이름을 받는 일반 함수를 만드는 것입니다.일반적인 "asp.net" 접두사를 추가하고 개체를 반환합니다.

var elemPrefix = 'ctl00-ContentPlaceHolder-'; //replace the dashes for underscores

var o = function(name)
{    
    return document.getElementById(elemPrefix + name)
}

이를 통해 jQuery에서 이런 종류의 호출을 사용할 수 있습니다.

$(o('buttonId')).bind('click', function() { alert('hi); });

asp.net에서 생성된 ID를 CSS에 하드 코딩하고 싶지는 않을 것입니다. 컨트롤 트리가 변경되는 방식으로 페이지의 내용을 다시 정렬하면 변경될 수 있기 때문입니다.

CSS ID가 그 자리를 차지한다는 것이 맞습니다. 따라서 클래스를 사용하라는 제안은 무시하겠습니다.

여기에 설명된 다양한 자바스크립트 해킹은 작은 문제에 비해 과잉입니다.클래스에서 상속하고 ID 속성을 재정의하는 것도 마찬가지입니다.그리고 원하는 것이 일부 CSS를 리팩터링하는 것뿐일 때 MVC로 전환을 제안하는 것은 확실히 도움이 되지 않습니다.

CSS로 타겟팅하는 별도의 div와 범위만 있으면 됩니다.ID를 사용하려는 경우 ASP.NET 컨트롤을 직접 대상으로 지정하지 마세요.

  <div id="DataGridContainer">
     <asp:datagrid runat=server id="DataGrid" >
         ......
     <asp:datagrid>
  </div>

jQuery를 사용하고 있다면 많은 것들이 있습니다. CSS 선택기 및 jQuery 맞춤형 선택기 페이지의 요소를 타겟팅할 수 있습니다.따라서 ID로 제출 버튼을 선택하는 대신 다음과 같은 작업을 수행할 수 있습니다.

$('fieldset > input[type="submit"]').click(function() {...});

.NET 시스템이 얼마나 덜 직관적으로 느껴지는지 알 수 있지만 한번 시도해 보십시오.내 경험상 실제로는 더 깔끔한 코드가 생성됩니다.확신하는

<asp:button id="ImAButton" runat="server">Click Me</asp:button>

<script type="text/javascript">
var buttonId = <%=ImAButton.ClientId%>
$(buttonId).bind('click', function() { alert('hi); });
</script>

잘 작동합니다.그러나 이것은 모듈화되지 않는다는 문제가 있습니다.당신이 정말로 원하는 것은 다음과 같습니다.

<script type="text/javascript">
function MakeAClick(inid)
{
  $(inid).bind('click', function() { alert('hi); });
}
</script>

그런 다음 나중에 Java 측 또는 C# 측의 코드를 사용하여 MakeAClick을 호출합니다.물론 C# 측면에서는 ClientID만 포함하면 더 의미가 있습니다.

어쩌면 이것이 검토 중인 코드의 실제 문제일 수도 있습니다.

훨씬 더 나은 접근 방식은 ClientIDMode를 사용하고 이를 다음과 같이 설정하는 것입니다. static.web.config 파일에서 특정 페이지 또는 전역적으로 설정할 수도 있습니다.그러면 이 문제를 다시 처리할 필요가 없으며 JQuery가 훨씬 깔끔해집니다.

페이지 상단:

<%@ Page Title="" ClientIDMode="Static" Language="C#" CodeBehind="..." Inherits="WebApplication1.WebForm2"  %>

제어 시에만:

<asp:Panel runat="server"  ClientIDMode="Static"></asp:Panel>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top