используйте jquery средство выбора даты и времени на странице содержания asp. net и управление повторителем - PullRequest
2 голосов
/ 19 февраля 2020

Мне нужно добавить тег java script на странице содержимого приложения asp. net. Скрипт отлично работает с тегами html, но по содержанию он не работает, вот код. Это мой код для отображения выбора даты и времени:

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link  rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery.ui.min.js"></script>
    <script type="text/javascript" >
        $(function dtTimePicker()
        {
            $("txtDate").datepicker({
                dateFormat: 'dd-MM-yyyy',
                changeMonth: true,
                changeYear:true

            });
        });
    </script>
    <hr />
    <asp:TextBox runat="server" ID="txtDate"></asp:TextBox>
    <asp:Button runat="server" ID="btnDate" Text="Search" OnClick="btnDate_Click"></asp:Button>
    <hr />
    <div class="container">
        <div class="form-horizontal">
            <div class="form-group">
                <div class="col-md-2"></div>
            </div>
        </div>
        <h1>MANHOUR</h1>
        <hr />
        <div class="panel panel-default">
            <!-- Default panel contents -->
            <div class="panel-heading">DAILYDATAWH</div>
            <asp:Repeater ID="rptrDAILYDATAWH" runat="server">
                <HeaderTemplate>

                    <table class="table">
                        <thead>
                            <tr>
                                <th>STATUSIN</th>
                                <th>NIP</th>
                            </tr>
                        </thead>
                        <tbody>
                </HeaderTemplate>
                <ItemTemplate>
                    <tr>
                        <th><%# Eval("STATUSIN") %></th>
                        <th><%# Eval("NIP") %></th>
                    </tr>
                </ItemTemplate>
                <FooterTemplate>
                    <asp:Label ID="defaultItem" runat="server" 
                        Visible='<%# rptrDAILYDATAWH.Items.Count == 0 %>' Text="No items found" />
                        </tbody>
                    </table>
                </FooterTemplate>
            </asp:Repeater>    
        </div>
    </div>
</asp:Content>

, и это мой код на сервере:

 protected void btnDate_Click(object sender, EventArgs e)
        {
            HtmlGenericControl body = (HtmlGenericControl)Page.Master.FindControl("pagebody");
            body.Attributes.Add("onload", "dtTimePicker();");
            String CS = ConfigurationManager.ConnectionStrings["MANHOURConnectionString"].ConnectionString;
            SqlConnection con = new SqlConnection(CS);
            con.Open();
            SqlCommand cmd = new SqlCommand("SELECT * FROM [dbo].[DAILYDATAWH] WHERE STATUSIN=@STATUSIN", con);
            cmd.Parameters.AddWithValue("@STATUSIN", txtDate.Text);
            DataTable dtDaily = new DataTable();
            SqlDataAdapter sda = new SqlDataAdapter(cmd);
            sda.Fill(dtDaily);

            rptrDAILYDATAWH.DataSource = dtDaily;
            rptrDAILYDATAWH.DataBind();
        }

Я хочу отфильтровать дату и время в STATUSIN и получить записи из базы данных с выбранной датой. Как разместить jquery указатель даты и времени на странице контента с управлением повторителем?

Ответы [ 3 ]

0 голосов
/ 22 февраля 2020

В вашем коде есть несколько проблем, например, вы вызываете dtTimePicker в onload или вы ошиблись селектором txtDate для выбора входа. Кроме того, формат года неверен, но не очень важен.

Независимо от того, хотите ли вы отображать средство выбора даты внутри повторителя или вне повторителя, присвойте классу, как datepicker, атрибут CssClass контроля. Затем в готовом документе вызовите select .datepicker с помощью селектора классов и примените к нему средство выбора даты.

Пример

Я предполагаю, что вы ищете минимальный рабочий пример, поэтому я поделюсь минимальным рабочим примером в качестве начальной точки. Вот очень минимальный пример, который вы можете протестировать без какого-либо кода. Просто скопируйте следующий код и вставьте в файл Form1.aspx и просмотрите Form1.aspx, чтобы увидеть следующий вывод:

DatePicker

<%@ Page Language="C#" AutoEventWireup="true" Inherits="System.Web.UI.Page" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Form1</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script>
        $(function () {
            $(".datepicker").datepicker({
                dateFormat: 'dd-MM-yy',
                changeMonth: true,
                changeYear: true
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Label ID="Label1" runat="server" Text="Date:" Font-Bold="true" />
            <asp:TextBox ID="TextBox1" runat="server" CssClass="datepicker" />
            <asp:Repeater ID="Repeater1" runat="server">
                <HeaderTemplate>
                    <table>
                        <tr>
                            <th>Name</th>
                            <th>Birth date</th>
                        </tr>
                </HeaderTemplate>
                <ItemTemplate>
                    <tr>
                        <td>
                            <asp:TextBox ID="NameTextBox" runat="server" Text='<%# Eval("Name") %>' />
                        </td>
                        <td>
                            <asp:TextBox ID="BirthDateTextBox" runat="server" CssClass="datepicker"
                                Text='<%# Eval("BirthDate", "{0:dd-MMMM-yyyy}") %>' />
                        </td>
                    </tr>
                </ItemTemplate>
                <FooterTemplate>
                    </table>
                </FooterTemplate>
            </asp:Repeater>
        </div>
    </form>
</body>
</html>
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        TextBox1.Text = DateTime.Now.ToString("dd-MMMM-yyyy");
        var dt = new System.Data.DataTable();
        dt.Columns.Add("Name", typeof(string));
        dt.Columns.Add("BirthDate", typeof(DateTime));
        dt.Rows.Add("Mario Speedwagon", new DateTime(1980, 11, 5));
        dt.Rows.Add("Petey Cruiser", new DateTime(1975, 7, 9));
        Repeater1.DataSource = dt;
        Repeater1.DataBind();
    }
</script>
0 голосов
/ 26 февраля 2020
 $(function dtTimePicker()
        {
            $("#<%=txtDate.ClientID%>").datepicker({
                dateFormat: 'dd-MM-yyyy',
                changeMonth: true,
                changeYear:true

            });
        });

Это неверный $ ("txtDate"), так как нет тега html, такого как txtDate.

Использование

 $("#txtDate") 

или

$(".txtDate") 

или

$("#<%=txtDate.ClientID%>")

попробуйте

<asp:TextBox runat="server" ID="txtDate" ClientIDMode="Static"/> 

, чтобы txtDate также имел статус c id в html.

$('#<%=txtDate.ClientID%>') 

найдет элемент с атрибутом id, предоставленным свойством ClientID в ASP. Net.

$("[id$=lblName]")

, будет найден элемент с атрибутом id, оканчивающийся на lblName, например, foo-lblName.

0 голосов
/ 19 февраля 2020

Под "не работает", я полагаю, вы имеете в виду, что средство выбора даты не отображается правильно?

Во-первых, $("txtDate").datepicker({ - вы не включили селектор идентификатора, поэтому это будет $("#txtDate").datepicker({

Однако внутри ретранслятора $("txtDate").datepicker({ не будет работать для вашего <asp:TextBox runat="server" ID="txtDate">, поскольку каждый экземпляр текстового поля внутри вашего ретранслятора не будет иметь txtDate в качестве своего идентификатора; у него будет сгенерированный идентификатор, который сгенерирует контейнер имен (ретранслятор). Если вы проверяете HTML с помощью инструментов отладки браузера, вы можете подтвердить это.

Если все, что вам нужно сделать, это отобразить текстовое поле как jQuery DatePicker, используйте вместо этого селектор класса, то есть

<asp:TextBox runat="server" ID="txtDate" CssClass="datepick">

и измените jQuery на

$(".datepick").datepicker({

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...