إنشاء نموذج HTML ملء إرسال C#

تستخدم نماذج HTML بشكل متكرر للحصول على مدخلات من المستخدمين. يمكنك ملء حقول نموذج مختلفة تحتوي على مربع الاختيار والنص والراديو وزر الإرسال للإدخال. يمكنك إنشاء أو ملء نموذج HTML برمجيًا باستخدام لغة C#. تتناول هذه المقالة الأقسام التالية المتعلقة بنماذج HTML:

إنشاء أو ملء نموذج HTML - تثبيت C# API

Aspose.HTML for .NET تتيح لك واجهة برمجة التطبيقات إنشاء نماذج HTML أو ملؤها بأزرار إرسال برمجيًا باستخدام لغة C#. يمكنك تكوين API عن طريق تنزيل ملف DLL من قسم التنزيلات ، أو تثبيته بسرعة باستخدام أمر التثبيت NuGet التالي:

PM> Install-Package Aspose.Html

إنشاء نموذج HTML برمجيًا باستخدام C#

يمكنك إنشاء نموذج HTML برمجيًا باستخدام لغة C#. يرجى اتباع الخطوات أدناه لإنشائه من البداية:

  1. تهيئة مثيل لفئة HTMLDocument.
  2. قم بإنشاء نموذج HTML جديد باستخدام طريقة CreateNew.
  3. أدخل حقل نوع النص البسيط.
  4. قم بإنشاء عنصر إدخال زر اختيار.
  5. أدخل زر الإرسال في شكل HTML وأضف العقد الحالية.
  6. حفظ نموذج HTML.

يوضح الكود التالي كيفية إنشاء نموذج HTML برمجيًا باستخدام C#:

// تهيئة مثيل لفئة HTMLDocument
using (HTMLDocument document = new HTMLDocument())
{
    // إنشاء نموذج HTML جديد باستخدام طريقة CreateNew()
    using (var editor = FormEditor.CreateNew(document))
    {
        // أدخل حقل نوع النص البسيط
        var name = editor.AddInput("name");                    
        name.Type = InputElementType.Text;                    

        // أدخل زر اختيار
        var size = editor.AddInput("size");
        size.Type = InputElementType.Radio;
        size.HtmlElement.InnerHTML = "Sample Text";

        // أدخل زر الإرسال في شكل HTML
        var button = editor.Add<Forms.ButtonElement>("btn");
        button.Value = "submit";
        button.HtmlElement.InnerHTML = "Sample Button";

        // يضيف العقدة الحالية
        document.Body.AppendChild(editor.Form);
    }
    // حفظ نموذج HTML
    document.Save("Create-HTML-Form.html");
}

علاوة على ذلك ، يوجد أدناه طريقة أخرى لإنشاء نموذج HTML باستخدام عنصر نموذج HTML الأصلي في C#:

// قم بإنشاء نموذج HTML باستخدام واجهة برمجة تطبيقات HTML الأصلية
using (var document = new Aspose.Html.HTMLDocument())
{
    var editor = Aspose.Html.Forms.FormEditor.CreateNew(document);
    var body = document.Body;

    // إنشاء عنصر النموذج
    var form = (HTMLFormElement)document.CreateElement("form");
//                form.Action = "action_page.php" ؛

    // إنشاء تسمية الاسم الأول
    var label = (HTMLLabelElement)document.CreateElement("label");
    label.TextContent = "First name:";
    label.For = "fname";
    form.AppendChild(label);
    form.AppendChild(document.CreateElement("br"));

    // إنشاء حقل الاسم الأول
    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"));

    // قم بإنشاء تسمية LastName
    label = (HTMLLabelElement)document.CreateElement("label");
    label.TextContent = "Last name:";
    label.For = "lname";
    form.AppendChild(label);
    form.AppendChild(document.CreateElement("br"));

    // حقل إنشاء اسم العائلة
    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"));               

    // إنشاء حقل RadioButton
    input = (HTMLInputElement)document.CreateElement("input");
    input.Type = "radio";
    input.Id = "radio1";
    input.Name = "Topping";
    form.AppendChild(input);

    // قم بإنشاء تسمية 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"));

    // إنشاء حقل RadioButton
    input = (HTMLInputElement)document.CreateElement("input");
    input.Type = "radio";
    input.Id = "radio2";
    input.Name = "Topping";
    form.AppendChild(input);

    // قم بإنشاء تسمية 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"));

    // زر إنشاء إرسال
    input = (HTMLInputElement)document.CreateElement("input");
    input.Type = "submit";
    input.Value = "Submit";
    form.AppendChild(input);

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

تُظهر لقطة الشاشة التالية نموذج HTML الناتج الذي تم إنشاؤه باستخدام مقتطف الشفرة أعلاه:

إنشاء نموذج HTML إرسال Btn

املأ نموذج HTML باستخدام زر الإرسال في C#

لقد قمت بالفعل باستكشاف كيفية إنشاء نموذج HTML. يمكنك الآن معرفة كيفية ملء نموذج HTML وإرسال البيانات إلى أي خادم بعيد مباشرةً من تطبيق C# الخاص بك. يمكنك التكرار من خلال عناصر مختلفة في النموذج ثم استخدام زر إرسال لإرسال البيانات. هنا ستعمل باستخدام نموذج نموذج تم إنشاؤه بواسطة httpbin.org. يتضمن ملء النص وأزرار الراديو بالإضافة إلى مربعات الاختيار التي تتعلمها أدناه:

حدد القيمة في خانة اختيار نوع الإدخال

مربعات الاختيار مفيدة حيث تحتاج إلى اختيار أكثر من خيار واحد. يمكنك بسهولة تحديد القيمة في خانة اختيار نوع الإدخال بالكود التالي:

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)
{
    // اختر البصل والجبن كلا الخيارين في مربعات الاختيار
    if (input.Value == "onion" || input.Value == "cheese")
    {
    	input.SetCheckboxValue(true);
    }
}

املأ نص نوع الإدخال وحقل الراديو

قد يحتوي نموذج HTML على العديد من مربعات النص وحقول زر الاختيار لجمع البيانات. يمكنك تعبئة نص الإدخال بالكود التالي:

// يمكنك ملء البيانات باستخدام الوصول المباشر إلى عناصر الإدخال ، مثل هذا:
editor["custname"].Value = "Aspose";

// أو هذا:
var comments = editor.GetElement<Aspose.Html.Forms.TextAreaElement>("comments");
comments.Value = "Extra Ketchup PLEASE!";

// أو حتى عن طريق إجراء عملية مجمعة ، مثل هذه:
editor.Fill(new Dictionary<string, string>()
{
    {"custemail", "test@test.com"},
    {"custtel", "+123-456-789"}
});

وبالمثل ، يمكنك تحديد حقول زر الاختيار بالرمز أدناه:

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)
{
    // حدد متوسط الحجم في زر الاختيار
    if (input.Value == "medium")
    {
    	input.SetRadioValue(true);
    }
}

إرسال البيانات باستخدام زر الإرسال بتنسيق HTML

يمكنك إرسال البيانات المعبأة في شكل HTML باستخدام الزر “إرسال” باستخدام فئة FormSubmitter. يوضح الكود التالي كيفية استدعاء طريقة Submit() في كود C#:

// إنشاء مثيل لمقدم النموذج
var submitter = new Aspose.Html.Forms.FormSubmitter(editor);

// قم بإرسال بيانات النموذج إلى الخادم البعيد.
// إذا كنت بحاجة ، يمكنك تحديد بيانات اعتماد المستخدم ومهلة الطلب ، وما إلى ذلك باستخدام طرق التحميل الزائد
var result = submitter.Submit();

مصدر الرمز

يوجد أدناه كود المصدر الكامل لملء نماذج HTML برمجيًا باستخدام C#:

// ابدأ مثيل مستند HTML من عنوان url "https://httpbin.org/forms/post"
using (var document = new HTMLDocument(@"https://httpbin.org/forms/post"))
{
    // قم بإنشاء مثيل لمحرر النماذج
    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)
        {
            // حدد متوسط الحجم في زر الاختيار
            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)
        {
            // اختر البصل والجبن كلا الخيارين في مربعات الاختيار
            if (input.Value == "onion" || input.Value == "cheese")
            {
                input.SetCheckboxValue(true);
            }
        }

        // يمكنك ملء البيانات باستخدام الوصول المباشر إلى عناصر الإدخال ، مثل هذا:
        editor["custname"].Value = "Aspose";

        // أو هذا:
        var comments = editor.GetElement<Aspose.Html.Forms.TextAreaElement>("comments");
        comments.Value = "Extra Ketchup PLEASE!";

        // أو حتى عن طريق إجراء عملية مجمعة ، مثل هذه:
        editor.Fill(new Dictionary<string, string>()
        {
            {"custemail", "test@test.com"},
            {"custtel", "+123-456-789"}
        });

        // إنشاء مثيل لمقدم النموذج
        using (var submitter = new Aspose.Html.Forms.FormSubmitter(editor))
        {
            // قم بإرسال بيانات النموذج إلى الخادم البعيد.
            // إذا كنت بحاجة ، يمكنك تحديد بيانات اعتماد المستخدم ومهلة الطلب ، وما إلى ذلك.
            var result = submitter.Submit();

            // تحقق من حالة الكائن الناتج
            if (result.IsSuccess)
            {
                // تحقق مما إذا كانت النتيجة بتنسيق json
                if (result.ResponseMessage.Headers.ContentType.MediaType == "application/json")
                {
                    // تفريغ بيانات النتائج إلى وحدة التحكم
                    Console.WriteLine(result.Content.ReadAsString());
                }
                else
                {
                    // قم بتحميل بيانات النتيجة كمستند HTML
                    using (var resultDocument = result.LoadDocument())
                    {
                        // افحص مستند HTML هنا.
                    }
                }

            }
        }
    }
}

ترخيص API مجاني

يمكنك تقييم Aspose.HTML لـ .NET API بدون أي قيود تقييم عن طريق طلب ترخيص مجاني مؤقت.

استنتاج

في الختام ، تعلمت كيفية إنشاء نموذج HTML من البداية ، وكذلك كيفية ملء نموذج HTML الحالي وإرسال البيانات إلى خادم بعيد من تطبيق C# الخاص بك. يمكنك أيضًا زيارة قسم الوثائق لاستكشاف العديد من الميزات الأخرى. لا تتردد في الاتصال بنا على منتدى الدعم المجاني لأي من استفساراتك.

أنظر أيضا