Question

我有一个实现ValidationProperty属性的ASP.NET用户控件。这个属性成功地使我可以使用RequiredFieldValidator作为我的自定义控件，但是在验证时它会导致完整的回发，而不是使用基于客户端javascript的验证。

有没有办法阻止这种情况并在不使用自定义验证器的情况下启用客户端验证？

这就是我的UserControl的样子。

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ucBooleanRadio.ascx.cs" Inherits="MyCompany.Web.UserControls.ucBooleanRadio" %>

<div class="BooleanRadio">
    <input runat="server" id="radTrue" type="radio" name="BooleanRadio" value="True" /> Yes
    <input runat="server" id="radFalse" type="radio" name="BooleanRadio" value="False" /> No
</div>

[ValidationProperty("Checked")]
public partial class ucBooleanRadio : System.Web.UI.UserControl
{
    public Nullable<bool> Checked
    {
        get
        {
            if (radTrue.Checked || radFalse.Checked)
                return radTrue.Checked;
            else
                return null;
        }
        set
        {
            radTrue.Checked = value != null ? value.Value : false;
            radFalse.Checked = value != null ? !value.Value : false;                    
        }
    }
}

这就是它的使用方式

<uc1:ucBooleanRadio ID="ucAgree" runat="server" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server" CssClass="Validator" Display="Dynamic" ControlToValidate="ucAgree" InitialValue="" ErrorMessage="You must agree to continue."></asp:RequiredFieldValidator>

Page.Validate();
if (Page.IsValid)
{
    //Do stuff
}

Answer 1

对于简单的客户端验证，应该有一个具有相应名称的输入元素，该值将被验证。在您的案例中如何完成的示例：

<div class="BooleanRadio">
    <% radTrue.Attributes["onclick"] = "document.getElementsByName('" + UniqueID + "')[0].value='+'"; %>
    <input runat="server" id="radTrue" type="radio" name="BooleanRadio" value="True" /> Yes
    <% radFalse.Attributes["onclick"] = "document.getElementsByName('" + UniqueID + "')[0].value='-'"; %>
    <input runat="server" id="radFalse" type="radio" name="BooleanRadio" value="False" /> No
    <input name="<%= UniqueID %>" type="hidden" value="<%= radTrue.Checked? "+" : radFalse.Checked? "-" : "" %>" />
</div>

Answer 2

好的，所以经过对ASP.NET字段验证器的体系结构的重大挖掘以及上面海报的一些指导后，我终于找到了解决方案。

基本上上面的答案是正确的，除非有一些变化。

首先，为隐藏文字设置的ID不应位于Name字段中，而应位于ID字段中。此外，隐藏字段中填充的ID不应该是Page.UniqueID，而应该是相关UserControl的Page.ClientID。

这样做的原因是，当加载包含验证器的页面时，ASP.NET框架将调用以下函数。

function ValidatorHookupControlID(controlID, val) {
    if (typeof (controlID) != "string") {
        return;
    }
    var ctrl = document.getElementById(controlID); //NOTE THIS LINE
    if ((typeof (ctrl) != "undefined") && (ctrl != null)) {
        ValidatorHookupControl(ctrl, val);
    }
    else {
        val.isvalid = true;
        val.enabled = false;
    }
}

框架尝试执行的操作是检索与ID属性具有相同ControlToValidate的控件，该属性在必需的字段验证程序（实际为Page.ClientID）中设置。然后它在其验证函数中使用此控件（无论它们是RequiredField，Compare，Regex等）。如果找到这样的控件，它将启用验证器并对其值执行验证，如果不是，则只是将验证器设置为禁用。

最后，我的代码看起来像这样。

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ucBooleanRadio.ascx.cs" Inherits="MyCompany.Web.UserControls.ucBooleanRadio" %>

<input id="<% =this.ClientID %>" type="hidden" value="" />
<asp:RadioButton runat="server" ID="radTrue" Text="Yes" GroupName="radio" />
<asp:RadioButton runat="server" ID="radFalse" Text="No" GroupName="radio" />    

<script language="javascript" type="text/javascript">
    $(function (e) {
        $("#<% =radTrue.ClientID %>").click(function (e) {
            $("#<% =this.ClientID %>").val("true");
        });
        $("#<% =radFalse.ClientID %>").click(function (e) {
            $("#<% =this.ClientID %>").val("false");
        });
    });
</script>

后面的代码保持不变。希望这能解释一些人遇到同样问题时遇到的一些谜团。

Answer 3

事实证明，ASP.NET不关心元素标记事件我刚查看了验证码，发现了这个

function ValidatorGetValue(id) {
    var control;
    control = document.getElementById(id);
    if (typeof(control.value) == "string") {
        return control.value;
    }
    return ValidatorGetValueRecursive(control);
}

所以

<div class="BooleanRadio" id="<%= ClientID %>" value="<%= radTrue.Checked? "true" : radFalse.Checked? "false" : "" %>">
    <% radTrue.Attributes["onclick"] = "document.getElementById('" + ClientID + "').value='true'"; %>
    <% radFalse.Attributes["onclick"] = "document.getElementById('" + ClientID + "').value='false'"; %>
    <input runat="server" id="radTrue" type="radio" name="BooleanRadio" value="True" /> Yes
    <input runat="server" id="radFalse" type="radio" name="BooleanRadio" value="False" /> No
</div>

实际上有效:\，

也是如此

<div class="BooleanRadio" id="<%= ClientID %>">
    <input runat="server" id="radTrue" type="radio" name="BooleanRadio" value="True" /> Yes
    <input runat="server" id="radFalse" type="radio" name="BooleanRadio" value="False" /> No
</div>

还有事件自动加密 - 已验证的元素（一个带有ClientID）并且其子项被连线以自动导致验证（查看ValidatorHookupControl）。
这可能导致：
1.用户做某事
2.验证执行 3.更新验证值（验证后！）
第一个带div值的例子就是这样的。

Answer 4

Maxim，我刚刚开始研究类似的问题。

我发现你不需要JavaScript，Validators会自动遍历控件，寻找设置的“值”。

您必须使用服务器端RadioButtons而不是HTML

如果您正在使用CompositeControls，那么它将自动运行

如果您正在使用Web用户控件（ascx文件），则它不会使用ID包装控件，因此您需要将以下代码添加到控件中。

<div id='<%=ClientID %>'>

   Your radio button controls here...

</div>

编辑：我刚刚上传了一些快速示例代码。希望这可以帮助！ Sample Code

使用Validation Property属性阻止用户控制的完全回发

4 个答案: