Geek asks and answers

Prevent full postback for UserControl with ValidationProperty attribute

I have an ASP.NET user control that implements an attribute ValidationProperty. This attribute successfully allows me to use RequiredFieldValidatorfor my custom control, however when validating, it causes a full postback, not client-based JavaScript validation.

Is there a way to prevent this and enable client-side validation without using a custom validator?

This is what my UserControl looks like.

<%@ 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;                    
        }
    }
}

And here is how it is used

<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
}
+5
source share
4 answers

, ASP.NET .

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

So

<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>

autohooking - ( ClientID), , ( ValidatorHookupControl).
: 1. -
2.
3. ( !)
div .

+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>
+1

, ASP.NET .

, , .

-, , , Name, ID. , , Page.UniqueID, Page.ClientID UserControl.

, , , , 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>

. , , , .

+1

, .

I found that you do not need JavaScript. Validators will automatically go through controls that look for the "value" that is set.

You should use ServerButton RadioButtons, not HTML

If you use CompositeControls, then it will work automatically

If you use Web User Controls (ascx files), it does not transfer the control with an identifier, so you need to add the following code to your control.

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

   Your radio button controls here...

</div>

Edit: I just added some sample code. Hope this helps! Code example

0
source

More articles:


All Articles