3

jQuery.dialog()関数で表示しているダイアログボックスがあり、このダイアログボックスには別のページにポストバックしたいボタンが含まれていますが、機能していません。PostBackUrl属性セットまたはOnClick(これは決して起動しません)を使用して投稿することはできません。ただし、Calendarデフォルトでポストバックが発生すると思われる日付の1つをクリックすると、ボタンPostBackUrl属性で設定したURLにページがポストバックされます! を使用したいのですasp:Calendarが、選択時のデフォルトのポストバック動作を無効にし、ユーザーがボタンを選択したときにのみ投稿が発生するようにしますが、明らかにポストバックでCalendar利用可能な日付が選択されています。ここに.aspxファイルがあります...

<form id="form1" runat="server">
        <asp:Button ID="btnShowDialog" runat="server" Text="Click to Show Dialog" OnClientClick="showDialog(); return false;" />
        <div class="divDialog" style="display: none">
            <table style="width: 100%;">
                <tr>
                    <td>First Name: <asp:TextBox ID="txtFirstName" runat="server" Text=""></asp:TextBox></td>
                    <td>Last Name: <asp:TextBox ID="txtLastName" runat="server" Text=""></asp:TextBox></td>
                </tr>
                <tr>
                    <td>
                        How Old are You?
                        <asp:DropDownList ID="ddlAge" runat="server">
                            <asp:ListItem Value="1">1</asp:ListItem>
                            <asp:ListItem Value="2">2</asp:ListItem>
                            <asp:ListItem Value="3">3</asp:ListItem>
                        </asp:DropDownList>
                    </td>
                    <td>
                        How Many Siblings do You Have?
                        <asp:DropDownList ID="ddlNumberSiblings" runat="server">
                            <asp:ListItem Value="1">1</asp:ListItem>
                            <asp:ListItem Value="2">2</asp:ListItem>
                            <asp:ListItem Value="3">3</asp:ListItem>
                            <asp:ListItem Value="4">4</asp:ListItem>
                        </asp:DropDownList>
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Calendar ID="calBirthday" runat="server" Width="200" >
                            <DayStyle BackColor="Yellow"  />
                        </asp:Calendar>
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Button ID="btnSubmit" runat="server" Text="Submit" />
                    </td>
                </tr>
            </table>
        </div>
    </form>

...そしてjQueryスクリプト...

   <script>
        function showDialog() {
            $('.divDialog').dialog({ modal: true, show: 'slide', title: 'Please Enter Information Below', width: 500 });
        }
    </script>

...そして、asp:Button と asp:Calendar の日付がブラウザーでどのようにレンダリングされるかを次に示します。

<a title="April 28" style="color:Black" href="javascript:__doPostBack('calBirthday','4866')">28</a>

....

<input id="btnSubmit" type="submit" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("btnSubmit", "", false, "", "Profile.aspx", false, false))" value="Submit" name="btnSubmit">

編集: asp:Calendar コントロールを含めるかどうかに関係なく、ボタンの送信は機能しません。しかし、Calendar コントロールの選択の送信は何らかの理由で機能します。

4

1 に答える 1

0

この種のダイアログの問題は、フォームの外にコンテンツとして与えられたものが移動することです。

その例を見てください: http://jsfiddle.net/Qej8S/1/

コンテンツをkeeper

<div class="keeper">
    <div class="divDialog" style="display: none">
    The content of the dialog        
    </div>
</div>

しかし、それを実行すると、ダイアログがコンテンツをキーパーの外側に移動していることがわかります（色のエーテル、ブラウザーのdomユーティリティのエーテル）form。

解決策として、ある種のハックを思いつきました。ダイアログが作成されたら、フォームに戻します。ここに例があります。次のように、フォーム内に特定の ID を持つ div を配置します。

<div id="MoveItHere"></div>

そして、ダイアログが次のように作成された直後に移動を設定しました。

$('.divDialog').dialog({modal: true, show: 'slide', title: 'Please Enter Information Below', width: 200, 
create: function( event, ui ) 
 {
    // this is the trick, I move it again inside the form, on a specific place.
    $("#MoveItHere").html($(this).parent());
 }
});

そして、これがオンラインテストです。これは、dom が表示されている場合に機能しています: http://jsfiddle.net/Qej8S/2/

于 2013-05-07T23:49:29.893 に答える