2

私が抱えている問題が以前にSOで尋ねられ、議論されたという事実をよく知っていますが、私はそれらすべてを数え切れないほど読みましたが、実際に私の問題を解決するのに役立つものはありませんでした. Visual Studio、ASP.NET、および C# を使用しています。

私が正確にやりたいことは次のとおりです。内部にラベルを含むJQueryダイアログがあります。ボタンもついています。そのボタンが押されたら、ボタンのクリック イベント内にジャンプして、JQuery ダイアログ内のラベルのテキストを設定したいと考えています。次に、ダイアログを開き、ボタンのクリック ハンドラーに設定されたばかりのテキストを含むラベルを表示します。

これが私のJQueryダイアログにあるはずのコンテンツです(この質問のためにコードを簡略化したことに注意してください):

<div id="dialog" title="Basic dialog">
<asp:Label ID="Label1" runat="server" ></asp:Label>
</div>

私のページには、onClick イベントを持つ ASP.NET ボタンがあります。コード ビハインドでは、ボタンのクリック イベント内で、Label1 のテキストを設定しています。

これは私のボタンです:

<asp:LinkButton ID="testButton" runat="server" onClick="button_Click" text="click me"/>

クリック ハンドラーの背後にあるコードは次のとおりです。

protected void button_Click(object sender, EventArgs e)
{
    Label1.Text = "Hello";
}

これは実際には機能しますが、私が望むようには機能しません。

私の問題: 何らかの理由で、ラベルのテキストは、ボタンを 2 回押したときにのみ設定されます。つまり、ボタンを初めてクリックすると、ダイアログが開き、何も表示されず、ダイアログが消えてページがポストバックされます。2 回目にボタンを押すと、ラベルにテキストが設定されていることがわかりますが、ダイアログがすぐに消えてページがポストバックされます。

ボタンに次を追加しようとしました: OnClientClick="return false;" これを行うと、ポストバックの問題はなくなりましたが、ボタンのクリック イベントが発生しません。

また、スクリプトに以下を追加しようとしました: event.preventDefault(); これにより、return false; と同じ問題が発生します。ページはポストバックせず、単にボタンのクリック イベントにジャンプしません。

ここに私のダイアログスクリプトがあります:

<script>
 $(function () {

     $('#dialog').parent().appendTo($("form:first"))

     $("#dialog").dialog(
        {
            autoOpen: false,
            buttons: {
                "Ok": function () {
                    $(this).dialog("close");
                }
            }
                     } 

     );

     $("#testButton")
        .button()
        .click(function openConfirmDialog() {

            $("#dialog").dialog("open")


        });

 });
</script>

基本的に、ボタンをクリックしてラベルのテキストを設定し、ダイアログを開き、ユーザーが閉じるまでそのダイアログを開いたままにしておくだけです。

何かが欠けているかもしれませんが、やりたいことと同じくらい簡単なことをするのがどれほど難しいかを知って驚いています.

よろしく、ジェーン

4

3 に答える 3

1

ボタン コントロールをクリックしてページがポストバックされると、ダイアログが更新されて閉じられます。データを含むページがポストバックされたときにダイアログ ボックスを表示する方法を実装する必要があります。

i: 最初のステップでは、コード ビハインドで変数を作成します。例えば

 protected string PostBackOption ="";

ii: ページ ロードまたはページ プリ レンダリング イベントでページがポスト バックされるときに、ダイアログ オプション テキストを設定するためのチェックを追加します。例えば

if (Page.IsPostBack)
{
   PostBackOption = "$(\"#dialog\").dialog(\"open\");";
}

iii: 以下に示すように、javascript 内でこの変数を呼び出します。

<script>
        $(function () {

            $('#dialog').parent().appendTo($("form:first"))

            $("#dialog").dialog(
                {
                    autoOpen: false,
                    buttons: {
                        "Ok": function () {
                            $(this).dialog("close");
                        }
                    }
                }

             );

                $("#<%= testButton.ClientID %>")
            .button()
            .click(function openConfirmDialog() {

                $("#dialog").dialog("open")


            });
            <%=PostBackOption %>
        });

[クリックしてください] ボタンをクリックすると、ページがポストバックされ、ポストバック ダイアログが表示されなくなり、ラベルにテキスト "hello" が適切に入力されます。

于 2012-04-16T19:37:49.743 に答える
1

autoOpen値を含むラベルに基づいて決定するかどうかを決定する簡単な例を作成しました。ページが更新されるため、ダイアログは消えます。ページ全体のポスト バックをなくしたい場合は、UpdatePanels を使用できます。または、次のようにすることもできます。

HTML と jQuery:

<!DOCTYPE html>

<html>
<head runat="server">
    <meta charset="utf-8" />
    <title>jQuery Dialog Demo</title>
    <link rel="stylesheet" type="text/css" href="//ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/themes/cupertino/jquery-ui.css" />
</head>
<body>
    <form runat="server">
        <div id="dialog" title="Basic dialog" style="display: none;">
            <asp:Label ID="Label1" runat="server"></asp:Label>
        </div>
        <asp:LinkButton ID="testButton" runat="server" onClick="button_Click" text="click me"/>
    </form>

    <script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/jquery-ui.min.js"></script>
    <script type="text/javascript">
        var $labelText = $("#Label1").html().trim(),
            $dialog = $("#dialog").dialog({
                autoOpen: $labelText.length,
                buttons: { "Ok": function () { $(this).dialog("close"); } }
             });

         $("#testButton").button().click(function() { 
            if ($labelText.length) $dialog.dialog("open");
         });
    </script>
</body>
</html>

C# コードビハインド:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class test6 : System.Web.UI.Page
{
    protected void button_Click(object sender, EventArgs e)
    {
        Label1.Text = "Current time in ticks: " + DateTime.Now.Ticks.ToString();
    }
}

出力:

ここに画像の説明を入力

于 2012-04-16T19:51:22.587 に答える
0

ラベルは既にフォームに追加されているため、ダイアログをフォームに追加する必要はありません。<form runat="server">ASP.Net は、タグに配置されたコントロールのみを受け入れます。

于 2012-04-16T19:37:27.493 に答える