Comment créer une boîte de dialogue de signature personnalisée dans AJAX RadEditor

Permettez à vos utilisateurs d’ajouter leur signature manuscrite dans un éditeur HTML avec Telerik UI pour ASP.NET AJAX.

Dans le monde d’aujourd’hui, où la numérisation a envahi tous les aspects de nos vies, le besoin de signatures n’a pas été éliminé. Cependant, au lieu de signer physiquement un document, nous pouvons désormais utiliser une signature électronique, qui est rapide, facile et sécurisée.
Une façon populaire de le faire est d’utiliser une signature manuscrite, qui donne au document électronique une touche personnelle.

Progrès Interface utilisateur Telerik pour ASP.NET AJAX fournit deux composants utiles, RadSignature et RadEditorqui peut être intégré pour faciliter l’inclusion de signatures manuscrites dans un éditeur HTML.

La solution

Dans cet article de blog, je vais montrer comment construire un scénario d’application de dialogue de signature personnalisé qui intègre RadSignature et RadEditor. La démo permet aux utilisateurs d’insérer une signature manuscrite dans une zone de contenu de RadEditor.

Le contrôle de l’éditeur WYSIWYG comporte un bouton personnalisé appelé « Insérer une signature manuscrite ». Lorsque vous cliquez dessus, il ouvre une boîte de dialogue qui affiche une tablette de signature. L’utilisateur peut tirer parti du pavé de signature pour dessiner sa signature. Une fois cela fait, ils peuvent cliquer sur le bouton « Stocker sur le serveur en tant que PNG et insérer » pour stocker la signature sur le serveur sous forme de fichier PNG et insérer l’image de la signature dans l’éditeur.

Examinons le code qui rend cela possible.

La page default.aspx contient le contrôle RadEditor avec le bouton personnalisé défini dans les groupes d’outils.

Extrait de code ASPX (HTML)

<telerik:RadEditor RenderMode="Lightweight" runat="server" ID="RadEditor1" Width="800px">
    <Tools>
        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="InsertSignature" Text="Insert Handwritten Signature"></telerik:EditorTool>
        </telerik:EditorToolGroup>
        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="Bold"></telerik:EditorTool>
            <telerik:EditorTool Name="Italic"></telerik:EditorTool>
            <telerik:EditorTool Name="Underline"></telerik:EditorTool>
        </telerik:EditorToolGroup>
    </Tools>
    <Content>
        To sign up, simply click on the pencil icon above and use your mouse to handwrite your signature and insert it here.
    </Content>
</telerik:RadEditor>
<script>
    
    Telerik.Web.UI.Editor.CommandList['InsertSignature'] = function (commandName, editor, args) {

        
        var myCallbackFunction = function (sender, args) {
            
            editor.pasteHtml(String.format('<img src=\'{0}\' border=\'0\' style=\'width:50%;height:50%;\'  /> ', args.src));
        };

        
        editor.showExternalDialog(
            'InsertSignature.aspx',
            null,
            540,
            450,
            myCallbackFunction,
            null,
            'Draw and Insert Signature',
            true,
            Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
            false,
            true);
    };
</script>

Le script placé sous la déclaration de l’éditeur ajoute une commande personnalisée à la liste de commandes RadEditor. Il affiche la boîte de dialogue de signature en tant que boîte de dialogue externe, la charge avec la page InsertSignature.aspx et gère l’insertion de la signature après la fermeture de la boîte de dialogue.

Pour styliser le bouton personnalisé et visualiser une icône de police dessus, ajoutez la classe CSS suivante :

Extrait CSS

.reTool.reInsertSignature.reToolIcon:before {
    content: "\e10b";
}
The InsertSignature.aspx page contains a RadSignature control that provides the signature pad functionality. The RadButton1 button stores the signature on the server as a PNG file and inserts the signature image into the editor. The RadAjaxManager1 control handles the AJAX request and updates the RadSignature1 control.
ASPX (InsertSignature.aspx)
        <telerik:RadAjaxManager EnableAJAX="true" ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
            <ClientEvents OnResponseEnd="OnResponseEnd" />
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadButton1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadSignature1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
            <ClientEvents OnResponseEnd="insertEmoticon" />
        </telerik:RadAjaxManager>
        <telerik:RadButton runat="server" ID="RadButton1" Text="Store on Server as PNG and Insert" AutoPostBack="false" OnClientClicked="sendToServer" />
        <br />
        <br />

        <telerik:RadSignature runat="server" ID="RadSignature1" Height="270" Width="400">
            <ClientEvents OnLoad="signatureLoad" />
        </telerik:RadSignature>

        <telerik:RadScriptBlock runat="server" ID="RadScriptBlock1">
            <script>
                var signature;
                var fileName = "signature.png";

                function signatureLoad(sender, args) {
                    signature = sender;
                }

                function sendToServer(sender, args) {
                    if (!signature.get_value()) return;
                    var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
                    ajaxManager.ajaxRequest(fileName + ";" + signature.get_value());
                }

                //called when the OnResponseEnd of RadAjaxManager fires
                function insertSignatureImage(sender, args) {
                    signature.set_value('');
                    var closeArgument = {};
                    //asign the imageSrc which comes from the server to the src argument
                    closeArgument.src = imageSrc;
                    //closes the dialog and submit the src to the myCallbackFunction function on the main page
                    getRadWindow().close(closeArgument);
                }
            </script>
        </telerik:RadScriptBlock>

Dans la section ci-dessous, nous continuons à discuter du code derrière la boîte de dialogue de signature, et plus précisément du code côté serveur qui gère la requête AJAX et enregistre la signature sous forme de fichier PNG sur le serveur.

C# (InsertSignature.aspx.cs)

protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
    {
        
        var args = e.Argument.Split(new[] { ';' }, 2);
        
        var fileName = args[0];
        
        var base64raw = args[1];
        var base64data = base64raw.Split(',')[1];

        
        var isSizeValid = (Encoding.UTF8.GetByteCount(base64raw) < 200000);
        var isImageString = base64raw.StartsWith("data:image/png;base64");

        
        if (isImageString && isSizeValid)
        {
            
            var fileNameGuid = Guid.NewGuid() + "_" + fileName;

            
            var path = Server.MapPath("~/Editor/Examples/SignatureDialog/Images") + "\\" + fileNameGuid;

            
            System.IO.File.WriteAllBytes(path, Convert.FromBase64String(base64data));


            
            string script = string.Format("var imageSrc="https://www.telerik.com/blogs/Images/" + fileNameGuid + "";");

            
            ScriptManager.RegisterStartupScript(Page, typeof(Page), "myscript", script, true);
        }
    }

Passons en revue le code ci-dessus.

Le RadAjaxManager1_AjaxRequest le gestionnaire d’événements est l’endroit où la magie opère. Ce gestionnaire est appelé lorsque le bouton « Stocker sur le serveur au format PNG et insérer » est cliqué. Le e.Argument Le paramètre nous indique quel est le but de la requête AJAX. Dans ce cas, la valeur sera le nom du fichier image et les données base64 provenant du dessin de signature exporté.

Nous commençons par obtenir l’image de signature du contrôle RadSignature sous forme de tableau d’octets. Nous générons ensuite un nom de fichier aléatoire avec une extension .png et enregistrons l’image de la signature sous forme de fichier PNG sur le serveur. Notez que nous enregistrons l’image dans un dossier appelé « Images » à la racine de notre application. Vous pouvez remplacer ce dossier par l’un de vos préférences.

Ensuite, nous construisons un RegisterStartupScript réponse pour renvoyer le chemin de l’image de signature enregistrée vers la page principale. Nous utilisons le ScriptManager.RegisterStartupScript méthode pour ajouter du code JavaScript à la fonction de rappel sur la page principale. Ce code appelle le insertSignatureImage fonction sur la page principale, en passant le chemin vers l’image de la signature enregistrée en tant que paramètre.

Le insertSignatureImage est également responsable de l’insertion de l’image de la signature dans la zone de contenu de RadEditor à la position du curseur.

Conclusion

Dans cet article de blog, nous avons montré comment intégrer RadSignature et RadEditor pour Interface utilisateur Telerik pour ASP.NET AJAX composants pour fournir une boîte de dialogue de bloc de signature qui permet aux utilisateurs d’insérer une signature manuscrite dans une zone de contenu de l’éditeur. Nous avons discuté du code de la page principale et de la boîte de dialogue de signature, ainsi que du code côté serveur qui gère la requête AJAX et enregistre la signature sous forme de fichier PNG sur le serveur.

J’espère que vous avez trouvé cet article de blog utile et informatif. Si vous avez des questions ou des commentaires, veuillez laisser un commentaire ci-dessous. Merci d’avoir lu et bon codage !

Essayez l’interface utilisateur Telerik pour ASP.NET AJAX RadEditor et RadSignature aujourd’hui

Vous voulez commencer à tirer parti des composants ASP.NET AJAX RadEditor et RadSignature, ou de l’un des plus de 120 autres contrôles prêts à l’emploi, comme la grille ou le planificateur ? Commencez un essai gratuit dès aujourd’hui et découvrez par vous-même que la création d’applications Web Forms pour n’importe quel navigateur et appareil en deux fois moins de temps est un jeu d’enfant.

Essayez maintenant