Basi c рабочий процесс страницы
У меня есть страница оплаты с текстовым полем имени (txtName ), текстовое поле PIN (txtPin) и два текстовых поля (txtPaymentDate и txtPaymentTime), содержащие дату и время платежа соответственно. На странице также есть кнопка оплаты (btnPay). txtName имеет RequiredFieldValidator, который проверяет, является ли поле пустым. txtPin имеет CustomValidator, который проверяет, имеет ли поле значение six-di git numeri c. Третий CustomValidator следит за тем, чтобы оба параметра txtPaymentDate и txtPaymentTime были очищены, или оба они были выбраны одновременно. Невозможно выбрать только один из них. Все эти проверки должны выполняться на стороне клиента.
При нажатии на btnPay он проверяет на стороне клиента, выбраны ли вместе txtPaymentDate и txtPaymentTime. Если да, то значение txtPaymentDate должно быть между 01.01.1753 12:00:00 и 31.12.9999 23:59:59. Если значение не соответствует указанным датам, отобразится предупреждающее сообщение и событие щелчка будет отменено.
Если все вышеперечисленные проверки пройдут успешно, произойдет обратная передача btnPay и будет запущено событие на стороне сервера btnPay.
Это то, чего я хочу достичь в точном порядке при нажатии на btnPay:
- Все проверки элементов управления валидатора на стороне клиента будут иметь место. Если проверка какого-либо элемента управления валидатором на стороне клиента не удалась, событие щелчка btnPay остановится. Не требуется go и для шага 2.
- После успешной проверки всех вышеперечисленных элементов управления валидатором проверка на стороне клиента проверит, выбраны ли оба параметра txtPaymentDate и txtPaymentTime и находится ли значение txtPaymentDate в пределах указанного ассортимент. Если эта проверка завершится неудачно, событие click btnPay также будет остановлено.
- Только в случае успешного выполнения двух вышеуказанных шагов произойдет обратная передача btnPay и будет запущено событие btnPay на стороне сервера.
Что на самом деле происходит при нажатии на btnPay:
- Ни одна из "клиентских" проверок элементов управления валидатора не выполняется вообще. Вместо этого происходит "серверная" проверка соответствующих элементов управления валидатором .
- После успешной проверки шага 1 проверка на стороне клиента для проверки того, находится ли значение txtPaymentDate в пределах указанного диапазона, проходит успешно. Он также блокирует событие щелчка btnPay, если эта проверка не соответствует действительности, что соответствует требованиям.
- Если две вышеупомянутые проверки успешны, выполняется обратная передача btnPay, успешно запускающая событие на стороне сервера btnPay, что тоже OK согласно требованиям.
Шаг 1, выделенный курсивом выше, является моей проблемой. Когда я нажимаю btnPay, вместо выполнения функций валидаторов «СТОРОНА КЛИЕНТА», выполняются соответствующие функции валидаторов «СТОРОНА СЕРВЕРА». Я хочу, чтобы они выполнялись на стороне клиента. Однако, что удивительно, если я удалю OnClientClick="return Client_ValidatePage()" из btnPay, все клиентские функции элементов управления валидатора будут работать нормально. Похоже, что клиентские функции элементов управления валидатора конфликтуют с OnClientClick="return Client_ValidatePage()" btnPay. Как мне от этого избавиться?
aspx page:
<%@ 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">
// 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);
}
// Test if both txtPaymentDate and txtPaymentTime are selected or none of them at all.
function Client_ValidatePaymentDateTime(source, arguments) {
var paymentDate = document.getElementById("<%=txtPaymentDate.ClientID%>").value;
var paymentTime = document.getElementById("<%=txtPaymentTime.ClientID%>").value;
arguments.IsValid = (paymentDate.length == 0 && paymentTime.length == 0) || (paymentDate.length > 0 && paymentTime.length > 0);
}
function Client_ValidatePage() {
// Test if payment date is less than 01/01/1753 12:00:00 AM or greater than 12/31/9999 11:59:59 PM.
var paymentDate = document.getElementById("<%=txtPaymentDate.ClientID%>").value;
var paymentTime = document.getElementById("<%=txtPaymentTime.ClientID%>").value;
if (paymentDate.length > 0 && paymentTime.length > 0) {
if (paymentDate < "1753-01-01" || paymentDate > "9999-12-31") {
alert('All dates should be between 01/01/1753 12:00:00 AM and 12/31/9999 11:59:59 PM');
return false;
}
}
return true;
}
</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="form-inline">
<asp:TextBox ID="txtPaymentDate" class="form-control" runat="server" TextMode="Date"></asp:TextBox>
<asp:TextBox ID="txtPaymentTime" class="form-control" runat="server" TextMode="Time"></asp:TextBox>
</div>
<asp:CustomValidator ID="PaymentDateTimeValidator" runat="server" ClientValidationFunction="Client_ValidatePaymentDateTime" OnServerValidate="PaymentDateTimeValidator_ServerValidate" class="text-danger" Display="Static" ErrorMessage="Both dates or none of them are required!"></asp:CustomValidator>
</div>
</div>
<asp:Button ID="btnPay" runat="server" Text="Make Payment" OnClientClick="return Client_ValidatePage()" OnClick="btnPay_Click" />
</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
{
private bool Server_ValidatePage()
{
// If both payment date and payment time are selected, then check if payment date is not a valid date.
if (!String.IsNullOrEmpty(txtPaymentDate.Text) && !String.IsNullOrEmpty(txtPaymentTime.Text))
{
if (!Utilities.IsValidDateTime(txtPaymentDate.Text))
{
divAlert.Attributes["class"] = "alert alert-danger";
divAlert.InnerText = "All dates should be between 01/01/1753 12:00:00 AM and 12/31/9999 11:59:59 PM.";
return false;
}
}
return true;
}
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 PaymentDateTimeValidator_ServerValidate(object source, ServerValidateEventArgs args)
{
try
{
// Test if both txtPaymentDate and txtPaymentTime are selected or none of them at all.
args.IsValid = (txtPaymentDate.Text.Length == 0 && txtPaymentTime.Text.Length == 0) || (txtPaymentDate.Text.Length > 0 && txtPaymentTime.Text.Length > 0);
}
catch (Exception ex)
{
args.IsValid = false;
}
}
protected void btnPay_Click(object sender, EventArgs e)
{
if (Page.IsValid && Server_ValidatePage())
{
// Write code for payment.
// If payment is successful...
divAlert.Attributes["class"] = "alert alert-success";
divAlert.InnerText = "Payment completed successfully.";
}
}
}
Любая помощь по этому вопросу приветствуется.
Используемая технология: Visual Studio 2017, Bootstrap 4.5.0 на Windows 7.
Не стесняйтесь спрашивать, если мой пост вам непонятен.
С уважением