In this article I will explain with an example, how to use FormData in Web Service with XmlHttpRequest (XHR) using JavaScript in ASP.Net using C# and VB.Net.
 
 

Web Service

The following Web Services consists of a method called CallWebService.
The Web Service method gets called when AJAX call is made using XmlHttpRequest (XHR).
Inside the Web Method, the value of the Name and Age are read from Request.Form collection.
C#
using System.Web;
using System.Web.Services;
 
///<summary>
/// Summary description for WebService
///</summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
// [System.Web.Script.Services.ScriptService]
public class Service : System.Web.Services.WebService
{
    public Service()
    {
        //Uncomment the following line if using designed components
        //InitializeComponent();
    }
 
    [WebMethod]
    public void CallWebService()
    {
        string name = HttpContext.Current.Request.Form["name"];
        string age = HttpContext.Current.Request.Form["age"];
    }
}
 
VB.Net
Imports System.Web
Imports System.Web.Services
 
' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
' <System.Web.Script.Services.ScriptService()> _
<WebService(Namespace:="http://tempuri.org/")>
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)>
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()>
Public Class Service
    Inherits System.Web.Services.WebService
 
    <WebMethod()>
    Public Sub CallWebService()
        Dim name As String = HttpContext.Current.Request.Form("name")
        Dim age As String = HttpContext.Current.Request.Form("age")
    End Sub
End Class
 
 

HTML Markup

The following HTML Markup consists of:
TextBox – For capturing Name and Age.
Button – For calling the Web Service.
The Button has been assigned with an OnClientClick event handler.
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>Name:</td>
        <td><asp:TextBox ID="txtName" runat="server" /></td>
    </tr>
    <tr>
        <td>Age:</td>
        <td><asp:TextBox ID="txtAge" runat="server" /></td>
    </tr>
    <tr>
        <td></td>
        <td><asp:Button ID="btnSubmit" Text="Submit" runat="server" OnClientClick="return Submit()" /></td>
    </tr>
</table>
 
 

Sending FormData to Web Services with XmlHttpRequest (XHR) using JavaScript

Inside the JavaScript Submit function, first an object of FormData is created.
Then, the value of Name and Age are fetched from their respective TextBoxes and set into the FormData object using append method.
After that, a check is performed whether the browser supports the XMLHttpRequest, if it supports then the new XMLHttpRequest object will be created.
Another check is performed for older versions on browser like Internet Explorer if it supports ActiveXObject, if it supports then the new Microsoft.XMLHTTP ActiveXObject object will be created.
Finally, a request variable is checked for NULL if it is not NULL then the AJAX call is made to the CallWebService Web Method of the Web Services using JavaScript XmlHttpRequest (XHR) and FormData is sent using send method.
<script type="text/javascript">
    function Submit() {
        var formData = new FormData();
        formData.append("name", document.getElementById("<%=txtName.ClientID%>").value);
        formData.append("age", document.getElementById("<%=txtAge.ClientID%>").value);
 
        var request;
        if (window.XMLHttpRequest) {
            //New browsers.
            request = new XMLHttpRequest();
        }
        else if (window.ActiveXObject) {
            //Old IE Browsers.
            request = new ActiveXObject("Microsoft.XMLHTTP");
        }
        if (request != null) {
            var url = "Service.asmx/CallWebService";
            request.open("POST", url, false);
            request.send(formData);
        }
        return false;
    }
</script>
 
 

Screenshots

The Form

Using FormData in Web Service with XmlHttpRequest (XHR) using JavaScript in ASP.Net
 

Values received in generic handler

Using FormData in Web Service with XmlHttpRequest (XHR) using JavaScript in ASP.Net
 
 

Downloads

Download Code