2011-02-16 4 views
0

그래서 모든 형태의 모달 팝업 (오류 처리, 양식, 대화 상자 등)을 처리하기 위해 asp.net 사용자 정의 컨트롤을 만드는 아이디어가 있습니다.아약스를 사용하여 코드 숨김에서 자바 스크립트 호출하기

나는 이미 모든 콘텐츠 페이지에 노출, 상위 마스터 페이지에서 사용자 정의 컨트롤을 배치하기 전에이 만든, 그래서 나는 같은 것을 할 수있는 : 필요한 마크 업을 것

Master.Popup.ShowException(Exception); 

그리고 UserControl을 자체 모달 대화 상자처럼 보이게하려면 show 메서드에서 .Visible = true를 사용하면됩니다.

이 모든 것이 좋지만 jquery로 약간의 스타일을 구현하려고 생각했습니다. 나는 사용자 정의 컨트롤에 jquery 애니메이션을 보여 주도록하고 싶습니다. 그러나 popup.visible = true 대신 codebehind에서 jquery 함수를 호출하는 방법을 모르겠으므로이를 달성하는 방법을 모르겠습니다.

누구나 가능한 해결책을 제공 할 수 있습니까? 당신의 Master.Popup.ShowException (....) 내부

답변

1

는 다음과 같이 사용 animateMyBox (...)이 당신이 원하는 어느 애니메이션이다

ScriptManager.RegisterStartupScript(Page, Page.GetType(), "animateJS", "animateMyBox('popupid');", true); 

. 결국 popup.display = "block"; 등

애니메이션을 실행 한 후 실행할 애니메이션 코드를 다시 호출하는 함수를 전달하면 조회 할 수도 있습니다. 같은

animateMyBox('popupid', function() { document.getElementById('popupid').display='block'; }) 

다른 가능성은 0 내지 100 % 불투명도 애니메이션 등 끝에 표시되는 상자 끝날 애니메이션을 사용하는 것이다.

나는 모호하지만 더 나은 답변을 얻기 위해 더 많은 코드를 공유해야한다는 것을 알고 있습니다. 당신은 렌더링 컨트롤을 만들 수 있습니다

0

자바 스크립트 : 나는 당신이 실행하려는 효과 이름은 속성 EffectType를 정의

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.ComponentModel; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
using System.Text; 

namespace WebApplication1 
{ 
    [DefaultProperty("EffectType"), ToolboxData("<{0}:jQueryAnimation runat=server></{0}:jQueryAnimation>")] 
    public class jQueryAnimation : System.Web.UI.WebControls.WebControl 
    { 
     private const string SCRIPT_KEY = "jQueryAnimation"; 

     [Bindable(true), Category("Appearance"), DefaultValue("Bounce")] 
     public string EffectType { get; set; } 
     public string ControlId { get; set; } 

     protected override void OnPreRender(EventArgs e) 
     { 
      base.OnPreRender(e); 
      RegisterAnimationScript(); 
     } 

     protected override void RenderContents(HtmlTextWriter writer) 
     { 
      base.RenderContents(writer); 
     } 

     private void RegisterAnimationScript() 
     { 
      if (!Page.ClientScript.IsClientScriptBlockRegistered(SCRIPT_KEY)) 
      { 

       StringBuilder script = new StringBuilder(); 
       script.Append("<script type='text/javascript'>"); 
       script.Append(Environment.NewLine); 
       script.Append("$(document).ready(function() {"); 
       script.Append(Environment.NewLine); 
       script.Append("var options = {};"); 
       script.Append(Environment.NewLine); 
       script.Append("$('#"); 
       script.Append(this.ControlId); 
       script.Append("').effect('"); 
       script.Append(this.EffectType); 
       script.Append("', options, 1500, "); 
       script.Append(this.ControlId); 
       script.Append("_callback);"); 
       script.Append(Environment.NewLine); 
       script.Append("function "); 
       script.Append(this.ControlId); 
       script.Append("_callback() {"); 
       script.Append(Environment.NewLine); 
       script.Append("setTimeout(function() {"); 
       script.Append("$('#"); 
       script.Append(this.ControlId); 
       script.Append("').removeAttr('style').hide().fadeIn();"); 
       script.Append("}, 1000);};"); 
       script.Append(Environment.NewLine); 
       script.Append("});"); 
       script.Append(Environment.NewLine); 
       script.Append("</script>"); 

       Page.ClientScript.RegisterClientScriptBlock(Page.GetType(),SCRIPT_KEY,script.ToString()); 
      } 
     } 
    } 
} 

; ControlId는 애니메이션을 적용 할 HTML 요소의 ID입니다.
RegisterAnimationScript는 애니메이션을 수행하는 자바 스크립트를 출력합니다. 당신의 ASPX에서 당신은

여기
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
    <title></title> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
     <div id="test" style="width:100px;height:100px;background-color:Red">&nbsp;</div> 
     <cc1:jQueryAnimation ID="jQueryAnimation1" runat="server" EffectType="Shake" ControlId="test"></cc1:jQueryAnimation> 
    </div> 
    </form> 
</body> 
</html> 

, 내가 내 레르 족 제어 jQueryAnimation을 행했습니다 (그것은 당신의 도구 상자에 나타납니다) 컨트롤을 드롭 한 후 컨트롤을

<%@ Register assembly="WebApplication1" namespace="WebApplication1" tagprefix="cc1" %> 

을 등록해야 div 테스트 (ControlId="test") 및 적용 할 효과 (EffectType="Shake")를 정의했습니다.
C#에서는 javascript를 관리하기가 쉽지 않습니다. ;-)

관련 문제