Documentation

Elanat Documentation

The most important feature of Elanat is its add-ons-oriented structure. Add-ons-oriented structure allows you to create your own Add-ons without conflicting with Eanat core.

CodeBehind Framework Tutorial Series - Send data by submitting form

Send Data by Submitting Form in CodeBehind Framework

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" />

This is the image of the View screen after execution.

Sending data to server by submit form

Controller

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

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

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.

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

Example:

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.

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

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

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.

Elanat Framework

Free and open-source

Documentation

CodeBehind Framework Tutorial Series - Send data by submitting form

Send Data by Submitting Form in CodeBehind Framework

View

Controller