asp.net 컨트롤에 대한 클라이언트 개체

Question

클라이언트 스크립트를 통해 내 컨트롤의 클라이언트 메서드 및 메서드를 액세스 할 수있는 방법을 찾으려고합니다.

<%@ Register Src="~/MyCustomControl.ascx" TagName="CustomControl" TagPrefix="mycontrols" %> 
... 
<asp:ScriptManager runat="server" ID="scriptManager1"></asp:ScriptManager> 
<div> 
    <mycontrols:CustomControl runat="server" ID="control1" /> 
</div> 
... 
<script type="text/javascript"> 
    $find("<%=control1.ClientID %>").set_text("sample text"); 
</script> 

, set_text이

function(text) { 
    $("#<%=hiddenText.ClientID %>").val(text); 
} 

같은 것이있다 :

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="MyCustomControl.ascx.cs" Inherits="MyCustomControl" %> 

<script type="text/javascript"> 
    $(function() { 
     $("#<%=lnksave.ClientID %>").click(function() { 
      $("#<%=hiddenText.ClientID %>").val($("#<%=txtText.ClientID %>").val()); 
     }); 

     $("#<%=lnkshow.ClientID %>").click(function() { 
      alert($("#<%=hiddenText.ClientID %>").val()); 
     }); 
    }); 
</script> 

<asp:HiddenField runat="server" ID="hiddenText" /> 
<input type="text" runat="server" id="txtText" /> 
<a id="lnksave" runat="server" href="#">Save text</a> 
<a id="lnkshow" runat="server" href="#">Show text</a> 

내가 다른 컨트롤은 클라이언트 측에서 다음과 같이 그것을 길에 액세스 할 : 예를 들어, 다음은 아주 간단한 샘플 컨트롤입니다

이런 방식으로 작동 시키려면 어떤 방법으로 변경해야합니까? 일부 코드 예제는 매우 유용합니다. 미리 감사드립니다!

Answer 1

JavaScript 노출이 필요한 사용자 정의 컨트롤이있는 경우 JavaScript 동작을 캡슐화하기 위해 일반적으로 JavaScript 개체를 정의합니다.

// MyCustomControl JavaScript object constructor: 
function MyCustomControl(clientID) { 
    this.id = clientID; 
} 

// MyCustomControl prototype: 
// Declare any methods for the object here. 
MyCustomControl.prototype = { 
    set_text: function(text) { 
    $("#" + this.id).val(text); 
    } 
}; 

그런 다음 사용자 제어 예를 들어 자바 스크립트 객체 생성자 호출을 생성하는 사용자 제어 서버 측에 따른 방법으로 추가 :

그래서 귀하의 예제에서 나는 별도의 자바 스크립트 같은 것을 보이는 MyCustomControl.js을 제기 할 것이다

public string GetClientSideObject() 
{ 
    var serializer = new System.Web.Script.Serialization.JavaScriptSerializer(); 
    return string.format("new MyCustomControl({0})", 
    serializer.Serialize(this.ClientID)); 
} 

당신은 다음 컨트롤의 자바 스크립트 객체의 인스턴스를 생성하는 동적으로 생성 된 스크립트에 GetClientSideObject()의 출력을 포함 할 수 있습니다

:

<script type="text/javascript> 
    var myUserControl = <%= this.myUserControl.GetClientSideObject() %>; 
    myUserControl.set_text('Foo Bar Baz'); 
</script> 

을

이 접근법에 대한 좋은 점 중 하나는 대부분의 JavaScript가 정적이며 별도의 .js 파일로 끝나는 것입니다.이 파일은 다른 스크립트와 마찬가지로 캐싱/결합/축소/등이 가능합니다. 또한 코드를 읽는 모든 사용자를 위해 인스턴스를 원본 사용자 정의 컨트롤과 명확하게 연결합니다.

그러나 조심해야 할 것은 생성자에 대한 인수를 GetClientSideObject()에 직렬화하는 것입니다. 내 인수를 쓰려면 JavaScriptSerializer 클래스를 사용하는 경향이 있으므로 문자열이 따옴표로 묶인 문자열이되고 숫자가 숫자 등이 될 수 있습니다.