0

私のアプリケーション:

2つの部分からなるASP.NETアプリケーションがあります。最初の部分は「不在」部分であり、2番目の部分は「署名」です。このアプリケーションは、このパーツを自動で作成します。欠席の場合、ユーザーはこの欠席の終了日と代表者を入力する必要があります。担当者のTextBoxには、ActiveDirectoryからデータを取得するオートコンプリートがあります。また、テキストボックスの右側にある画像を使用すると、ユーザーはjQueryからモーダルポップアップで代表者を検索できます。ポップアップには、1つのテキストボックスと虫眼鏡の記号が付いた画像ボタンがあります。ここで、このシンボルをクリックすると、PopUpBoxのListViewで、幅と高さが固定された代表的なものがすべて表示されるようにしたいと思います。

私の問題:

PopUpが開き、このpopupdialogのdivブロックでコントロールを設定できます。ImageButtonのイベントを作成し、このコードを生成しましたが、(popupdialogの)ボタンをクリックすると、コードが機能しません。Button_clickメソッドではジャンプしません:(

私の質問:

jqueryとasp.netでpopupdialogのコントロールを使用するにはどうすればよいですか?

ここに私のコード:

ASPX:(jqueryコード)

<script type="text/javascript" language="javascript">

        $(document).ready(function () {
            $("#dialogbox").dialog({
                autoOpen: false,
                modal: true,
                resizable: false,
                buttons: {
                    "OK": function () {
                        $(this).dialog("close");
                    },
                    "Cancel": function () {
                        $(this).dialog("close");
                    }
                }
            });

            $("#imgVertreter").click(function () {
                $("#dialogbox").dialog("open");
                return false;
            });
        }); 

    </script>

aspx:(私のpopupdialogboxdivコード)

<div id="dialogbox" title="Gesammte Vertreterliste">
        <asp:TextBox ID="pVertreter" runat="server"></asp:TextBox>
        <asp:ImageButton ID="pImageSearch" runat="server" 
        ImageUrl="~/App_Theme/lupe.jpg" Height="23px" Width="24px" 
            onclick="pImageSearch_Click" /><br />
        <hr />
        <asp:ListView runat="server" ID="ListView">

            <LayoutTemplate>
                <table id="UserTable" runat="server" border="0" width="100%" cellpadding="0" cellspacing="0">
                    <tr style="background-color:#ccdaeb" class="tableClass">
                        <th align="left" id="th4" runat="server"><asp:Label ID="lblName" runat="server" Text="Name, Vorname"></asp:Label></th>
                        <th align="left" id="th3" runat="server"><asp:Label ID="lblAbteilung" runat="server" Text="Abteilung"></asp:Label></th>
                    </tr>
                </table>
            </LayoutTemplate>

            <ItemTemplate>
                <tr>
                  <td align="left"><asp:LinkButton CssClass="MyLink" CommandName="Select" CommandArgument='<%# Container.DataItemIndex %>' ID="lblFullname" Text='<%# Eval("Name") %>' runat="server"></asp:LinkButton></td>
                  <td align="left"><asp:LinkButton CssClass="MyLink" CommandName="Select" CommandArgument='<%# Container.DataItemIndex %>' ID="lblAbteil" Text='<%# Eval("Abteilung") %>' runat="server"></asp:LinkButton></td>
                </tr>
            </ItemTemplate>

            <EmptyDataTemplate>
                Es wurden keine Einträge gefunden
            </EmptyDataTemplate>

            <AlternatingItemTemplate>
                <tr class="TableClass">
                    <td align="left"><asp:LinkButton CssClass="MyLink" CommandName="Select" CommandArgument='<%# Container.DataItemIndex %>' ID="lblFullname" Text='<%# Eval("Name") %>' runat="server"></asp:LinkButton></td>
                  <td align="left"><asp:LinkButton CssClass="MyLink" CommandName="Select" CommandArgument='<%# Container.DataItemIndex %>' ID="lblAbteil" Text='<%# Eval("Abteilung") %>' runat="server"></asp:LinkButton></td>
                </tr>
            </AlternatingItemTemplate>

        </asp:ListView>

    </div>

imageButtonの私のC#コード(pImageSearch)

 protected void pImageSearch_Click(object sender, ImageClickEventArgs e)
        {
            try
            {
                UserService srv = new UserService();

                DataTable dt = srv.BenutzerFinden(Domain, pVertreter.Text);
                DataView dv = new DataView(dt);

                dv.Sort = "Nachname ASC";

                this.ListView.DataSource = dv;
                this.ListView.DataBind(); 
            }
            catch (Exception)
            {

            }


        }

これが私のアプリケーションからの写真です:

ここに画像の説明を入力してください

動作する私のTestApplicationのIEのソースコード!

<div id="dialog" title="Liste">
<input name="txtBox" type="text" value="rettet" id="txtBox" />
<input type="submit" name="btnEdit" value="übergeben" id="btnEdit" />
</div>

動作しないメインアプリケーションのソースコード!

<div id="dialogbox" title="Vertreterliste">
<input name="pVertreter" type="text" id="pVertreter" />
<input type="image" name="pImageSearch" id="pImageSearch" src="App_Theme/lupe.jpg" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;pImageSearch&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" style="height:23px;width:24px;" /><br />
<input type="submit" name="suchen" value="suchen" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;suchen&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="suchen" />
</div>

なぜここにdopostbackOoのonclickがあるのですか?

4

2 に答える 2

1

jQueryモーダルは、DOM要素のクローンを作成し、bodyタグのに配置することで作成されます。これにより、有効なDOM要素が作成され、クライアント側で正常に機能します。

ただし、asp.netコントロールがイベントを送信するには、それらがフォームタグ内にある必要があります(asp.netは1つのフォームタグのみを作成します)。

解決策は、ダイアログを作成してから、要素をフォームタグに戻すことです。

    $(document).ready(function () {
        $("#dialogbox").dialog({
            autoOpen: false,
            modal: true,
            resizable: false,
            buttons: {
                "OK": function () {
                    $(this).dialog("close");
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            }
        });

        $("#dialogbox").parent().appendTo($("form:first"));

        $("#imgVertreter").click(function () {
            $("#dialogbox").dialog("open");
            $("#dialogbox").parent().appendTo($("form:first"));
            return false;
        });          
    }); 

その後、サーバーイベントが完全に発生するはずです。

于 2012-09-19T07:07:05.970 に答える
0

次のようなJavaScriptを使用します。

(function(){
    var popups = $('.js-popups');

    popups.magnificPopup({
        type:'inline',
        midClick: true,
        preloader: true,
        fixedContentPos: false,
        closeMarkup: '<span class="popup-close-ic mfp-close"></span>',
        removalDelay: 300,
        appendTo: 'form',
        prependTo: 'form'
    });
})();

prependTo: 'form'フォーム送信用に追加します。

于 2016-07-06T07:03:18.327 に答える