vb.net jquery 日期选择器回发

Question

我在我的项目中使用这个日期选择器 (http://keith-wood.name/datepick.html)

我在 asp:TextBox 控件上使用它，问题是该控件失去了 AutopostBack 功能。

我希望实现的是更新链接到 selected 日期的 gridview，并且在使用这个特定的日期选择器之前它正在工作（但由于各种原因我不得不更改日期选择器）。

如果我从下拉列表中更改日期或 select 用户，它应该更新 gridview。

我的代码的相关部分：

<script language="javascript" type="text/javascript">
    $(document).ready(function () { $('#txtData').datepick({ dateFormat: 'dd/mm/yyyy'});
</script>

以下内容在更新面板中，页面上声明了脚本管理器

<div class="generic">
    <div class="panel">
        <div class="title"><h1>Chiamate del giorno</h1></div>
            <div >
                 <asp:TextBox runat="server" ID="txtData" CssClass="calendarTxt" placeholder="Data" BorderStyle="Solid" BorderColor="#d13f31" BorderWidth="2px" required="required" AutoPostBack="true"></asp:TextBox>
                <asp:DropDownList ID="ddlUtenti" runat="server" AppendDataBoundItems="true" CssClass="dropdown" placeholder="Scegli a chi riassegnare la chiamata" AutoPostBack="true" OnSelectedIndexChanged="ddlUtenti_SelectedIndexChanged">
        <asp:ListItem Value="-1">Tutti</asp:ListItem>
    </asp:DropDownList>
            </div>


        <br />
        <div class="content">
            <div id="divChiamateGiorno" class="scrollDiv" >
            <asp:GridView ID="grdChiamateGiorno" runat="server" AutoGenerateColumns="False" DataKeyNames="idchia,dalle,alle,idstato" DataSourceID="SqlDataSource1" AllowSorting="True" CssClass="tablestyle"  >
                <AlternatingRowStyle BackColor="WhiteSmoke" CssClass="altrowstyle"/>
                 <FooterStyle BackColor="#CCCC99" ForeColor="Black" />
                <HeaderStyle Font-Bold="True" BackColor="LightGray" HorizontalAlign="Center" VerticalAlign="Middle" Height="30px"  CssClass="headerstyle" />
                <RowStyle CssClass="rowstyle" />

                <Columns>
                    <asp:BoundField DataField="tecnico" HeaderText="Tecnico" SortExpression="tecnico" />
                    <asp:BoundField DataField="ragsoc" HeaderText="Cliente" SortExpression="ragsoc" ItemStyle-Width="30%" />
                    <asp:BoundField DataField="rdescr" HeaderText="Richiesta" SortExpression="rdescr" ItemStyle-Width="50%" />
                    <asp:BoundField DataField="prior" HeaderText="Priorità" SortExpression="prior" ItemStyle-HorizontalAlign="Center" >
                    <ItemStyle HorizontalAlign="Center" />
                    </asp:BoundField>
                    <asp:BoundField DataField="app" HeaderText="Appuntamento" SortExpression="app" ItemStyle-HorizontalAlign="Center" >
                    <ItemStyle HorizontalAlign="Center" />
                    </asp:BoundField>
                    <asp:BoundField DataField="assremota" HeaderText="Remoto" SortExpression="assremota" ItemStyle-HorizontalAlign="Center"  >
                    <ItemStyle HorizontalAlign="Center" />
                    </asp:BoundField>
                    <asp:BoundField DataField="idchia" HeaderText="idchia" InsertVisible="False" ReadOnly="True" SortExpression="idchia" Visible="false" />
                    <asp:BoundField DataField="tipo" HeaderText="tipo" SortExpression="tipo" Visible="false" />
                    <asp:BoundField DataField="rforo" HeaderText="rforo" SortExpression="rforo" Visible="false" />
                    <asp:BoundField DataField="dalle" HeaderText="dalle" SortExpression="dalle" Visible="false" />
                    <asp:BoundField DataField="alle" HeaderText="alle" SortExpression="alle" visible="false"/>
                    <asp:BoundField DataField="idstato" HeaderText="idstato" SortExpression="idstato" visible="false"/>
                    <asp:TemplateField HeaderText="">
                        <ItemTemplate>
    <div class="clearing"></div>

<div class="tooltip">
    <i id="collapse3" runat="server" class="fa fa-caret-square-o-left fa-lg" aria-hidden="true"></i>
    <span class="tooltiptext" id="litGestioneGiorn" runat="server"></span>
    </div>
                        </ItemTemplate>

                    </asp:TemplateField>

                </Columns>

            </asp:GridView>
                </div>

            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:dbVulcanoConnectionString %>" SelectCommand="select utenti.nome as tecnico, Richieste.IDRic as idchia, richieste.descr as rdescr, ISNULL(richieste.assistremota,0) as assremota, Clienti.RagSociale as ragsoc, richieste.descr as descr, richieste.priorita as prior, richieste.tipo as tipo, richieste.rforologio as rforo, ISNULL(statoric.appuntamento,0) as app, ISNULL(statoric.oradalle,0) as dalle, ISNULL(statoric.oraalle,0) as alle, statoric.ID as idstato from clienti inner join richieste on clienti.idcliente = richieste.rfcliente inner join statoric on statoric.rfric = richieste.idric inner join stati on stati.idstato = statoric.rfstato inner join utenti on utenti.idutente=statoric.rftecnico where statoric.attuale = 1 and statoric.rfstato &lt; 14 and statoric.dataass = @data and (@tecnico = -1 or statoric.rftecnico = @tecnico) order by app desc, oraalle asc, prior desc">
                <SelectParameters>
                    <asp:ControlParameter ControlID="txtData" DefaultValue="17/01/2017" Name="data" PropertyName="Text" Type="DateTime" />
                    <asp:ControlParameter ControlID="ddlUtenti" DefaultValue="0" Name="tecnico" PropertyName="SelectedValue" Type="Int32"  />
                </SelectParameters>
            </asp:SqlDataSource>
            <p>
                &nbsp;
            </p>
            <table border="0" cellspacing="0" cellpadding="0" style="width: 100%">
    <tr>
        <td></td>
        <td align="right">
            <input runat="server" name="Stampa" type="button" class="gbutton" id="btnStampa" value="Stampa" onclick="printdiv('divChiamateGiorno');"  />
        </td>
    </tr>
</table>
        </div>
    </div>
</div>

Answer 1

回发可能没有触发，因为控件不知道内容已更改，而更改事件将导致控件执行回发。

我还没有完全检查插件，但在 jQuery ui 日期选择器中，我使用 onslect 命令执行回调并手动触发更改事件：

  $('.calendarTxt').datepick({
    onSelect: function (dateText) {
      $(this).trigger('change');
    }
  });

示例

$(document).ready(function () { $('#txtData').datepick({ 
  dateFormat: 'dd/mm/yyyy',
  onSelect: function (dateText) {
    $(this).trigger('change');
  }
});

最后，如果您使用 css class 而不是 ID，您可以从主脚本页面触发此代码。这意味着您不需要将代码放在每个日期输入控件上，只需添加 class.

vb.net jquery 日期选择器回发

vb.net jquery datepicker postback

vb.net

jquery

autopostback

jquery-ui-datepicker