DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> 結合MS AJAX將js文件編譯到動態鏈接庫
結合MS AJAX將js文件編譯到動態鏈接庫
編輯:AJAX詳解     
 

為了使Javascript代碼不被竊取,我們可以將JS文件編譯成動態鏈接庫(dll)文件。下面為了演示這一功能,創建了一個控件。

一、創建一個類庫項目,命名為UpdateAnimate。

二、向項目中添加引用System.Web, System.Drawing, System.Web.Extensions

三、向項目中添加一個Jscript的文件UpdatePanelAnimation.JS

四、向文件中添加如下代碼:


BorderAnimation = function(color)
{
    this._color = color;
}

BorderAnimation.prototype =
{
    animate: function(panelElement)
    {
        var s = panelElement.style;
        s.borderWidth = '2px';
        s.borderColor = this._color;
        s.borderStyle = 'solid';

        window.setTimeout(
            function()
            {
            {
                s.borderWidth = 0;
            }
            },
            500);
    }
}


這段代碼中,包含一段臨時改變UpdatePanel控件樣式的方法

 

五、解決方案資源管理器中,右鍵查看UpdatePanelAnimation.JS的屬性,把高級中的“生成操作”屬性設置成“嵌入的資源”。

六、向項目中添加一個類CustomControl

七、替換類中的代碼:

using System;
using System.Drawing;
using System.Web.UI;
using System.Web;
using System.Globalization;

namespace UpdateAnimate
{
    public class UpdatePanelAnimationWithClIEntResource : Control
    {
        private string _updatePanelID;
        private Color _borderColor;
        private Boolean _animate;
        public Color BorderColor
        {
            get
            {
                return _borderColor;
            }
            set
            {
                _borderColor = value;
            }
        }

        public string UpdatePanelID
        {
            get
            {
                return _updatePanelID;
            }
            set
            {
                _updatePanelID = value;
            }
        }

        public Boolean Animate
        {
            get
            {
                return _animate;
            }
            set
            {
                _animate = value;
            }
        }
        protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);
            if (Animate)
            {

                UpdatePanel updatePanel = (UpdatePanel)FindControl(UpdatePanelID);

                string script = String.Format(
                   CultureInfo.InvariantCulture,
                   @"
Sys.Application.add_load(function(sender, args) {{
var {0}_borderAnimation = new BorderAnimation('{1}');   
var panelElement = document.getElementById('{0}');
     if (args.get_isPartialLoad()) {{
        {0}_borderAnimation.animate(panelElement);
    }}
}})
",
                   updatePanel.ClIEntID,
                   ColorTranslator.ToHtml(BorderColor));


                ScriptManager.RegisterStartupScript(
                    this,
                    typeof(UpdatePanelAnimationWithClIEntResource),
                    ClIEntID,
                    script,
                    true);
            }
        }
    }
}

 

 

八、向AssemblyInfo.cs文件中添加如下行:

[assembly: System.Web.UI.WebResource("UpdateAnimate.UpdatePanelAnimation.JS", "application/x-Javascript")]

九、生成項目。

 

控件演示:

一、創建一個AJax-enabled類型的網站項目。

二、向網站跟目錄下添加bin目錄。

三、從控件項目的bin\Debug或 bin\Release目錄拷貝UpdateAnimate.dll到網站bin目錄裡。

四、替換Default.ASPx的內容並運行程序:

 

  <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.ASPx.cs" Inherits="_Default" %>

<%@ Register TagPrefix="Samples" Namespace="UpdateAnimate" Assembly="UpdateAnimate" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHtml 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xHtml1-transitional.dtd">

<script runat="server">

</script>

<Html XMLns="http://www.w3.org/1999/xHtml">
<head id="Head1" runat="server">
    <title>ScriptReference</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <ASP:ScriptManager ID="ScriptManager1"
                                 EnablePartialRendering="True"
                                 runat="server">
             <Scripts>
                <ASP:ScriptReference Assembly="UpdateAnimate" Name="UpdateAnimate.UpdatePanelAnimation.JS" />
             </Scripts>
            </ASP:ScriptManager>


            <Samples:UpdatePanelAnimationWithClIEntResource
                     ID="UpdatePanelAnimator1"
                     BorderColor="Green"
                     Animate="true"
                     UpdatePanelID="UpdatePanel1"
                     runat="server" >
            </Samples:UpdatePanelAnimationWithClIEntResource>
            <ASP:UpdatePanel ID="UpdatePanel1"
                               UpdateMode="Conditional"
                               runat="server">
                <ContentTemplate>
                    <ASP:Calendar ID="Calendar2"
                                  runat="server">
                    </ASP:Calendar>
                </ContentTemplate>
            </ASP:UpdatePanel>
        </div>
    </form>
</body>
</Html>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved