ASP.NET AJAX Control Toolkit - ModalPopup -

InputManの各コントロールは、ASP.NET AJAX Control ToolkitのModalPopupコントロールに配置できます。

テキスト、マスク、数値コントロールのModalPopupを開く
日付時刻、日付、時刻コントロールのModalPopupを開く
コンボ、リストコントロールのModalPopupを開く
カレンダー、電卓コントロールのModalPopupを開く

ソースコード

別ウィンドウで表示
using System;

public partial class ControlToolkit_ModalPopup : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
}

Partial Class ControlToolkit_ModalPopup
    Inherits System.Web.UI.Page

End Class

<%@ page title="" language="C#" masterpagefile="~/MasterPage.master" autoeventwireup="true" inherits="ControlToolkit_ModalPopup, App_Web_szcq5i2o" stylesheettheme="SkinFile" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
<%@ Register Assembly="GrapeCity.Web.Input.v80, Version=8.0.2016.1130, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" Namespace="GrapeCity.Web.Input.IMCalculator" TagPrefix="im_calculator" %>
<%@ Register Assembly="GrapeCity.Web.Input.v80, Version=8.0.2016.1130, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" Namespace="GrapeCity.Web.Input.IMList" TagPrefix="im_list" %>
<%@ Register Assembly="GrapeCity.Web.Input.v80, Version=8.0.2016.1130, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" Namespace="GrapeCity.Web.Input.IMCombo" TagPrefix="im_combo" %>
<%@ Register Assembly="GrapeCity.Web.Input.v80, Version=8.0.2016.1130, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" Namespace="GrapeCity.Web.Input.IMNumber" TagPrefix="im_number" %>
<%@ Register Assembly="GrapeCity.Web.Input.v80, Version=8.0.2016.1130, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" Namespace="GrapeCity.Web.Input.IMDate" TagPrefix="im_date" %>
<%@ Register Assembly="GrapeCity.Web.Input.v80, Version=8.0.2016.1130, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" Namespace="GrapeCity.Web.Input.IMMask" TagPrefix="im_mask" %>
<%@ Register Assembly="GrapeCity.Web.Input.v80, Version=8.0.2016.1130, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" Namespace="GrapeCity.Web.Input.IMCalendar" TagPrefix="im_calendar" %>
<%@ Register assembly="GrapeCity.Web.Input.v80, Version=8.0.2016.1130, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMEdit" tagprefix="im_edit" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <style type="text/css">
        .modalheader {
            cursor: move;
            background-color: #DDDDDD;
            border: solid 1px Gray;
            color: Black;
            text-align: center;
        }
        .modalPopup {
            background-color: #ffffdd;
            border-width: 3px;
            border-style: solid;
            border-color: Gray;
            padding: 3px;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
    <table align="center">
        <tr>
            <td class="controlsTd"><asp:LinkButton ID="showModalPopup1" runat="server">テキスト、マスク、数値コントロールのModalPopupを開く</asp:LinkButton></td>
        </tr>
        <tr>
            <td class="controlsTd"><asp:LinkButton ID="showModalPopup2" runat="server">日付時刻、日付、時刻コントロールのModalPopupを開く</asp:LinkButton></td>
        </tr>
        <tr>
            <td class="controlsTd"><asp:LinkButton ID="showModalPopup3" runat="server">コンボ、リストコントロールのModalPopupを開く</asp:LinkButton></td>
        </tr>
        <tr>
            <td class="controlsTd"><asp:LinkButton ID="showModalPopup4" runat="server">カレンダー、電卓コントロールのModalPopupを開く</asp:LinkButton></td>
        </tr>
    </table>

    <asp:ModalPopupExtender ID="Topic1_ModalPopupExtender" runat="server"
            CancelControlID="btnClose1" Enabled="True" PopupControlID="Topic1" PopupDragHandleControlID="Topic1_Header"
            TargetControlID="showModalPopup1">
    </asp:ModalPopupExtender>
    <asp:Panel ID="Topic1" runat="server" CssClass="modalPopup" Style="display: none;">
        <asp:Panel ID="Topic1_Header" CssClass="modalheader" runat="server">
            テキスト、マスク、数値コントロール
        </asp:Panel>
        <div style="text-align:center">
            <table>
                <tr>
                    <td class="controlsTd">テキスト:</td>
                    <td class="controlsTd">
                        <im_edit:GcTextBox ID="GcTextBox1" runat="server" HasLoadFromXml="True" Text="テキストコントロール" Width="200px">
                        </im_edit:GcTextBox>
                    </td>
                </tr>
                <tr>
                    <td class="controlsTd">マスク:</td>
                    <td class="controlsTd">
                        <im_mask:GcMask ID="GcMask1" runat="server" Width="200px" HasLoadFromXml="True">
                            <Format Pattern="℡ \D{2,4}-\D{2,4}-\D{4}" />
                        </im_mask:GcMask>
                    </td>
                </tr>
                <tr>
                    <td class="controlsTd">数値:</td>
                    <td class="controlsTd">
                        <im_number:GcNumber ID="GcNumber1" runat="server" Width="200px" 
                            HasLoadFromXml="True">
                            <Spin Visible="true" />
                            <DropDown DropDownType="NumericPad" />
                        </im_number:GcNumber>
                    </td>
                </tr>
            </table>
            <asp:Button ID="btnClose1" CssClass="setButton" runat="server" Text="閉じる" />
        </div>
    </asp:Panel>

    <asp:ModalPopupExtender ID="Topic2_ModalPopupExtender" runat="server"
            CancelControlID="btnClose2" Enabled="True" PopupControlID="Topic2" PopupDragHandleControlID="Topic2_Header"
            TargetControlID="showModalPopup2">
    </asp:ModalPopupExtender>
    <asp:Panel ID="Topic2" runat="server" CssClass="modalPopup" Style="display: none;">
        <asp:Panel ID="Topic2_Header" runat="server" CssClass="modalheader">
            日付時刻、日付、時刻コントロール
        </asp:Panel>
        <div style="text-align:center">
            <table>
                <tr>
                    <td class="controlsTd">日付時刻:</td>
                    <td class="controlsTd">
                        <im_date:GcDateTime ID="GcDateTime1" runat='server' Width="200" HasLoadFromXml="True">
                            <DropDown DropDownType="Picker" />
                        </im_date:GcDateTime>
                    </td>
                </tr>
                <tr>
                    <td class="controlsTd">日付:</td>
                    <td class="controlsTd">
                        <im_date:GcDate ID="GcDate1" runat='server' Width="200" HasLoadFromXml="True"></im_date:GcDate>
                    </td>
                </tr>
                <tr>
                    <td class="controlsTd">時刻:</td>
                    <td class="controlsTd">
                        <im_date:GcTime ID="GcTime1" runat='server' Width="200" HasLoadFromXml="True">
                            <DropDown DropDownType="Picker"/>
                        </im_date:GcTime>
                    </td>
                </tr>
            </table>
             <asp:Button ID="btnClose2" CssClass="setButton" runat="server" Text="閉じる" />
        </div>
    </asp:Panel>
    
    <asp:ModalPopupExtender ID="Topic3_ModalPopupExtender" runat="server"
            CancelControlID="btnClose3" Enabled="True" PopupControlID="Topic3" PopupDragHandleControlID="Topic3_Header"
            TargetControlID="showModalPopup3">
    </asp:ModalPopupExtender>
    <asp:Panel ID="Topic3" runat="server" CssClass="modalPopup" Style="display: none;">
        <asp:Panel ID="Topic3_Header" runat="server" CssClass="modalheader">
            コンボ、リストコントロール
        </asp:Panel>
        <div style="text-align:center">
            <table>
            <tr>
                <td class="controlsTd">コンボ:</td>
                <td class="controlsTd">
                    <im_combo:GcComboBox ID="GcComboBox1" runat='server' Width="200" 
                        HasLoadFromXml="True">
                        <ListBox AutoWidth="True" />
                        <defaultcolumn autowidth="True"></defaultcolumn>
                        <listcolumn header-text="クラス名"></listcolumn>
                        <listcolumn header-text="コントロール名"></listcolumn>
                        <comboitem image="0"></comboitem>
                        <subitem index="0" value="GcTextBox"></subitem>
                        <subitem index="0" value="テキストコントロール"></subitem>
                        <comboitem image="1"></comboitem>
                        <subitem index="1" value="GcMask"></subitem>
                        <subitem index="1" value="マスクコントロール"></subitem>
                        <comboitem image="2"></comboitem>
                        <subitem index="2" value="GcDatetime"></subitem>
                        <subitem index="2" value="日付時刻コントロール"></subitem>
                        <comboitem image="3"></comboitem>
                        <subitem index="3" value="GcDate"></subitem>
                        <subitem index="3" value="日付コントロール"></subitem>
                        <comboitem image="4"></comboitem>
                        <subitem index="4" value="GcTime"></subitem>
                        <subitem index="4" value="時刻コントロール"></subitem>
                        <comboitem image="5"></comboitem>
                        <subitem index="5" value="GcNumber"></subitem>
                        <subitem index="5" value="数値コントロール"></subitem>
                        <comboitem image="6"></comboitem>
                        <subitem index="6" value="GcComboBox"></subitem>
                        <subitem index="6" value="コンボコントロール"></subitem>
                        <comboitem image="7"></comboitem>
                        <subitem index="7" value="GcListBox"></subitem>
                        <subitem index="7" value="リストコントロール"></subitem>
                        <comboitem image="8"></comboitem>
                        <subitem index="8" value="GcCalendar"></subitem>
                        <subitem index="8" value="カレンダーコントロール"></subitem>
                        <comboitem image="9"></comboitem>
                        <subitem index="9" value="GcCalculator"></subitem>
                        <subitem index="9" value="電卓コントロール"></subitem>
                        <helpvalue ></helpvalue>
                    </im_combo:GcComboBox>
                </td>
            </tr>
            <tr>
                <td class="controlsTd" valign="top">リスト:</td>
                <td class="controlsTd">
                    <im_list:GcListBox ID="GcListBox1" runat="server" Width="370" Height="150" 
                        HasLoadFromXml="True">
                        <ListHeaderPane Font-Name="メイリオ" Font-Size="9pt" Height="28" Visible="True" />
                        <defaultcolumn autowidth="True"></defaultcolumn>
                        <listcolumn header-text="クラス名"></listcolumn>
                        <listcolumn header-text="コントロール名"></listcolumn>
                        <listitem image="0"></listitem>
                        <subitem index="0" value="GcAddress"></subitem>
                        <subitem index="0" value="住所検索エクステンダ"></subitem>
                        <listitem image="1"></listitem>
                        <subitem index="1" value="GcBalloonTip"></subitem>
                        <subitem index="1" value="バルーンチップエクステンダ"></subitem>
                        <listitem image="2"></listitem>
                        <subitem index="2" value="GcShortcut"></subitem>
                        <subitem index="2" value="ショートカットエクステンダ"></subitem>
                        <listitem image="3"></listitem>
                        <subitem index="3" value="GcValidatorAction"></subitem>
                        <subitem index="3" value="検証アクションエクステンダ"></subitem>
                        <listitem image="4"></listitem>
                        <subitem index="4" value="GcCharacterTypeValidator"></subitem>
                        <subitem index="4" value="文字種検証コントロール"></subitem>
                        <listitem image="5"></listitem>
                        <subitem index="5" value="GcTextLengthValidator"></subitem>
                        <subitem index="5" value="文字数検証コントロール"></subitem>
                        <listitem image="6"></listitem>
                        <subitem index="6" value="GcDateRangeValidator"></subitem>
                        <subitem index="6" value="日付範囲検証コントロール"></subitem>
                        <listitem image="7"></listitem>
                        <subitem index="7" value="GcDateDifferenceValidator"></subitem>
                        <subitem index="7" value="日付比較検証コントロール"></subitem>
                        <listitem image="8"></listitem>
                        <subitem index="8" value="GcForbiddenTextValidator"></subitem>
                        <subitem index="8" value="禁止文字列検証コントロール"></subitem>
                        <listitem image="9"></listitem>
                        <subitem index="9" value="GcDataTypeValidator"></subitem>
                        <subitem index="9" value="データ型検証コントロール"></subitem>
                        <helpvalue ></helpvalue>
                    </im_list:GcListBox>
                </td>
            </tr>
        </table>
        <asp:Button ID="btnClose3" CssClass="setButton" runat="server" Text="閉じる" />
        </div>
    </asp:Panel>

    <asp:ModalPopupExtender ID="Topic4_ModalPopupExtender" runat="server"
            CancelControlID="btnClose4" Enabled="True" PopupControlID="Topic4" PopupDragHandleControlID="Topic4_Header"
            TargetControlID="showModalPopup4">
    </asp:ModalPopupExtender>
    <asp:Panel ID="Topic4" runat="server" CssClass="modalPopup" Style="display: none;">
        <asp:Panel ID="Topic4_Header" runat="server" CssClass="modalheader">
            カレンダー、電卓コントロール
        </asp:Panel>
        <div style="text-align:center;">
            <table>
                <tr>
                    <td class="controlsTd" valign="top">カレンダー:</td>
                    <td class="controlsTd">
                        <im_calendar:GcCalendar ID="GcCalendar1" runat='server' HasLoadFromXml="True"></im_calendar:GcCalendar>
                    </td>
                    <td class="controlsTd" valign="top">電卓:</td>
                    <td class="controlsTd">
                        <im_calculator:GcCalculator ID="GcCalculator1" runat='server' 
                            HasLoadFromXml="True"></im_calculator:GcCalculator>
                    </td>
                </tr>
            </table>
            <asp:Button ID="btnClose4" CssClass="setButton" runat="server" Text="閉じる" />
        </div>
    </asp:Panel>
</asp:Content>


このページの先頭へ戻る