elanatframework

Posted on Oct 2 • Originally published at elanat.net

Send Information by Submitting Form

#tutorial #dotnet #beginners #backend

In this tutorial, we teach you how to submit form data in the CodeBehind framework. To keep it simple, we just added a View page with a Controller class and didn't use a Model.

View

We created a View page that contains several inputs that are inside the form tag. The form tag uses the post method; in order to upload a file, the enctype attribute is added along with the multipart/form-data value in the form tag.

View page is a form that includes the following inputs:

TextBox
Color
Date
Time
Date Time Local
Week
Month
Number
Email
Tel
URL
Search
Password
Range
Select
Hidden
CheckBox
RadioButton
File
Textarea (is use textarea tag name)
Reset
Submit

View (myform.aspx)

@page
@controller MyFormController
@layout "/layout.aspx"
    <main>
    <form method="post" action="/myform.aspx" enctype="multipart/form-data">

        <label for="txt_TextBox">TextBox</label>
        <input name="txt_TextBox" id="txt_TextBox" type="text" />
        <br><br>
        <label for="txt_Color">Color</label>
        <input name="txt_Color" id="txt_Color" type="color" />
        <br><br>
        <label for="txt_Date">Date</label>
        <input name="txt_Date" id="txt_Date" type="date" />
        <br><br>
        <label for="txt_Time">Time</label>
        <input name="txt_Time" id="txt_Time" type="time" />
        <br><br>
        <label for="txt_DateTimeLocal">Local Date Time</label>
        <input name="txt_DateTimeLocal" id="txt_DateTimeLocal" type="datetime-local" />
        <br><br>
        <label for="txt_Week">Week</label>
        <input name="txt_Week" id="txt_Week" type="week" />
        <br><br>
        <label for="txt_Month">Month</label>
        <input name="txt_Month" id="txt_Month" type="month" />
        <br><br>
        <label for="txt_Number">Number</label>
        <input name="txt_Number" id="txt_Number" type="number" />
        <br><br>
        <label for="txt_Email">Email</label>
        <input name="txt_Email" id="txt_Email" type="email" />
        <br><br>
        <label for="txt_Tel">Tel</label>
        <input name="txt_Tel" id="txt_Tel" type="tel" />
        <br><br>
        <label for="txt_Url">URL</label>
        <input name="txt_Url" id="txt_Url" type="url" />
        <br><br>
        <label for="txt_Search">Search</label>
        <input name="txt_Search" id="txt_Search" type="search" />
        <br><br>
        <label for="txt_Password">Password</label>
        <input name="txt_Password" id="txt_Password" type="password" />
        <br><br>
        <label for="txt_Range">Range</label>
        <input name="txt_Range" id="txt_Range" type="range" />
        <br><br>
        <label for="ddlst_Select">Select</label>
        <select name="ddlst_Select" id="ddlst_Select">
            <option value="1">One 1</option>
            <option value="2">Two 2</option>
            <option value="3">Three 3</option>
            <option value="4">Four 4</option>
            <option value="5">Five 5</option>
        </select>
        <br><br>
        <label for="cbx_CheckBox">CheckBox</label>
        <input name="cbx_CheckBox" id="cbx_CheckBox" type="checkbox" />
        <br><br>
        <input value="1" name="rdbtn_RadioButton" id="rdbtn_RadioButton1" type="radio" /><label for="rdbtn_RadioButton1">RadioButton 1</label>
        <input value="2" name="rdbtn_RadioButton" id="rdbtn_RadioButton2" type="radio" /><label for="rdbtn_RadioButton2">RadioButton 2</label>
        <input value="3" name="rdbtn_RadioButton" id="rdbtn_RadioButton3" type="radio" /><label for="rdbtn_RadioButton3">RadioButton 3</label>
        <br><br>
        <label for="upd_File">File Upload</label>
        <input name="upd_File" id="upd_File" type="file" />
        <br><br>
        TextArea<br>
        <textarea name="txt_Textarea"></textarea>
        <br><br>
        <input name="hdn_Hidden" type="hidden" value="This is hide value" />

        <input type="reset" value="Reset" />
        <input name="btn_Button" type="submit" value="Click to send data" />

    </form>
    </main>

This is the image of the View screen after execution.

Controller

Adding the Controller to the View page causes the PageLoad method of the Controller class to be executed every time the View page is called. Submit type inputs are buttons that send their data only when they are clicked; In other words, if you have several buttons in a form, on each button that is clicked, the data of that button and all the data of other inputs will be sent to the server, except for the data of other buttons.

Controller class

using CodeBehind;

public partial class MyFormController : CodeBehindController
{
    public void PageLoad(HttpContext context)
    {
        if (context.Request.Form["btn_Button"].Has())
            btn_Button_Click(context);
    }

    private void btn_Button_Click(HttpContext context)
    {
        // Get Data
        string TextBoxValue = context.Request.Form["txt_TextBox"];
        string ColorValue = context.Request.Form["txt_Color"];
        string DateBoxValue = context.Request.Form["txt_Date"];
        string TimeValue = context.Request.Form["txt_Time"];
        string DateTimeLocalValue = context.Request.Form["txt_DateTimeLocal"];
        string WeekValue = context.Request.Form["txt_Week"];
        string MonthValue = context.Request.Form["txt_Month"];
        string NumberValue = context.Request.Form["txt_Number"];
        string EmailValue = context.Request.Form["txt_Email"];
        string TelValue = context.Request.Form["txt_Tel"];
        string UrlValue = context.Request.Form["txt_Url"];
        string SearchValue = context.Request.Form["txt_Search"];
        string PasswordValue = context.Request.Form["txt_Password"];
        string RangeValue = context.Request.Form["txt_Range"];
        string HiddenValue = context.Request.Form["hdn_Hidden"];
        string SelectValue = context.Request.Form["ddlst_Select"];
        bool CheckBoxValue = context.Request.Form["cbx_CheckBox"] == "on";
        string RadioButtonValue = context.Request.Form["rdbtn_RadioButton"];
        string TextareaValue = context.Request.Form["txt_Textarea"];


        var Form = new WebForms();
        Form.AddTag(InputPlace.Tag("form"), "hr");
        Form.AddTag(InputPlace.Tag("form"), "h3");
        Form.SetBackgroundColor(InputPlace.Tag("h3", -1), "violet");

        // Get File
        IFormFile FileUploadValue = context.Request.Form.Files["upd_File"];

        if ((FileUploadValue != null) && (FileUploadValue.Length > 0))
        {
            CodeBehind.API.Path path = new CodeBehind.API.Path();

            using (Stream stream = new FileStream(path.BaseDirectory + "/" + FileUploadValue.FileName, FileMode.Create, FileAccess.ReadWrite))
            {
                FileUploadValue.CopyTo(stream);
            }

            Form.AddText(InputPlace.Tag("h3", -1), "File was upload");
        }

        Form.AddText(InputPlace.Tag("h3", -1), "TextBoxValue=" + TextBoxValue);
        Form.AddText(InputPlace.Tag("h3", -1), "ColorValue=" + ColorValue);
        Form.AddText(InputPlace.Tag("h3", -1), "DateBoxValue=" + DateBoxValue);
        Form.AddText(InputPlace.Tag("h3", -1), "TimeValue=" + TimeValue);
        Form.AddText(InputPlace.Tag("h3", -1), "DateTimeLocalValue=" + DateTimeLocalValue);
        Form.AddText(InputPlace.Tag("h3", -1), "WeekValue=" + WeekValue);
        Form.AddText(InputPlace.Tag("h3", -1), "MonthValue=" + MonthValue);
        Form.AddText(InputPlace.Tag("h3", -1), "NumberValue=" + NumberValue);
        Form.AddText(InputPlace.Tag("h3", -1), "EmailValue=" + EmailValue);
        Form.AddText(InputPlace.Tag("h3", -1), "TelValue=" + TelValue);
        Form.AddText(InputPlace.Tag("h3", -1), "UrlValue=" + UrlValue);
        Form.AddText(InputPlace.Tag("h3", -1), "SearchValue=" + SearchValue);
        Form.AddText(InputPlace.Tag("h3", -1), "PasswordValue=" + PasswordValue);
        Form.AddText(InputPlace.Tag("h3", -1), "RangeValue=" + RangeValue);
        Form.AddText(InputPlace.Tag("h3", -1), "HiddenValue=" + HiddenValue);
        Form.AddText(InputPlace.Tag("h3", -1), "SelectValue=" + SelectValue);
        Form.AddText(InputPlace.Tag("h3", -1), "CheckBoxValue=" + (CheckBoxValue ? "true" : "false"));
        Form.AddText(InputPlace.Tag("h3", -1), "RadioButtonValue=" + RadioButtonValue);
        Form.AddText(InputPlace.Tag("h3", -1), "TextareaValue=" + TextareaValue);

        Control(Form);
        IgnoreAll();
    }
}

We added a Controller class and in the PageLoad method we check the presence of data named btn_Button in the form data.

Checking the existence of data with the name btn_Button

if (context.Request.Form["btn_Button"].Has())
    btn_Button_Click(context);

According to the above codes, if there is a data named btn_Button, the btn_Button_Click method is called with the context argument.

Clicking on the "Click to send data" button causes the data of the form named btn_Button to be sent to the server.

The HTML tag below shows the btn_Button button

<input name="btn_Button" type="submit" value="Click to send data" />

All input tag except radio like text, hidden, select, and radio inputs have text values and their data is retrieved as follows.

Note: The textarea tag value is also retrieved according to the code below.

string InputValue = context.Request.Form["InputName"];

The InputName value is an example and the name of the input tag should be replased.

Example:

string TextBoxValue = context.Request.Form["txt_TextBox"];

The checkbox input sends a text data with the value on if its tick value is active.

The code below shows how to read checkbox data.

bool CheckBoxValue = context.Request.Form["cbx_CheckBox"] == "on";

To receive the file, we used the IFormFile data type.

How to get the file is specified in the codes below.

IFormFile FileUploadValue = context.Request.Form.Files["upd_File"];

if ((FileUploadValue != null) && (FileUploadValue.Length > 0))
{
    CodeBehind.API.Path path = new CodeBehind.API.Path();

    using (Stream stream = new FileStream(path.BaseDirectory + "/" + FileUploadValue.FileName, FileMode.Create, FileAccess.ReadWrite))
    {
        FileUploadValue.CopyTo(stream);
    }

    Form.AddText(InputPlace.Tag("h3", -1), "File was upload");
}

As it is clear in the codes above, first we create a data value of IFormFile type and value it with the input file data.

Then we check whether the input file is initialized on the user side or not. If the initialization is done on the user side, the file will be uploaded.

To check that we have received the data correctly, we add the received data on the page using the WebForms Core technology.

We call the IgnoreAll method; enabling the IgnoreAll method causes the View and Layout to be completely ignored and only the Controller values are added to the page.

The values of the text below are displayed after clicking on the "Click to send data" button.

[web-forms]
nt<form>=hr
nt<form>=h3
bc<h3>-1=violet
at<h3>-1=TextBoxValue=value1
at<h3>-1=ColorValue=#1bc7e4
at<h3>-1=DateBoxValue=
at<h3>-1=TimeValue=23:00
at<h3>-1=DateTimeLocalValue=2024-10-02T23:11
at<h3>-1=WeekValue=Wednesday
at<h3>-1=MonthValue=October
at<h3>-1=NumberValue=100
at<h3>-1=EmailValue=info@elanat.net
at<h3>-1=TelValue=+123456789
at<h3>-1=UrlValue=https://elanat.net/page_content/code_behind
at<h3>-1=SearchValue=My search value
at<h3>-1=PasswordValue=123
at<h3>-1=RangeValue=77
at<h3>-1=HiddenValue=This is hide value
at<h3>-1=SelectValue=4
at<h3>-1=CheckBoxValue=true
at<h3>-1=RadioButtonValue=2
at<h3>-1=TextareaValue=CodeBehind is a modern back-end framework under ASP.NET Core. CodeBehind was developed by Elanat in 2023 and competes with Microsoft's default web frameworks (ASP.NET Core MVC and Razor Pages and Blazor). CodeBehind is an engineering masterpiece that simultaneously provides the possibility of development based on MVC, Model-View, Controller-View, only View and Web-Forms. The type of structure and naming in CodeBehind is a nostalgia that reminds of former Microsoft Web-Forms.

DEV Community

Send Information by Submitting Form

View

Controller

Related links

Top comments (0)

Read next

How to use Promise.race to add timeout to fetch calls

Elixir: Concurrency & Fault-Tolerance

🗂️ Monorepo vs. Polyrepo: Choosing the Right Strategy for Your Projects 🚀

How to Become a Solana Developer: A Comprehensive Guide