Howto: Pass own argument as a custom attribute to a specified control from code behind

I learn something new today that I want to share with you.  How can you pass your own argument to any JavaScript Element object from code behind that you can access it like property of that object from JavaScript?

For example,

Let’s say you are using custom validator and you want to highlight the control with red border if control’s input value is not valid.  In this scenario, the JavaScript function that’s attached to custom validator, you may need to access control(let’s ASP.NET panel) that’s around the control you are validating to set red border color in case of validation fails.  Custom validator client side function has two argument sender and args.  “sender” is the custom validator and “args” holds the value of the control that you are validating.  There is a way you can register a name/value pair to “sender” as a custom attribute from code behind.  Here is the syntax.

Page.ClientScript.RegisterExpandoAttribute(cvDelimiter.ClientID, “Container”, pnl.ClientID, false);

cvDelimiter is the custom validator
“Container” is attribute name that will be assigned to cvDelimiter object.
pnl.ClientID will be the value of “Container” attribute that we registered.

Here is the syntax how you can access that attribute from JavaScript.

document.getElementById(sender.Container).style.border = “1px #FF0000 solid”;

The value of sender.Container will be the client id of panel.

Here is the complete code to give you context.

<form id="form1" runat="server">

<script type="text/javascript">

        function ValidateDelimiterField(sender, args) {
            var chkTitle = document.getElementById("<%=chkLockDelimiter.ClientID%>");

            if (chkTitle.checked == true) {
                var value = args.Value;
                if (value == "") {
                    document.getElementById(sender.Container).style.border = "1px #FF0000 solid";
                    args.IsValid = false;
                } else {
                    args.IsValid = true;
                }
                return;
            }
            args.IsValid = true;
            return;
        }

</script>

Other contact info:&nbsp;<asp:CheckBox runat="server" ID="chkLockDelimiter" /><br />

<asp:Panel runat="server" ID="pnl">

    Contact Details:&nbsp;<asp:TextBox runat="server" ID="txtDelimiterText"></asp:TextBox>

    <asp:CustomValidator runat="server" ID="cvDelimiter"
        ControlToValidate="txtDelimiterText"
        ErrorMessage="required"
        ClientValidationFunction="ValidateDelimiterField"
        ValidateEmptyText="true"
        Display="Dynamic"
        ValidationGroup="First"
        ForeColor="red" >
    </asp:CustomValidator>

</asp:Panel>

<br />
<asp:Button runat="server" ValidationGroup="First" ID="btn" Text="Save" />

</form>

Note: If you want to access source control that attached to custom validator control, there is an attribute “controltovalidate” of sender that will give you an object.  For example, sender.attributes[“controltovalidate”].value will give you the exact output that args.Value gives.  “controltovalidate” must be in all lowercase and I am not sure whether it works in all browser or not.

In case if you want to see in live action, here is the demo page link.
Posted in Microsoft Technology Tagged with: ,
0 comments on “Howto: Pass own argument as a custom attribute to a specified control from code behind
1 Pings/Trackbacks for "Howto: Pass own argument as a custom attribute to a specified control from code behind"
  1. Howto: Pass own argument as a custom attribute to a specified ……

    […]In this scenario, the JavaScript function that’s attached to custom validator, you may need to access control(let’s ASP.NET panel) that’s around the control you are validating to set red border color in case of validation fails. … “sender ” i…

Ads