Form in Jquery ed Asp.Net

Spesso siamo alla ricerca di Plug-in già compilati e pronti da scaricare che possano esaudire ogni nostro desiderio e non ci accorgiamo che, magari, potremmo risolvere più velocemente alcune situazioni creandoci da soli le soluzioni.
In questo articolo vedremo come può essere semplice creare un form-mail utilizzando Jquery ed Asp.Net e senza l’ausilio di tag Form o pagine Asp.Net.

Creeremo un form e degli script in Jquery che convalideranno i campi e invieranno i dati ad un gestore generico Asp.Net, il quale risponderà con un messaggio ad operazioni riuscita.

Per prima cosa, creiamo la pagina HTML che conterrà i campi ed inseriamo all’interno dei tag HEAD un riferimento a Jquery.

<script src="jquery.js"></script>

Ora creiamo li stili che orneranno la nostra paginetta.

<style>
  label {
   width:120px;
   float:left;
   margin-bottom:5px;
  }
  input[type="text"], textarea {
   width:350px;
   margin-bottom:5px;
  }
  .incorrect {
   border:solid 2px #FF0000;
  }
</style>

A questo punto creiamo il nostro form inserendo i campi di cui abbiamo bisogno.

<div id="formMail">
  <label for="tbNome">Nome: </label><input id="tbNome" type="text" data-tbrequired="Campo Nome obbligatorio" /><br />
  <label for="tbCognome">Cognome: </label><input id="tbCognome" type="text" data-tbrequired="Campo Cognome obbligatorio" /><br />
  <label for="tbEmail">Email: </label><input id="tbEmail" type="text" data-tbrequired="Campo Email obbligatorio"  data-mailregx="Indirizzo E-mail non corretto" /><br />
  <label for="tbMessaggio">Messaggio: </label><textarea id="tbMessaggio" rows="5" data-tbrequired="Campo Email obbligatorio"></textarea><br />
  <input id="btnInvia" type="submit" value="Invia i dati" onclick="sendMail(); return false;" />
</div>
<br />
<div id="result"></div>

Nel dettaglio:

  • - Ho creato un DIV con id=”formMail” che contiene l’intero form
  • - Ho inserito dei campi con rispettive etichette
  • - Ai campi ho associato un attributo HTML5 “data-required” che indicherà al nostro script Jquery che quel campo è obbligatorio e di mostrare il messaggio contenuto all’interno dell’attributo in caso di errore.
  • - Al campo email ho associato anche un attributo HTML5 data-mailregx, che indicherà al nostro script di verificare l’esattezza dell’indirizzo e-mail inserito.
  • - Ho inserito un pulsante che chiama la funzione Jquery per l’invio della mail senza eseguire postback.
  • - Infine ho inseriti un DIV con id=”result”, utilizzato per mostrare il messaggio di avvenuta spedizione.

Ora creiamo gli script Jquery che eseguiranno le operazioni di spedizione

<script>
  /***********************************************
  CONVALIDA DEI CONTROLLI
  ***********************************************/
  function FormValidator(form) {
   var errorControls = 0;
   var controls = $(form + ' *');
   var errorMessage = "";
   var errorClass = "incorrect";

   controls.each(function (index) {
    //verifico i required per textbox
    if ($(this).data("tbrequired")) {
     if ($(this).val() == "") {
      $(this).addClass(errorClass);
      errorControls++;
      errorMessage += $(this).data("tbrequired") + "\r";
     } else {
      $(this).removeClass(errorClass);
     }
    }

    //verifico i mailregx
    if ($(this).data("mailregx")) {
     var espressione = new RegExp("^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$");
     if (!espressione.test($(this).val())) {
      $(this).addClass("incorrect");
      errorControls++;
      errorMessage += $(this).data("mailregx") + "\r";
     } else {
      $(this).removeClass(errorClass);
     }
    }
   });

   if (errorControls <= 0) {
    return true;
   } else {
    alert(errorMessage);
    return false;
   }
  }
</script>

Questo script viene utilizzato per la verifica dei campi. Scandaglierà il nostro Form Mail controllo per controllo e nel caso si presentino gli attributi HTML5 “tbrequired” o “mailregx”, verificherà che sia stato inserito del testo e che l’indirizzo email sia corretto.
Quest’altro script invece invierà i dati al gestore generico

<script>
  /***********************************************
  INVIO DEL MESSAGGIO
  ***********************************************/
  function sendMail() {
   if (FormValidator("#formMail")) {
    $('#formMail .preload').show();

    var dataObject = new Object();
    dataObject.nome = $("#tbNome").val();
    dataObject.cognome = $("#tbCognome").val();
    dataObject.email = $("#tbEmail").val();
    dataObject.messaggio = $("#tbMessaggio").val();

    $.ajax({
     type: "POST",
     url: "SendMail.ashx",
     data: dataObject,
     error: function (jqXHR, extStatus, errorThrown) {
      //in caso di errore
      alert(errorThrown);
     }
    }).done(function (msg) {
     //in caso di riuscita
     $('#result').html(msg);
    });

   }
  }
</script>

Questa funzione, come prima cosa, richiama lo script di convalida dei controlli e nel caso questo vada a buon fine crea un nuovo oggetto che conterrà le informazioni da passare.
Viene creato anche un oggetto Jquey.ajax che invierà i dati al gestore generico “SendMail.ashx”.
Per la documentazione su ajax di Jquery vi rimando alla documentazione ufficiale.

Ora dobbiamo creare il gestore generico (adoro questo tipo di file, riesci a creare ciò che vuoi risparmiando una grande quantità di risorse sul server).

<%@ WebHandler Language="VB" Class="SendMail" %>

Imports System
Imports System.Web

Public Class SendMail : Implements IHttpHandler
   
    Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
  context.Response.ContentType = "text/html"
 
  'inserire qui il codice per inviare la mail utilizzando la classe
  'System.Net.Mail.MailMessage e magari registrare il cvontatto in un database
 
  'risposta inviata al client
        context.Response.Write("<span style=""color:red;"">Invio riuscito</span>")
    End Sub

    Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
        Get
            Return False
        End Get
    End Property

End Class

Ora non ci basta che testare il tutto su un server per verificarne il funzionamento, mi raccomando aspettate qualche secondo dopo aver premuto il pulsante di invio.
Se volete potete scaricare l'esempio completo da questo link.

Conclusioni

Ovviamente questo è un articolo che tocca l’operazione molto in superficialità. I Form Mail possono avere bisogno di molte funzioni in più come la visualizzazione di una gif che funga da preload mentre vengono inviati i dati, oppure funzioni di convalida più complesse. In ogni caso mi sembra una buona base di partenza per  capire il funzionamento dei callback verso oggetti Asp.Net.



Articoli Correlati

Form in Jquery ed Asp.Net Centrare un DIV verticalmente con i CSS Eliminare tutte le tabelle, viste e stored procedure presenti all'interno di un database SQL Server Recuperare tutte le stored procedure da un database SQL Server

Commenti

Lascia un commento

Il tuo indirizzo e-amil non sarà pubblicato.

Salva commento Anteprima