Custom WebControl avec des events en Javascript

Après avoir expliqué comment réaliser un contrôle custom ASP.NET dans un précédent post, nous allons expliquer comment ajouter des "events" dans nos classes. Cela nous permettra de nous abonner et de réaliser des actions en conséquence.

Pour ce faire, il faut rajouter un event dans notre code embedded JavaScript.

_onchange: function (e) {
    var value = parseFloat(e.target.value);
    var isIncorrect = false;
    if (isNaN(value) || !isFinite(value)) {
        isIncorrect = true;
    }
    isIncorrect = isIncorrect || value > 100 || value < 0;
    if (isIncorrect) {
        if (this._errorCssClass !== null && this._errorCssClass !== '') {
            this.addCssClass(this._errorCssClass);
        }
    }
    else {
        this.removeCssClass(this._errorCssClass);
    }
    this._throw_change(isIncorrect);
},
add_change: function (handler) {
    this.get_events().addHandler('change', handler);
},
remove_change: function (handler) {
    this.get_events().removeHandler('change', handler);
},

_throw_change: function (eventArgs) {
    var handler = this.get_events().getHandler('change');
    if (handler) handler(this, eventArgs);
}

Ensuite, nous allons enregistrer une action à exécuter au load. Ce code JavaScript doit se situer obligatoirement en dessous du ScriptManager.

<asp:ScriptManager ID="ScriptManager1" runat="server" />
<script type="text/javascript" language="javascript">
    Sys.Application.add_load(LoadEvents);
</script>
function LoadEvents() {
    var elt = $find("UserControlTest1_PercentageControl1");
    elt.add_change(OnChange);
}

Nous pouvons maintenant au load nous abonner à l'event et réaliser une action. Ici nous souhaitons par exemple désactiver le bouton si la valeur de la textbox est invalide. Cela évite tout click (et donc retour serveur etc) en cas d'erreur d'input.

function OnChange(source, eventArgs) {
    var elt = $get("UserControlTest1_Button1");
    elt.disabled = eventArgs === true ? true : false;
}

Nous pouvons tester et nous voyons bien notre bouton se désactiver lorsque l'on encode une lettre de l'alphabet ou un pourcentage qui n'entre pas dans le range supporté (à savoir entre 0 et 100).

Ajouter un commentaire

Le code HTML est affiché comme du texte et les adresses web sont automatiquement transformées.

Fil des commentaires de ce billet

Page top