In this article I will explain with an example, how to call WebMethod from ReactJS in ASP.Net.
The WebMethod will be called using AJAX with the help of XmlHttpRequest (XHR) function inside the ReactJS class.
Integrating ReactJS with ASP.Net
WebMethod
The following WebMethod gets called, when AJAX call made from the XmlHttpRequest (XHR) function inside the ReactJS class and it accepts a parameter name.
Finally, a greeting message along with the Name and Current DateTime is returned back to the XmlHttpRequest (XHR) function inside the ReactJS class.
[WebMethod]
public static string GetCurrentTime(string name)
{
return"Hello " + name + Environment.NewLine + "The Current Time is: " + DateTime.Now.ToString();
}
ReactJS JSX file
Following is the ReactAJAX class which extends ReactJS Component.
Constructor
Inside the Constructor, a variable Name is declared and assigned to the state.
Finally, the event handlers for the OnChange and OnClick i.e. updateName and handleClick respectively are bound.
Render function
The Render function returns an HTML TextBox and a Button element. The TextBox has been assigned with an OnChange event handler while the Button has been assigned with an OnClick event handler.
Event Handlers
OnChange
When the contents of the TextBox are changed, the updateName event handler is triggered and it sets the value of the TextBox in the Name variable of the state using the setState function.
OnClick
When the Button is clicked, an XmlHttpRequest (XHR) AJAX request is made to the WebMethod and the value of the Name variable is sent to it.
The received response i.e. the Name and the Current DateTime is displayed in JavaScript Alert Message Box.
Finally, the ReactDOM.render function, render’s the class in a HTML DIV with ID dvMessage.
class ReactJS extends React.Component {
constructor(props) {
super(props);
this.state = { Name: "" };
this.updateName = this.updateName.bind(this);
this.handleClick = this.handleClick.bind(this);
}
updateName(e) {
this.setState({ Name: e.target.value });
}
handleClick() {
var request;
if (window.XMLHttpRequest) {
//New browsers.
request = new XMLHttpRequest();
}
elseif (window.ActiveXObject) {
//Old IE Browsers.
request = new ActiveXObject("Microsoft.XMLHTTP");
}
if (request != null) {
request.open("POST", "/Default.aspx/GetCurrentTime", false);
var params = "{name: '" + this.state.Name + "'}";
request.setRequestHeader("Content-Type", "application/json");
request.onload = function () {
if (request.readyState == 4 && request.status == 200) {
var response = JSON.parse(request.responseText);
alert(response.d);
}
}.bind(this);
request.send(params);
}
}
render() {
return (
<div>
<input type="text" onChange={this.updateName}></input>
<input type="button" onClick={this.handleClick} value="Get Current Time"></input>
</div>
);
}
}
ReactDOM.render(
<ReactJS />,
document.getElementById('dvMessage')
);
HTML Markup
The HTML Markup consists of an HTML DIV dvMessage inside which the message from the ReactJS will be displayed.
Then the following necessary JS files for ReactJS application are inherited.
1. react.development.js
2. react-dom.development.js
Finally, the ReactJS.jsx file is inherited.
<div id="dvMessage"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.development.js"></script>
<script src="Scripts/ReactJS.jsx"></script>
That’s it and the application is ready to run.
Screenshot
![Call WebMethod from ReactJS in ASP.Net Web Forms]()
Downloads
