2

ボタンがasp.netページでクリックされると、モーダルポップアップが表示されるようにしようとしています。

   <%@ Control Language="C#" AutoEventWireup="true" CodeFile="TestFile.ascx.cs" Inherits="TestFile" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    <%@ Import Namespace="System.IO" %>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>jQuery UI Example Page</title>
        <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
        <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
        <script type="text/javascript"> 

                function fnmodalpopup() {
        $( "#dialog-modal" ).dialog({
            height: 140,
            modal: true
});
        </script>
    </head>

    <!--Misc functions for operations -->
    <script runat="server" type="text/javascript">

    </script>

    <div id="dialog-modal" title="Basic modal dialog">
        <p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
    </div>

    <asp:Button ID="Button1" runat="server" Text="Button" />

http://jqueryui.com/demos/dialog/#modalとまったく同じダイアログ ボックスを作成しようとしていますが、ボタンをクリックすると asp.net フォームでトリガーされます。ページが点滅し、何も表示されません。

どんなフィードバックもとても役に立ちます！

4

6 に答える 6

4

OnClientClick イベントを使用してから、次のようにreturn falseでポストバックを防止する必要があります。

<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="return fnmodalpopup()" />

function fnmodalpopup() {   
    $( "#dialog-modal" ).dialog({
        height: 140,
        modal: true
    });
    return false;
});

編集:
OnClientClick=" return fnmodalpopup()"を変更しました
今では問題なく動作します(少なくともテストしたとき)。

ポストバックを作成したくないのに、なぜサーバー側コンポーネントを使用したいのですか? このボタンがポストバックを実行する必要がない場合は、html ボタン タグ (または他の html タグを使用し、jQuery で「クリック」イベントをキャッチ) を使用する方がよいでしょう。ページの残りの部分で asp.net コントロールを使用するかどうかは問題ではありません。

于 2012-07-24T21:00:44.750 に答える
1

Asp.Net では、スクリプト マネージャーをページにドラッグし、ボタンを更新パネル内のコンテンツ テンプレート タグに配置すると、これも適切に機能します。Ajax 更新パネルはデフォルトで asp.net のカバーの下でポストバックを防止するため、ボタンの OnClientClick は適切に機能して jquery ポップアップを表示します。ただし、これは主に、ボタンが常にポストバックするのではなく、豊富なクライアント側エクスペリエンスを提供するコントロール セットの一部である場合に役立ちます (たとえば、対話型のクライアント側コントロール パネルを提供するユーザー コントロール)。

于 2013-02-05T06:56:13.283 に答える
0

変更してみてください

       <asp:Button ID="Button1" runat="server" Text="Button" />

に：

      <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="fnmodalpopup();" />

それから：

function fnmodalpopup() {   
    $( "#dialog-modal" ).dialog({
        height: 140,
        modal: true
    });
});
于 2012-07-24T19:11:21.993 に答える
0

これを試して。jQueryを使用してポストバックを防ぎます。過去に return false メソッドに問題がありました。

$(function () {
    $("[id$=Button1]").click(function () {
        // prevent the default action, e.g., following a link
        event.preventDefault();
        $dialog.dialog('open');
    });
});

ボタンのクリックに ASP.Net 機能が必要ない場合は、他の HTML オブジェクトの使用も検討してください。それはかなりのものをきれいにすることができ、サーバーと戦う必要がなくなります.

于 2012-07-24T19:20:25.600 に答える