By adding the web-forms.js file in the head section, the pages are automatically sent with Ajax and the information is found in the Body. Automatic data submission with AJAX is a small part of the WebForms infrastructure.
Using web-forms.js allows us to stay true to the structure of HTML. It is not necessary to remove the form tag or submit button. The structure of sending data in the HTML page does not change.
We have already created a tutorial on how to send data to the server. Now we want to add a script tag to the previous tutorial to add the WebFormsJS file so that data can be sent automatically.
You can see the tutorial on how to send data to the server in the link below:
https://dev.to/elanatframework/how-to-send-data-to-the-server-5dmj
We have explained the training of sending data completely in the above article and we will not discuss it anymore. Please, if you are not familiar with the CodeBehind framework, before reading this article, first read the tutorial in the link above.
In order to get a better understanding of the automatic process of sending data through AJAX, We set the background color of the body tag to pink.
View (Form.aspx)
@page
@controller YourProjectName.FormController
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Send Form Data</title>
+ <script type="text/javascript" src="/script/web-forms.js"></script>
</head>
-<body>
+<body style="background-color:pink">
<form method="post" action="/Form.aspx" enctype="multipart/form-data">
<label for="txt_TextBox">TextBox</label>
<input name="txt_TextBox" id="txt_TextBox" type="text" />
<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>
<input name="hdn_Hidden" type="hidden" value="This is hide value" />
<input name="btn_Button" type="submit" value="Click to send data" />
</form>
</body>
</html>
As you can see in the View codes above, the WebFormsJS script has been added to the head section and the background color has been colored.
You can get WebFormsJS from the following link:
https://github.com/elanatframework/Web_forms/blob/elanat_framework/web-forms.js
This is the image of the View screen after execution and set value.
The image above is a screenshot of the View file display in the browser. We put our values into the inputs on this page.
Controller class
using CodeBehind;
namespace YourProjectName
{
public partial class FormController : CodeBehindController
{
public void PageLoad(HttpContext context)
{
if (!string.IsNullOrEmpty(context.Request.Form["btn_Button"]))
btn_Button_Click(context);
}
private void btn_Button_Click(HttpContext context)
{
string TextBoxValue = context.Request.Form["txt_TextBox"];
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"];
// 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);
}
Write("<p>File was uploaded" + "</p>");
}
Write("<p>TextBoxValue=" + TextBoxValue + "</p>");
Write("<p>HiddenValue=" + HiddenValue + "</p>");
Write("<p>SelectValue=" + SelectValue + "</p>"); ;
Write("<p>CheckBoxValue=" + (CheckBoxValue? "true" : "false") + "</p>");
Write("<p>RadioButtonValue=" + RadioButtonValue + "</p>");
IgnoreViewAndModel = true;
}
}
}
After the button is clicked, the above controller class executes and adds text values to the screen. In this class, the IgnoreViewAndModel attribute is activated, the purpose of which is to prevent View values from being displayed again.
This is the image of the View screen after click on button and receiving data from server.
Calling WebFormJS in HTML pages causes submit buttons to automatically get the onclick attribute with PostBack(this) value.
<input name="btn_Button" type="submit" value="Click to send data" onclick="PostBack(this)"/>
If you call the PostBack method as below, the contents of the page will remain and the values will be added to the beginning of the inner content of the body tag.
PostBack(this, true)
This is the image of the View screen after click by using the PostBack method along with the activation of ViewState.
<input name="btn_Button" type="submit" value="Click to send data" onclick="PostBack(this, true)"/>
You can specify where to add content instead of true.
Example1:
PostBack(this, "<div>2")
The above method places the data received from the server inside the third div tag.
Example2:
PostBack(this, "MyTagId")
The above method puts the data received from the server inside a tag or MyTagId id.
Conclusion
In this article, we demonstrated how to use WebFormsJS to automatically send form data to the server using AJAX. We added the WebFormsJS script to the head section of our HTML page and set the background color of the body tag to pink to illustrate the process. We then created a form with various input elements and a submit button. By clicking the submit button, the form data is sent to the server and displayed on the same page without a full page reload.
We also explained how to use the PostBack method to customize the behavior of the automatic data submission. We showed how to specify where to add the received data by using different methods, such as adding it inside a specific a tag or id.
By using WebFormsJS, we can easily send form data to the server without having to manually write JavaScript code or handle form submissions on the server-side. This makes it easier to implement forms that update dynamically without requiring a full page reload.
Related links
WebFormsJS on GitHub:
https://github.com/elanatframework/Web_forms
CodeBehind on GitHub:
https://github.com/elanatframework/Code_behind
CodeBehind in NuGet:
https://www.nuget.org/packages/CodeBehind/
CodeBehind page:
https://elanat.net/page_content/code_behind
Top comments (0)