Как и в обычных формах, в приложениях WebForms проверку можно и нужно делать на стороне не только сервера, но и клиента. Для добавления проверки на ASP странице используется элемент управления (контрол) <asp:CustomValidator></asp:CustomValidator>, а для указания функции проверки на стороне клиента (проверка с помощью Javascript) нужно указать значение параметра контрола ClientValidationFunction.

Пример синтаксиса контрола для проверки:

<asp:CustomValidator id="cuv1" runat="server" 
ControlToValidate="toMonthCtrl" OnServerValidate="cuv1_ServerValidate"
ClientValidationFunction="TextBoxDAddress1Client"
ErrorMessage="Конец периода должен быть больше начала"></asp:CustomValidator>

 

Параметры контрола:

•  ControlToValidate – идентификатор контрола, который подлежит проверке;
• OnServerValidate – метод, в котором реализована проверка;
• ClientValidationFunction – название Javascript функции, в которой реализована проверка;
• ErrorMessage – текст сообщения об ошибке.

 

В рассматриваемом примере ниже на странице размещены 4 выпадающих списка для выбора периода – месяц год начала и месяц год завершения. Значения списков заполняются в codebehind. Требуется реализовать функцию, которая будет проверять, что дата начала запроса меньше даты завершения.

   <asp:DropDownList ID="sinceMonthCtrl" runat="server"></asp:DropDownList>
   <asp:DropDownList ID="sinceYearCtrl" runat="server"></asp:DropDownList>
   <br />
   <asp:DropDownList ID="toMonthCtrl" runat="server"></asp:DropDownList>
   <asp:DropDownList ID="toYearCtrl" runat="server"></asp:DropDownList>

В целом, функция проверки – обычная функция Javascript, получающая на вход параметры sender и args. Если функция в результате функции args.IsValid равен true, то все ок, если false, то ошибка.

В приложениях WebForms у контролов идентификаторы имеют уникальные GUID'ы, благодаря чему в Javascript ими не просто управлять. Но с помощью синтаксиса ASP это можно сделать. Минус такого решения – проверку нельзя вынести в отдельный JS файл.

        function TextBoxDAddress1Client(sender, args) {
            var sinceMonth = document.getElementById('<%=sinceMonthCtrl.ClientID%>').selectedIndex;
            var toMonth = document.getElementById('<%=toMonthCtrl.ClientID%>').selectedIndex;

            var sinceYear = document.getElementById('<%=sinceYearCtrl.ClientID%>').selectedIndex;
            var toYear = document.getElementById('<%=toYearCtrl.ClientID%>').selectedIndex;
            args.IsValid = true;

            if (sinceYear == toYear) {
                if (sinceMonth > toMonth) args.IsValid = false;
            }
        }