Как добавить Bootstrap DateTimePicker в приложение ASP. Net? - PullRequest
Новая
       59

Как добавить Bootstrap DateTimePicker в приложение ASP. Net?

0 голосов
/ 21 июня 2020

Я работаю с Visual Studio 2017 и Bootstrap 4.5.0. На главной странице у меня есть страница оплаты, которая содержит текстовое поле txtName, текстовое поле txtPin и кнопку btnPay. К этому я хочу добавить DateTimePicker. При нажатии на btnPay значения txtName, txtPin и DateTimePicker должны быть сохранены в базе данных.

Для реализации этой идеи я установил Bootstrap .v3.Datetimepicker. CSS 4.17.45 by eonasdan через диспетчер пакетов NuGet Visual Studio. После успешной установки я добавил соответствующие ссылки js и css (как определено здесь ) на главную страницу и добавил код на страницу оплаты (как определено здесь ), чтобы включить DateTimePicker. Однако отображается только текстовое поле DateTimePicker; больше ничего не происходит.

Изображение моей платежной страницы.

aspx главной страницы:

image

Платежная страница aspx: 

<%@ Page Title="" Language="C#" MasterPageFile="~/User.master" AutoEventWireup="true" CodeFile="Payment.aspx.cs" Inherits="Payment" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <script type="text/javascript">
        // Initialise DateTimePicker.
        $(function () {
                $('#datetimepicker1').datetimepicker();
        });

        // Test if txtPin is not blank, doesn't contain alphanumeric value and contains exactly six digits.
        function Client_ValidatePin(source, arguments) {
            arguments.IsValid = /^[0-9]{6}$/.test(arguments.Value);
        }
    </script>
    <div id="divAlert" role="alert" runat="server">
    </div>
    <div class="row">
        <div class="col-md-9">
            <h4>Payment</h4>
            <hr />
            <div class="form-group row">
                <asp:Label ID="Label1" runat="server" class="col-md-2 col-form-label" Text="Name:"></asp:Label>
                <div class="col-md-7">
                    <asp:TextBox ID="txtName" class="form-control" runat="server" MaxLength="50"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" class="text-danger" ErrorMessage="Name is required!" ControlToValidate="txtName"></asp:RequiredFieldValidator>
                </div>
            </div>
            <div class="form-group row">
                <asp:Label ID="Label2" runat="server" class="col-md-2 col-form-label" Text="PIN:"></asp:Label>
                <div class="col-md-7">
                    <asp:TextBox ID="txtPin" class="form-control" runat="server" MaxLength="6"></asp:TextBox>
                    <asp:CustomValidator ID="PinValidator" runat="server" ControlToValidate="txtPin" ValidateEmptyText="true" ClientValidationFunction="Client_ValidatePin" OnServerValidate="PinValidator_ServerValidate" class="text-danger" Display="Static" ErrorMessage="A 6-digit number is required!"></asp:CustomValidator>
                </div>
            </div>
            <div class="form-group row">
                <asp:Label ID="Label3" runat="server" class="col-md-2 col-form-label" Text="Date/Time:"></asp:Label>
                <div class="col-md-7">
                    <div class='input-group date' id='datetimepicker1'>
                        <input type='text' class="form-control" />
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>
                </div>
            </div>
            <asp:Button ID="btnPay" runat="server" Text="Make Payment" />
        </div>
    </div>
</asp:Content>

Код выделенной страницы платежа: 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Payment : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (IsPostBack)
        {
            divAlert.InnerText = string.Empty;
            divAlert.Attributes["class"] = "d-none";
        }
    }

    protected void PinValidator_ServerValidate(object source, ServerValidateEventArgs args)
    {
        try
        {
            // Test if txtPin is not blank, doesn't contain alphanumeric value and contains exactly six digits.
            args.IsValid = System.Text.RegularExpressions.Regex.IsMatch(args.Value, "^[0-9]{6}$");
        }

        catch (Exception ex)
        { args.IsValid = false; }
    }

    protected void btnPay_Click(object sender, EventArgs e)
    {
        if (Page.IsValid)
        {
            // Write code for payment.

            // If payment is successful...
            divAlert.Attributes["class"] = "alert alert-success";
            divAlert.InnerText = "Payment completed successfully.";
        }
    }
}

Я что-то делаю не так? Или эта версия DateTimePicker не работает с моей версией Bootstrap? Пожалуйста, помогите мне решить проблему.

С уважением

...