Сделайте логику проверки сервера ASP.NET доступной на стороне клиента / jQuery, прикрепив специальные имена классов CSS к элементам HTML, представляющим элементы управления проверки на стороне сервера.
Имена классов CSS будут представлять группы проверки. Поэтому, например, некоторые текстовые поля будут помечены именем класса для одной группы проверки, а другие текстовые поля - для другой группы проверки.
Например, напишите и вызовите эту функцию C # в обработчике PreRender страницы или перед тем, как страница будет отображена для наполнения серверных элементов управления специальным CSS.
/// <summary>
/// Makes the server validation logic knowledge available to the client side
/// by appending css class names to validators and html elements being validated.
/// The generated css classes can be targeted by jQuery in the DOM.
/// </summary>
/// <param name="cssPrefixValidator">prefix string for validator css names</param>
/// <param name="cssPrefixTarget">prefix string for target element css names</param>
/// <remarks>
/// The css prefix arguments to this function help distinguish between what is a
/// validation control and what is an html element being targeted by said validation control.
/// </remarks>
///
void TagValidationWithCss(string cssPrefixValidator, string cssPrefixTarget) {
List<string> valClasses = new List<string>();
List<string> targetClasses = new List<string>();
// iterate over validator server controls
foreach (BaseValidator val in Page.Validators) {
// keep a unique list of generated validator css class names
string classnameVal = cssPrefixValidator + val.ValidationGroup;
if (!valClasses.Contains(classnameVal))
valClasses.Add(classnameVal);
// ..and mark the validator element with the generated css class name
val.CssClass += (string.IsNullOrEmpty(val.CssClass) ? "" : " ") + classnameVal;
// keep a unique list of generated target element css class names
string classnameTarg = cssPrefixTarget + val.ValidationGroup;
if (!targetClasses.Contains(classnameTarg))
targetClasses.Add(classnameTarg);
// ..and mark the target element with the generated css class name
Control target = FindControl(val.ControlToValidate);
if (target is HtmlControl)
((HtmlControl)target).Attributes["class"] += (string.IsNullOrEmpty(val.CssClass) ? "" : " ") + classnameTarg;
else if (target is WebControl)
((WebControl)target).CssClass += (string.IsNullOrEmpty(val.CssClass) ? "" : " ") + classnameTarg;
}
// output client script having array of validator css names representing validation groups
string jscriptVal = string.Format("<script>window['{1}'] = ['{0}'];</script>", string.Join("','", valClasses.ToArray()), cssPrefixValidator);
ClientScript.RegisterStartupScript(this.GetType(), "val", jscriptVal);
//output client script having array of html element class names representing validation groups
string jscriptTarg = string.Format("<script>window['{1}'] = ['{0}'];</script>", string.Join("','", targetClasses.ToArray()), cssPrefixTarget);
ClientScript.RegisterStartupScript(this.GetType(), "targ", jscriptTarg);
}
Функция вызывается на серверной странице:
protected override void OnPreRender(EventArgs e) {
base.OnPreRender(e);
TagValidationWithCss("validator-", "target-");
}
Декларативный синтаксис страницы ASPX может иметь два раздела:
<div>
Login Section
<asp:TextBox ValidationGroup="vg1" ID="TextBox1" runat="server"></asp:TextBox><asp:TextBox
ValidationGroup="vg1" ID="Textbox2" runat="server"></asp:TextBox><asp:Button ID="Button1"
ValidationGroup="vg1" runat="server" Text="Button" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="TextBox1"
ErrorMessage="RequiredFieldValidator" ValidationGroup="vg1"></asp:RequiredFieldValidator>
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="Textbox2"
ErrorMessage="RequiredFieldValidator" ValidationGroup="vg1"></asp:RequiredFieldValidator>
<hr />
Registration Section
<asp:TextBox ValidationGroup="vg2" ID="TextBox4" runat="server"></asp:TextBox><asp:TextBox
ValidationGroup="vg2" ID="Textbox5" runat="server"></asp:TextBox><asp:Button ID="Button3"
ValidationGroup="vg2" runat="server" Text="Button" />
</div>
Теперь перейдем к отображаемой странице, чтобы увидеть результаты .....
Источник HTML страницы содержит массивы сгенерированных имен CSS, представляющих группы валидации, один набор для валидаторов (validator-) и другой для целей валидации (target -)
<script>window['validator-'] = ['validator-vg1','validator-vg2'];</script>
<script>window['target-'] = ['target-vg1','target-vg2'];</script>
Эти имена CSS также отображаются в элементах html. Обратите внимание на CSS-классы "target-vg1" в текстовых полях, представляющие группу проверки # 1. Текстовые поля представляют экран / интерфейс входа в систему на странице (одна из двух частей пользовательского интерфейса):
<input name="TextBox1" type="text" id="TextBox1" class=" target-vg1" /><input name="Textbox2" type="text" id="Textbox2" class=" target-vg1" /><input type="submit" name="Button1" value="Button" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("Button1", "", true, "vg1", "", false, false))" id="Button1" />
Этот второй набор текстовых полей находится на той же странице ASP.NET (в той же форме ASP.NET) и представляет экран / интерфейс регистрации пользователя (вторая часть пользовательского интерфейса). Обратите внимание, что эти текстовые поля помечены другой группой проверки с именем "target-vg2" в классе css.
<input name="TextBox4" type="text" id="TextBox4" class=" target-vg2" /><input name="Textbox5" type="text" id="Textbox5" class=" target-vg2" /><input type="submit" name="Button3" value="Button" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("Button3", "", true, "vg2", "", false, false))" id="Button3" />
Таким образом, мы внедрили специальные имена Css в поток ASP.NET, не прерывая и не прерывая его.
В конечном итоге этот специализированный вывод позволяет вам писать собственные сценарии для него (т. Е. Используя jQuery), чтобы использовать эти специальные имена классов CSS и различать группы проверки на стороне клиента.
Этот простой пример предупреждает имена групп проверки на стороне клиента, чтобы доказать, что они видны и известны. Уф!
<script>
// Tell the CSS names of the available validation groups assigned to target elements.
var strGroups = 'css validation groups are: ' + window['target-'].join(', ');
alert(strGroups);
</script>
jQuery можно использовать и для специальных классов CSS.
Это не охватывает все случаи. Это может быть действительно на обед, но было интересно сделать. Код на стороне сервера и клиента должен быть настроен под личный или проектный вкус.
(Вы также хотите полагаться на тот факт, что более новые браузеры могут применять несколько классов CSS к одному элементу, используя атрибут 'class', разделяя имена классов пробелами, например - class = "vg1 animated bright myclass your class". сгенерированные имена классов CSS, которые будут добавлены после существующих имен классов без их перезаписи.)