0

私は Web コントロールを作成しており、このコントロールで jquery date-picker を使用したいので、以下のことを試しました: 1)。必要なすべての jquery コードを web-control に適用します (ただし、私には機能しません) 2)。そのWebコントロールを呼び出しているページに必要なすべてのjqueryコードを適用します（しかし、それは私にとっては機能しません。）

私を助けてください、

実際、それを行う私の目的は次のとおりです。検索用の汎用モジュールを作成したいのですが、これにテーブルの名前を渡すだけで自動的に機能します。これまでに完了したことは次のとおりです。

1)。ドロップダウンリストのすべての列をバインドします。列のタイプがDateTimeの場合、jqueryカレンダーを含むテキストボックスが表示されます。

この問題の解決を手伝ってください。私のコードは次のとおりです。

<table>
<tr>
    <td>
        <asp:DropDownList ID="drpColumnName" Width="150px" runat="server" AutoPostBack="true"
            OnSelectedIndexChanged="drpColumnName_SelectedIndexChanged">
        </asp:DropDownList>
    </td>
    <td>
        <asp:DropDownList ID="drpOperation" Width="150px" runat="server">
        </asp:DropDownList>
    </td>
    <td>
        <asp:DropDownList ID="drpCondition" Width="150px" runat="server">
            <asp:ListItem Text="Or" Selected="True" Value="0"></asp:ListItem>
            <asp:ListItem Text="And" Value="1"></asp:ListItem>
        </asp:DropDownList>
    </td>
    <td>
        <asp:TextBox ID="txtSearchText" runat="server" Width="150px"></asp:TextBox>
        <asp:TextBox ID="txtDateSearch" CssClass="myClass" runat="server" Width="150px"></asp:TextBox>
    </td>
    <td>
        <asp:Button ID="btnAddConditionToSearch" runat="server" Text="AddToSearch" OnClick="btnAddConditionToSearch_Click" />
    </td>
</tr>
<tr>
    <td colspan="5">
        &nbsp;
    </td>
</tr>
</table>

ページのコードは次のとおりです。

  <form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
    <Search:ctrlSearch ID="cntrlSearch" runat="server" />
</div>
</form>

Jquery コードは次のとおりです。

     <script type="text/javascript">
$(document).ready(function () {


    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_initializeRequest(InitializeRequest);
    prm.add_endRequest(EndRequest);
    // Place here the first init of the DatePicker   

    $('.myclass').datepicker();


});

function InitializeRequest(sender, args) { }
function EndRequest(sender, args) {
    // after update occur on UpdatePanel re-init the DatePicker 

    $('.myclass').datepicker();


}

私を助けてください、

4

5 に答える 5

2

クラス セレクターで日付ピッカーを見つけます。これは ID を探すよりもはるかに簡単です。コントロールが更新パネルに挟まれている場合は、日付ピッカーを 2 回初期化する必要があります。これを実行します。

  <script type="text/javascript">
  $(document).ready(function () {


        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_initializeRequest(InitializeRequest);
        prm.add_endRequest(EndRequest);
        // Place here the first init of the DatePicker   

        $('.myclass').datepicker();


    });

    function InitializeRequest(sender, args) { }
    function EndRequest(sender, args) {
        // after update occur on UpdatePanel re-init the DatePicker 

        $('.myclass').datepicker();


             }
</script>

マークアップ`

  <asp:TextBox ID="txtDateSearch" CssClass="myClass" runat="server" Width="150px"></asp:TextBox>

デモファイルはこちら

于 2013-03-05T09:20:39.817 に答える
1

こんな感じでチェック

$("#<%=txtSearchText.ClientID%>").datepicker();
于 2013-03-05T09:21:21.743 に答える
0

このページをご覧くださいjquery-ui-datepicker -> UIコードです。このコード ブロックを js ファイルとして保存します。次に、aspxページでソースを取得します。

<script src="js/jquery.ui.datepicker-tr.js" type="text/javascript"></script> like this.

$(document).ready(function () {

$('#<%=txtBirthday.ClientID%>').datepicker({
                changeMonth: true,
                changeYear: true,
                yearRange: "-100:-17",
                defaultDate: new Date(1980, 01, 01)
            });

});

これがサンプルコードです。

于 2013-07-11T08:01:17.177 に答える
0 
<asp:Label ID="Label1" runat="server" Text="From"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<asp:Label ID="Label2" runat="server" Text="To"></asp:Label>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
  $(function() {
    $( "#TextBox1" ).datepicker();
  });
  $(function() {
    $( "#TextBox2" ).datepicker();
  });
</script>
于 2013-12-19T04:54:08.230 に答える
0

あなたの問題は、asp.netがコントロールとマスターページなどにネストされている要素の名前とIDを変更するためだと思います.

ページのソースを開き、コントロールを見つけて、ID を再確認します。

または、代わりに css クラスを要素に追加し、jQuery で ID の代わりにそれを探します。

日

于 2013-03-05T09:20:40.357 に答える