Crea o compila il modulo HTML con il pulsante Invia utilizzando C#

I moduli HTML vengono utilizzati frequentemente per ottenere input dagli utenti. È possibile compilare diversi campi modulo contenenti Checkbox, Testo, Radio e pulsante Invia per l’input. È possibile creare o compilare il modulo HTML a livello di codice utilizzando il linguaggio C#. Questo articolo copre le seguenti sezioni relative ai moduli HTML:

• Crea o compila modulo HTML - Installazione API C#
• Crea un modulo HTML a livello di codice usando C#
• Compila il modulo HTML con il pulsante Invia in C#
  • Selezionare la casella di controllo Valore nel tipo di input
  • Riempi il campo Tipo di input Testo e Radio
  • Invio di dati con il pulsante Invia in HTML
  • Codice sorgente completo
• Licenza API gratuita

Crea o compila modulo HTML - Installazione API C#

L’API Aspose.HTML for .NET consente di creare o compilare moduli HTML con i pulsanti Invia a livello di codice utilizzando il linguaggio C#. Puoi configurare l’API scaricando un file DLL dalla sezione Download o installarlo rapidamente con il seguente comando di installazione NuGet:

PM> Install-Package Aspose.Html

Crea un modulo HTML a livello di codice usando C#

È possibile creare un modulo HTML a livello di codice usando il linguaggio C#. Segui i passaggi seguenti per crearlo da zero:

1. Inizializza un’istanza della classe HTMLDocument.
2. Crea un nuovo modulo HTML con il metodo CreateNew.
3. Immettere il campo del tipo di testo semplice.
4. Crea un elemento di input del pulsante di opzione.
5. Inserisci il pulsante di invio in formato HTML e aggiungi i nodi correnti.
6. Salva il modulo HTML.

Il codice seguente mostra come creare un modulo HTML a livello di codice usando C#:

// Inizializza un'istanza della classe HTMLDocument
using (HTMLDocument document = new HTMLDocument())
{
    // Crea un nuovo modulo HTML con il metodo CreateNew()
    using (var editor = FormEditor.CreateNew(document))
    {
        // Immettere il campo del tipo di testo semplice
        var name = editor.AddInput("name");                    
        name.Type = InputElementType.Text;                    

        // Inserisci un pulsante di opzione
        var size = editor.AddInput("size");
        size.Type = InputElementType.Radio;
        size.HtmlElement.InnerHTML = "Sample Text";

        // Inserisci il pulsante di invio in formato HTML
        var button = editor.Add<Forms.ButtonElement>("btn");
        button.Value = "submit";
        button.HtmlElement.InnerHTML = "Sample Button";

        // Aggiunge il nodo corrente
        document.Body.AppendChild(editor.Form);
    }
    // Salva il modulo HTML
    document.Save("Create-HTML-Form.html");
}

Inoltre, di seguito è riportato un altro approccio per la creazione di moduli HTML utilizzando l’elemento modulo HTML nativo in C#:

// Crea un modulo HTML utilizzando l'API HTML nativa
using (var document = new Aspose.Html.HTMLDocument())
{
    var editor = Aspose.Html.Forms.FormEditor.CreateNew(document);
    var body = document.Body;

    // creare un elemento del modulo
    var form = (HTMLFormElement)document.CreateElement("form");
//                form.Action = "action_page.php";

    // Crea etichetta Nome
    var label = (HTMLLabelElement)document.CreateElement("label");
    label.TextContent = "First name:";
    label.For = "fname";
    form.AppendChild(label);
    form.AppendChild(document.CreateElement("br"));

    // Crea campo Nome
    var input = (HTMLInputElement)document.CreateElement("input");
    input.Type = "text";
    input.Id = "fname";
    input.Name = "fname";
    form.AppendChild(input);
    form.AppendChild(document.CreateElement("br"));
    form.AppendChild(document.CreateElement("br"));

    // Crea etichetta Cognome
    label = (HTMLLabelElement)document.CreateElement("label");
    label.TextContent = "Last name:";
    label.For = "lname";
    form.AppendChild(label);
    form.AppendChild(document.CreateElement("br"));

    // Crea campo Cognome
    input = (HTMLInputElement)document.CreateElement("input");
    input.Type = "text";
    input.Id = "lname";
    input.Name = "lname";
    form.AppendChild(input);
    form.AppendChild(document.CreateElement("br"));
    form.AppendChild(document.CreateElement("br"));               

    // Crea campo RadioButton
    input = (HTMLInputElement)document.CreateElement("input");
    input.Type = "radio";
    input.Id = "radio1";
    input.Name = "Topping";
    form.AppendChild(input);

    // Crea etichetta RadioButton
    label = (HTMLLabelElement)document.CreateElement("label");
    label.TextContent = "Male";
    label.For = "radio1";
    form.AppendChild(label);                
    form.AppendChild(document.CreateElement("br"));
    form.AppendChild(document.CreateElement("br"));

    // Crea campo RadioButton
    input = (HTMLInputElement)document.CreateElement("input");
    input.Type = "radio";
    input.Id = "radio2";
    input.Name = "Topping";
    form.AppendChild(input);

    // Crea etichetta RadioButton
    label = (HTMLLabelElement)document.CreateElement("label");
    label.TextContent = "Female";
    label.For = "radio2";
    form.AppendChild(label);
    form.AppendChild(document.CreateElement("br"));
    form.AppendChild(document.CreateElement("br"));

    // Pulsante Crea Invia
    input = (HTMLInputElement)document.CreateElement("input");
    input.Type = "submit";
    input.Value = "Submit";
    form.AppendChild(input);

    body.AppendChild(form);
    document.Save(dataDir + "Create-HTML-Form.html");
}

Lo screenshot seguente mostra il modulo HTML di output creato con il frammento di codice sopra:

Compila il modulo HTML con il pulsante Invia in C#

Hai già esplorato come creare un modulo HTML. Ora puoi imparare a compilare un modulo HTML e inviare i dati a qualsiasi server remoto direttamente dalla tua applicazione C#. Puoi scorrere diversi elementi nel modulo e quindi utilizzare il pulsante Invia per inviare i dati. Qui lavorerai con un template form creato da httpbin.org. Include il riempimento di testo, pulsanti di opzione e caselle di controllo che imparerai di seguito:

Selezionare la casella di controllo Valore nel tipo di input

Le caselle di controllo sono utili quando devi scegliere più di un’opzione. È possibile selezionare facilmente il valore nella casella di controllo del tipo di input con il codice seguente:

elements = editor
.Where(x => x.ElementType == Forms.FormElementType.Input)
.Cast<Aspose.Html.Forms.InputElement>()
.Where(x => x.Type == Forms.InputElementType.Checkbox);

foreach (Forms.InputElement input in elements)
{
    // Scegli cipolla e formaggio entrambe le opzioni nelle caselle di controllo
    if (input.Value == "onion" || input.Value == "cheese")
    {
    	input.SetCheckboxValue(true);
    }
}

Riempi il campo Tipo di input Testo e Radio

Un modulo HTML può contenere diverse caselle di testo e campi di pulsanti di opzione per la raccolta dei dati. Puoi riempire il testo di input con il seguente codice:

// Puoi riempire i dati utilizzando l'accesso diretto agli elementi di input, in questo modo:
editor["custname"].Value = "Aspose";

// o questo:
var comments = editor.GetElement<Aspose.Html.Forms.TextAreaElement>("comments");
comments.Value = "Extra Ketchup PLEASE!";

// o anche eseguendo un'operazione di massa, come questa:
editor.Fill(new Dictionary<string, string>()
{
    {"custemail", "test@test.com"},
    {"custtel", "+123-456-789"}
});

Allo stesso modo, puoi selezionare i campi dei pulsanti di opzione con il codice seguente:

var elements = editor
.Where(x => x.ElementType == Forms.FormElementType.Input)
.Cast<Aspose.Html.Forms.InputElement>()
.Where(x => x.Type == Forms.InputElementType.Radio);

foreach (Forms.InputElement input in elements)
{
    // Seleziona media come taglia nel pulsante di opzione
    if (input.Value == "medium")
    {
    	input.SetRadioValue(true);
    }
}

Invio di dati con il pulsante Invia in HTML

Puoi inviare i dati compilati in un modulo HTML con il pulsante Invia utilizzando la classe FormSubmitter. Il codice seguente mostra come chiamare il metodo Submit() nel codice C#:

// Crea un'istanza di mittente del modulo
var submitter = new Aspose.Html.Forms.FormSubmitter(editor);

// Invia i dati del modulo al server remoto.
// Se necessario, puoi specificare le credenziali utente e il timeout per la richiesta, ecc. con metodi di overload
var result = submitter.Submit();

Codice sorgente

Di seguito è riportato il codice sorgente completo per compilare i moduli HTML a livello di codice utilizzando C#:

// Inizializza un'istanza di documento HTML dall'URL 'https://httpbin.org/forms/post'
using (var document = new HTMLDocument(@"https://httpbin.org/forms/post"))
{
    // Crea un'istanza di Form Editor
    using (var editor = FormEditor.Create(document, 0))
    {

        var elements = editor
        .Where(x => x.ElementType == Forms.FormElementType.Input)
        .Cast<Aspose.Html.Forms.InputElement>()
        .Where(x => x.Type == Forms.InputElementType.Radio);
        foreach (Forms.InputElement input in elements)
        {
            // Seleziona media come taglia nel pulsante di opzione
            if (input.Value == "medium")
            {
                input.SetRadioValue(true);
            }
        }

        elements = editor
        .Where(x => x.ElementType == Forms.FormElementType.Input)
        .Cast<Aspose.Html.Forms.InputElement>()
        .Where(x => x.Type == Forms.InputElementType.Checkbox);

        foreach (Forms.InputElement input in elements)
        {
            // Scegli cipolla e formaggio entrambe le opzioni nelle caselle di controllo
            if (input.Value == "onion" || input.Value == "cheese")
            {
                input.SetCheckboxValue(true);
            }
        }

        // Puoi riempire i dati utilizzando l'accesso diretto agli elementi di input, in questo modo:
        editor["custname"].Value = "Aspose";

        // o questo:
        var comments = editor.GetElement<Aspose.Html.Forms.TextAreaElement>("comments");
        comments.Value = "Extra Ketchup PLEASE!";

        // o anche eseguendo un'operazione di massa, come questa:
        editor.Fill(new Dictionary<string, string>()
        {
            {"custemail", "test@test.com"},
            {"custtel", "+123-456-789"}
        });

        // Crea un'istanza di mittente del modulo
        using (var submitter = new Aspose.Html.Forms.FormSubmitter(editor))
        {
            // Invia i dati del modulo al server remoto.
            // Se necessario, puoi specificare le credenziali utente e il timeout per la richiesta, ecc.
            var result = submitter.Submit();

            // Controllare lo stato dell'oggetto risultato
            if (result.IsSuccess)
            {
                // Controlla se il risultato è in formato json
                if (result.ResponseMessage.Headers.ContentType.MediaType == "application/json")
                {
                    // Scarica i dati dei risultati sulla console
                    Console.WriteLine(result.Content.ReadAsString());
                }
                else
                {
                    // Carica i dati del risultato come documento HTML
                    using (var resultDocument = result.LoadDocument())
                    {
                        // Ispeziona il documento HTML qui.
                    }
                }

            }
        }
    }
}

Licenza API gratuita

Puoi valutare Aspose.HTML per .NET API senza alcuna limitazione di valutazione richiedendo una licenza temporanea gratuita.

Conclusione

In conclusione, hai imparato come creare un modulo HTML da zero, nonché come compilare un modulo HTML esistente e inviare i dati a un server remoto dalla tua applicazione C#. Puoi anche visitare la sezione Documentazione per esplorare molte altre funzionalità. Non esitare a contattarci nel Forum di supporto gratuito per qualsiasi tua domanda.

Guarda anche

• Dividi la pagina Web HTML in più file a livello di codice utilizzando C#