Как добавить bootstrap datetimepicker в ASP.NET заявление?
Я работаю с Visual Studio 2017 и загрузочный 4.5.0. Под главную страницу, Я страницу оплаты, которая содержит текстовое поле txtName, кнопка txtPin TextBox и btnPay. К этому я хочу добавить DateTimePicker. При нажатии кнопки btnPay значения txtName, txtPin и DateTimePicker должны быть сохранены в базе данных.
Чтобы реализовать эту идею, я установил Начальной загрузки.В3.Элемента управления datetimepicker.УСБ 4.17.45 по eonasdan через менеджер пакетов NuGet Visual Studio. После успешной установки я добавил соответствующие ссылки на js и css (как определено здесь) на главную страницу и добавил код на платежную страницу (как определено здесь) чтобы включить DateTimePicker. Однако появляется только текстовое поле DateTimePicker; больше ничего не происходит.
Изображение моей платежной страницы
Я делаю что-нибудь не так? Или это потому, что эта версия DateTimePicker не работает с моей версией Bootstrap? Пожалуйста, помогите мне в решении этого вопроса.
С уважением
Что я уже пробовал:
Главная страница aspx:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="User.master.cs" Inherits="User" %>
<!DOCTYPE html>
<html>
<head runat="server">
<!-- Required meta tags -->
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<!-- JQuery references -->
<script src="http://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!-- Bootstrap CSS references -->
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/bootstrap-datetimepicker.css" rel="stylesheet" />
<link href="Content/CustomStyleSheet.css" rel="stylesheet" />
<!--***** JQuery code *****-->
<!-- After the DOM is ready to execute Javascript, add a click event to the Cart button. When the button is clicked, the user will be taken to the Cart.aspx page. -->
<script>
$(document).ready(function DocumentReady() {
$("#btnCart").click(function btnCart_Click() {
window.location.href = "/Cart.aspx";
});
});
</script>
<!--***** End *****-->
<title>Responsive Website</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<!--***** Navigation Bar, Logo, Dropdown Menu *****-->
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="Default.aspx">
<img src="Images/web.png" width="30" height="30" class="d-inline-block align-top" alt="Logo" />
Repsonsive Website
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav float-right">
<li class="nav-item active">
<a class="nav-link" href="Default.aspx">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Products
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="Products.aspx">All Products</a>
<div class="dropdown-divider" role="separator"></div>
<label class="dropdown-header">Men's</label>
<a class="dropdown-item" href="#">Shirts</a>
<a class="dropdown-item" href="#">Pants</a>
<a class="dropdown-item" href="#">Denims</a>
<div class="dropdown-divider" role="separator"></div>
<label class="dropdown-header">Women's</label>
<a class="dropdown-item" href="#">Tops</a>
<a class="dropdown-item" href="#">Leggings</a>
<a class="dropdown-item" href="#">Denims</a>
</div>
</li>
<li class="nav-item">
<button id="btnCart" type="button" class="btn btn-primary navbar-btn">
Cart <span id="CartBadge" class="badge badge-light" runat="server"></span>
</button>
</li>
<li class="nav-item">
<asp:Button ID="btnSignIn" runat="server" class="btn btn-light navbar-btn" Text="Sign In" OnClick="btnSignIn_Click" CausesValidation="False" />
<asp:Button ID="btnSignOut" runat="server" class="btn btn-light navbar-btn" Text="Sign Out" Visible="false" OnClick="btnSignOut_Click" CausesValidation="False" />
</li>
<li class="nav-item">
<asp:Button ID="btnSignUp" runat="server" class="btn btn-light navbar-btn" Text="Sign Up" OnClick="btnSignUp_Click" CausesValidation="False" />
</li>
</ul>
</div>
</nav>
<!--***** End *****-->
<div class="container midcontent">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<!--***** Footer *****-->
<hr /> <!-- Used to provide a separator between middle contents and footer. -->
<footer>
<div class="container">
<div id="BackToTop" runat="server" class="float-right" visible="false"><a href="#">Back to top</a></div>
<p>© 2020 domainname.com · <a href="Default.aspx">Home</a> · <a href="#">About</a> · <a href="#">Contact</a> · <a href="#">Products</a></p>
</div>
</footer>
<!--***** End *****-->
</form>
<!-- Optional JavaScript -->
<!-- References: jQuery first, then Popper.js, then Bootstrap JS -->
<script src="Scripts/jquery-3.0.0.min.js"></script>
<script src="Scripts/umd/popper.min.js"></script>
<script src="Scripts/moment.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/bootstrap-datetimepicker.js"></script>
</body>
</html>
Платежная страница 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.";
}
}
}
F-ES Sitecore
Начиная с основ, все ли ваши скрипты загружаются нормально? Проверьте вкладку Сеть инструментов разработки, чтобы убедиться, что ваши js - файлы находятся и загружаются нормально, а не 404ing.
edit: вы загружаете две версии jQuery, это не сработает, вам нужна одна версия, которая поддерживает все, что вы хотите сделать.
priyamtheone
Я проверил сценарии. Все загружаются правильно. Что касается двух версий jQuery, то это опечатка. Проверил обе версии jQuery, применив их отдельно. Но все равно ничего хорошего.
priyamtheone
*** Обновление ***
Я узнал, что eonasdan DateTimePicker предназначен для Bootstrap версии 3. Он не работает с более поздними версиями Bootstrap. Поэтому я перешел на Темпус Доминус Datetimepicker Для, который является обновленным преемником eonasdan DateTimePicker, который работает с Bootstrap 4 или более поздней версией.
Тем не менее, при использовании Tempus Dominus, хотя DateTimePicker появляется сейчас и его функции работают должным образом на странице, никаких значков DateTimePicker или элемента управления календарем не появляется. Смотрите изображения панель даты и временная панель Точки, обведенные красным кружком, находятся там, где должны быть значки.
Поскольку я не смог найти ни одного установочного пакета NuGet для Tempus Dominus, я скачал его moment.min.js, tempusdominus-bootstrap-4.min.js и tempusdominus-ушко-4.мин.в CSS отдельно от URL-адресов, упомянутых в разделе CDNJS эта страница Я добавил их в папки скриптов и контента моего проекта, добавил ссылки на них. moment.min.js, tempusdominus-bootstrap-4.min.js и tempusdominus-ушко-4.мин.в CSS к главному файлу. Затем на странице оплаты я добавил функцию javascript для инициализации DateTimePicker. Тем не менее, значок элемента управления DateTimePicker не виден.
Проблема все еще сохраняется, даже если я использую полные версии moment.js, tempusdominus-bootstrap-4.js и tempusdominus-ушко-4.в CSS.
Что я делаю не так на этот раз?