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