Partilhar via

【ASP.NET AJAX】 XML-Scriptを使用したビヘイビアの実装

  • Artigo

こんにちは、こだかです。
最近、少しづつ「クリクリドーナツウォッチャー」として認知され始めたようです。
ちょっとうれしいです。

白状します。実は食べた事ありません・・・orz
でっでも、食べた時にはキチンとレポートしますよ。（毎回前置きが長くて申し訳ありません。）

さて、引き続きXML-Scriptのサンプルです。
今回はDragOverlayExtenderもどきになります、実行するとDivのドラッグ＆ドロップが可能です。
前回と同様に比較の為、JavaScriptの実装も同じページに含めています。

手順
1 VisualStudio2005を起動して[ファイル]→[新規作成]→[Webサイト]より[ASP.NET AJAX CTP-Enabled WebSite]を選択し新規のWebサイトを作成します。
2 Default.aspxのソースビューに下記を貼り付けます。
 これでビルドができるはずです。

ページロードのタイミングで、 Sys.Application.add_init(doLoad);によってJavaScript実装用の初期化を行っています。
（<body onload ="doLoad">って書いても同じですけどね。）
もちろんXML-Scriptの同じ部分は <script type="text/xml-script">以下です。
静的ものであれば、XML-Scriptの記述は奇麗ですよね。

これもMicrosoftONでのネタにしようかな？と思案中です。

 

こだかたろう

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "https://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" >
            <Scripts>
                <asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="PreviewScript.js" />
                <asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="PreviewDragDrop.js" />
            </Scripts>
        </asp:ScriptManager>
       
        <div id="div1" style="width: 100px; height: 100px; background-color: red">
            Java-Script
        </div>
       
        <div id="div2" style="width: 100px; height: 100px; background-color: yellow">
            XML-Script
        </div>

        <script language="javascript" type="text/javascript">
            Sys.Application.add_init(doLoad);
            function doLoad(){
                var behave1= new Sys.Preview.UI.FloatingBehavior($get('div1'));
                behave1.set_handle($get('div1'));
                behave1.initialize();
            }
        </script>

        <script type="text/xml-script">
        <page xmlns="https://schemas.microsoft.com/xml-script/2005">
            <components>
              <label id="div2">
                <behaviors>
                  <floatingBehavior handle="div2" />
                </behaviors>
              </label>
            </components>
        </page>
        </script>
    </form>
</body>
</html>