1

私はjQueryとJavaScriptに少し慣れていないので、問題が発生しました。

Gridview内のButtonFieldからjQueryUIダイアログボックスを開くのに問題があります。

<asp:ButtonField ButtonType="link" Text="Modify Deadline" Visible="true" runat="server" CommandName="modifyDeadline" ControlStyle-CssClass="button" ItemStyle-CssClass="sliderPopupOpener"/>

最初に、上記にクラスを指定して、sliderPopupOpenerという名前を付け、以下のようにクリックするとjQueryポップアップを開くようにしました。

$(".sliderPopupOpener").click(function () {
  $("#sliderPopup").dialog("open");
});

しかし、これはポストバックのために機能しませんでしたが、それを除けば、私のアプローチでも機能しません。jQuery UIダイアログを表示する前に、データベースからデータを取得したいので。したがって、最善のアプローチは、CodeBehindからDialog関数を呼び出すことだと思います。

これどうやってするの？

私はこのアプローチを試しましたが、うまくいきませんでした。何か間違ったことをしているのかどうかわかりません。

if (e.CommandName == "modifyDeadline")
{
     string sliderPopupFunction = @" <script type=""text/javascript""> 
                                        $(function () { 
                                            jQuery(function () {
                                                $(""#sliderPopup"").dialog(""open""); 
                                            }
                                         });
                                    </script>";
    ClientScript.RegisterStartupScript(typeof(Page), "key", sliderPopupFunction);
}

上記は可能ですか？もしそうなら、私は何を間違っていますか？

編集：

コードビハインドからjQuery関数を呼び出すだけでこれが可能かどうかを私に伝えるのではなく、誰もがこれを回避する方法で答えを出していることに気づきました。他のソリューションには感謝していますが、すべての準備が整っているので、コードビハインドを使用して、最小限の労力でこれを機能させることができれば幸いです。

4

3 に答える 3

1

clickイベント ハンドラーを直接バインドする代わりに、live(jquery 1.7 以降非推奨) またはon.

そうすれば、これを変更する必要があります：

$(".sliderPopupOpener").click(function () {
    $("#sliderPopup").dialog("open");
});

このようなものに：

$(body).on("click", ".sliderPopupOpener", function(){
    $("#sliderPopup").dialog("open");
});

別

コード ビハインド アプローチの方が適している場合は、スクリプトでメソッドを直接呼び出してみてください。つまり、次のように変更します。

string sliderPopupFunction = @" <script type=""text/javascript""> 
                                    $(function () { 
                                        jQuery(function () {
                                            $(""#sliderPopup"").dialog(""open""); 
                                        }
                                     });
                                </script>";

単純にこれに：

string sliderPopupFunction = @" <script type=""text/javascript""> 
                                    $(""#sliderPopup"").dialog(""open""); 
                                </script>";

また、sliderPopupサーバー側コントロールの場合は、#sliderPopupを ASP .NET によって生成されたクライアント ID に置き換える必要があります ( を使用sliderPopup.ClientID)。

考慮すべきもう 1 つの点はsliderPopup、更新パネル内にある場合は、最初に Jquery UI ダイアログを次のように再初期化する必要があります。

$("#sliderPopup").dialog().dialog("open");
于 2013-03-18T01:46:34.197 に答える
0

この状況では、単純な古い<input type="button/>ボタンを使用し、ajaxを使用してサーバーへの呼び出しを実行し、返されたデータを使用してhtmlに追加し、ダイアログを使用する方がよいと思います。Ajaxは、ページ全体をポストバックすることなく、コードビハインドを実行します。

編集：これは私が少し前にした例です

//declaring the web method annotation allows this method to be accessed by ajax calls
//scriptmethod tells this method to take the data that we're returning, and encode it as a json so we can use it in javascript
        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)] 
        public static List<Person> getPeople() {
            List<Person> people = null;
            using (testDataEntities context = new testDataEntities()) {

                people = context.People.ToList();

            }
            return people;
        }

$（document）.ready（function（）{

        $("#getPeople").click(function () {

            $.ajax({
                type: "POST",
                data: {},
                url: "Default.aspx/getPeople", //getPeople is the name of the method
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                  var data = msg.d;
                  var $table = $("<table></table>");
                   $.each(data,function(){
                    $table.append("<tr><td>"+this.MyProperty+"</td></tr>")
                    });
                  $table.dialog();
                }
            });

        });
    });
于 2013-03-18T01:35:46.497 に答える
0

<asp:ButtonFieldを<asp:TemplateField、必要に応じて書き込みに置き換えるだけです。

<asp:TemplateField>
    <ItemTemplate>
        <input type="button" onclick='jsFunctionThatShowsTheDialog()'/>
    </ItemTemplate>
</asp:TemplateField>
于 2013-03-18T01:42:08.423 に答える