Asp.net 사용자 정의 컨트롤 로드 층

본 고 는 사용자 정의 컨트롤(js 결합)을 개발 하 는 데 목적 을 두 고 있 으 며,간단 한 예 를 들 어 실제 프로젝트 에서 이렇게 하지 않 을 수도 있다.
 먼저 효과 보기:
 
1.정적 페이지 에서 원 하 는 효 과 를 개발

jQuery.extend({

  openloading: function (options) {

    var defaults = { msg: '     ...', img: 'loading.gif' };

    var opts = $.extend(defaults, options);

    $("body").append("<div class='l_overlay' style='position:fixed;top:0;right:0;bottom:0;left:0;z-index:998;width:100%;height:100%;padding:0 20px 0 0;background-color:gray;display:none;'></div><div class='l_showbox' style='position:fixed;top:0;left:50%;z-index:1001;opacity:0;filter:alpha(opacity=0);margin-left:-80px;border:1px solid gray;font-size:12px;font-weight:bold;'><div class='loadingWord' style='width:122px;height:38px;line-height:38px;border:2px solid #D6E7F2;background:#fff;'><img style='margin:10px 8px 10px 8px;float:left;display:inline;' src='"+opts.img+"'>     ...</div></div>");

    var h = $(document).height();

    $(".l_overlay").css({ "height": h, 'display': 'block', 'opacity': '0.4' });

    $(".l_showbox").stop(true).animate({ 'margin-top': (h / 2 - 58) + 'px', 'opacity': '1' }, 200);

  },

  closeloading: function () {

    $(".l_showbox").stop(true).animate({ 'margin-top': '250px', 'opacity': '0' }, 400);

    $(".l_overlay").css({ 'display': 'none', 'opacity': '0' });

    $(".l_overlay").remove();

    $(".l_showbox").remove();

  }

}); 

2.vs 새 라 이브 러 리,새 클래스 는 WebControl 에 계승
 속성 추가:
 [설명("트리거 ID 가 져 오기 및 설정"),DefaultValue("),Browsable(true),Category("잡다 한 항목")]
public string TargetID { get; set; }
OnPreRender 방법 을 다시 씁 니 다.방법 에 js 스 크 립 트 를 등록 합 니 다.이 스 크 립 트 는 ID 가 TargetID 인 컨트롤 을 클릭 할 때 로 딩 층 을 표시 합 니 다. 

protected override void OnPreRender(EventArgs e)
{
  if (Page != null && !string.IsNullOrEmpty(TargetID))
  {
   TargetID = GetClientID(TargetID);     
   Page.ClientScript.RegisterClientScriptResource(typeof(Loading), "BoControl.Scripts.Jquery.js");     
   this.Page.ClientScript.RegisterStartupScript(typeof(string), "BoControl_" + this.ClientID, "$(\"#" + TargetID + "\").on(\"click\",function(){$.openloading({msg:\"" + Text + "\", img: \"" +Page.ClientScript.GetWebResourceUrl(this.GetType(), "BoControl.Images.loading.gif")+ "\"});});", true);   
}   
base.OnPreRender(e); } 

OnPreRender 방법 중
 Page.ClientScript.RegisterClientScriptResource(typeof(Loading), "BoControl.Scripts.Jquery.js");등록 JQuery
 Page.ClientScript.GetWebResourceUrl(this.GetType(), "BoControl.Images.loading.gif");웹 자원 파일 을 가 져 오 는 경로 입 니 다.dll 에 그림 파일 을 끼 워 넣 지 않 으 려 면 실제 경로(예:Images/Loading.gif)로 바 꾸 십시오.반대로 그림 파일 과 JQuery 파일 을 아래 처럼 가리 키 고 그림 속성-생 성 작업 은 끼 워 넣 은 자원 입 니 다.
 [assembly:WebResource("BoControl.Images.loading.gif","image/gif")]//여기에 JQuery 를 등록 해 야 합 니 다.
namespace BoControl
{
배경 코드 에서 호출 할 수 있 도록 Open 방법 과 Close 방법 을 써 야 합 니 다.
 예:

    /// <summary>
    ///       
    /// UpdatePanel  
    /// </summary>
    /// <param name="panel">UpdatePanel  </param>
    public void Open(UpdatePanel panel)
    {
      if (Page != null)
      {
        ScriptManager.RegisterStartupScript(panel, panel.GetType(), "openloading", "$.openloading({msg:\"" + Text + "\", img: \"" + Page.ClientScript.GetWebResourceUrl(this.GetType(), "BoControl.Images.loading.gif"); + "\"});", true);
      }
    }   

전체적으로 보면 사용자 정의 컨트롤 의 개발 은 복잡 하지 않 습 니 다.이상 은 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.