3

jQuery UI Datepicker を ASP.NET WebForms アプリケーションに統合しようとしています。アプリケーションはマスター ページを使用してすべてのページに共通の外観を提供し、すべてのコンテンツ ページは UpdatePanel の ContentTemplate 内に構築されます。日付ピッカーの機能をラップし、実行時にコードビハインドから日付ごとに minDate、maxDate、バリデーターなどを設定できるようにするユーザー コントロールを作成しました。また、ASP.NET がクライアント要素 ID を生成する方法にも対処する必要があります。

この 1 週間、私は高低を検索し、それを機能させるための多くのヒントを見つけました。これは、私が今いる場所のやや単純化されたバージョンです。

<asp:TextBox ID="txtTB" runat="server"
    MaxLength="10"
    CssClass="dateBox" />

<script type="text/javascript">

    // This function enables the datepicker behavior for this textbox by its ClientID.
    function <%=txtTB.ClientID %>() {
        $("#<%=txtTB.ClientID %>").datepicker({
            changeMonth: true, changeYear: true,
            showOn: 'button',
            buttonImage: "<%=Request.ApplicationPath %>/images/calendarIcon.gif",
            buttonImageOnly: true, buttonText: '', duration: '',
            onSelect: function() { }
        });
    };

    // Register the above function to execute on initial page load...
    $(document).ready(function(){ <%=txtTB.ClientID %>(); }) ;

    // ...and also after any update panel it's on has been refreshed. 
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(<%=txtTB.ClientID %>);

</script>

この問題に関連しているとは思えないバリデーターやその他のマークアップは省略しましたが、それはユーザー コントロールの要であるテキスト ボックスと、日付ピッカー機能を有効にする jQuery スクリプトです。基本的な考え方は、ASP.NET のクライアント ID を利用して次のことを行うことです。

  1. この特定のコントロールの JavaScript 関数に固有の関数名を指定してください
  2. その関数を jQuery に登録して、最初のページの読み込み後に日付ピッカーを有効にします
  3. 同じ関数を ASP.NET の PageRequestManager に登録して、ポストバック後に日付ピッカーを有効にします。

アイテム1と2はうまく機能しています。ただし、ポストバック後、datepicker 機能が失われ、テキスト ボックスだけが残ります。

ちょっと待って！それがすべてではありません。特定のページは複数のパネルで構成されており、一度に表示できるのはそのうちの 1 つだけです。これらは、現在のパネルの Visible プロパティを true にするだけで選択されます。他のすべてのパネルの Visible プロパティは false に設定されています。

これを取得します。最初のページの読み込み時に表示される最初のパネルの日付ピッカーは、期待どおりに機能します。2 番目のパネルにあるものは表示されません。最初のページに戻ると、日付ピッカーが再び表示されます。

誰かが私が間違っているという考えを持っていますか?

4

9 に答える 9

10

$(document).ready() は 1 回限りの初期化ルーチンには理想的ですが、部分的なポストバックごとに再実行する必要があるコードがある場合は、ハングしたままになります。jQuery v1.3+ で追加された LiveQuery 機能はこれに役立ちますが、限られた機能セットでしか機能しません。

たとえば、前の例の TextBox に jQueryUI 日付ピッカーを追加したい場合はどうなるでしょうか。$(document).read() に追加すると、部分的なポストバックが発生するまでうまく機能します。次に、UpdatePanel の新しい TextBox 要素には、datepicker が接続されなくなります。

<script type="text/javascript">
  function pageLoad() {
    $('#TextBox1').unbind();
    $('#TextBox1').datepicker(); 
  }
</script>

<asp:ScriptManager runat="server" />

<asp:UpdatePanel runat="server">
  <ContentTemplate>
    <asp:Button runat="server" ID="Button1" />
    <asp:TextBox runat="server" ID="TextBox1" />
  </ContentTemplate>
</asp:UpdatePanel>

この上記の回答は、以下のリンクから取得したものです。私はこれを私のプロジェクトの1つでテストして実装しました。

http://encosia.com/2009/03/25/document-ready-and-pageload-are-not-the-same/

于 2010-01-28T11:24:08.283 に答える
2

返事が遅れて申し訳ありません。

これを試してみませんか：

<script type="text/javascript">
function <%=txtTB.ClientID %>() {
    $("#<%=txtTB.ClientID %>").datepicker({
        changeMonth: true, changeYear: true,
        showOn: 'button',
        buttonImage: "<%=Request.ApplicationPath %>/images/calendarIcon.gif",
        buttonImageOnly: true, buttonText: '', duration: '',
        onSelect: function() { }
    });
};
$(document).ready(function(){ 
<%=txtTB.ClientID %>();
}) ;
</script>

次に、次のトリガーを使用してテキストボックスを更新パネルに配置します。

<asp:UpdatePanel id="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="txtTB" runat="server" MaxLength="10" CssClass="dateBox" />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="txtTB" />
</Triggers>
</asp:UpdatePanel>
于 2012-06-04T15:29:51.070 に答える
2

これを行うためのよりクリーンな方法は、を使用することだと思いますClientScriptManager.RegisterStartupScript。

Javascript:

function initCalendar(controlId) {
    $("#" + controlId).blahblah(....
}

あなたのコードビハインド（OnPreRenderおそらく）：

Page.ClientScript.RegisterStartupScript(this.GetType(), "SomeName", string.Format("<script>initCalendar('{0}');</script>", txtBox.ClientID));
于 2009-12-31T21:23:06.773 に答える
1

良い、

これがこの問題の解決策です。以下のリンクは、ajax ポストバック後に日付ピッカーが機能しない理由と、ajax 内で機能させるための解決策を説明しています。

http://jquerybyexample.blogspot.com/2010/08/jquery-datepicker-does-not-work-after.html

于 2011-10-05T14:28:30.883 に答える
0

更新パネル内でこれを試してください

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>

        <script type="text/javascript">
        var prm = Sys.WebForms.PageRequestManager.getInstance();

        prm.add_endRequest(function() {
            var customer = document.getElementById("<%=cmbCustomers.ClientID%>").value;

            /* Jquery Functions Here*/
            $(document).ready(function() {
               ...
            });


        });
        </script>
于 2010-06-23T13:15:05.173 に答える
0

更新パネルを使用している場合は、パニックにならずにここをクリックしてリラックスしてください。詳細な回答

于 2015-11-10T09:44:23.133 に答える
0

コントロールのVisibleプロパティを に設定するとfalse、まったくレンダリングされません。

これは、ページが最初に読み込まれたときに、非表示のパネル内の Javascript が存在しなかったことを意味します。

display: noneこれを解決するには、プロパティの代わりにCSS ( ) を使用してパネルを非表示にしVisibleます。

于 2009-12-31T21:10:37.390 に答える
0

Page_Loadコードビハインドで以下のコードを使用するだけです..

string DOB = Request.Form[TextBoxDOB.UniqueID];

TextBoxDOB.Text = DOB;

私はこれを実装し、魅力のように動作します

于 2013-12-06T01:51:31.780 に答える