In this article I will explain with an example, how to implement AJAX call using ReactJS in ASP.Net MVC.
Software Information
This article makes use of Visual Studio 2019, MVC 5 and .Net Framework 4.5.
Integrating ReactJS with ASP.Net MVC
Model
Following is a Model class named PersonModel with two properties i.e. Name and DateTime.
public class PersonModel
{
///<summary>
/// Gets or sets Name.
///</summary>
public string Name { get; set; }
///<summary>
/// Gets or sets DateTime.
///</summary>
public string DateTime { get; set; }
}
Controller
The Controller consists of two Action methods.
Action method for handling GET operation
Inside this Action method, simply the View is returned.
Action method for handling XmlHttpRequest (XHR) AJAX operation
This Action method handles the AJAX call made from the XmlHttpRequest (XHR) function inside the ReactJS class.
Note: The following Action method handles AJAX calls and hence the return type is set to JsonResult.
The value of the name parameter is assigned to the Name property of the PersonModel object along with the Current DateTime and finally the PersonModel object is returned back as JSON to the XmlHttpRequest (XHR) function inside the ReactJS class.
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
[HttpPost]
public JsonResult AjaxMethod(string name)
{
PersonModel person = new PersonModel
{
Name = name,
DateTime = DateTime.Now.ToString()
};
return Json(person);
}
}
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 Controller’s Action method 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 ReactAJAX 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();
}
else if (window.ActiveXObject) {
//Old IE Browsers.
request = new ActiveXObject("Microsoft.XMLHTTP");
}
if (request != null) {
request.open("POST", "/Home/AjaxMethod", 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("Hello: " + response.Name + " .\nCurrent Date and Time: " + response.DateTime);
}
}.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(
<ReactAJAX />,
document.getElementById('dvMessage')
);
View
The View 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.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<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="@Url.Content("~/Scripts/ReactJS.jsx")"></script>
</body>
</html>
That’s it and the application is ready to run.
Screenshot
![Implement AJAX call using ReactJS in ASP.Net MVC]()
Downloads
