In this article i have explained with an example, Trigger AJAX call on Button Click in ReactJS using ASP.Net Core.
Trigger AJAX call on Button Click in ReactJS using ASP.Net Core
Configuring the JSON Serializer setting
In The first step is to configure the JSON Serializer settings in the Startup.cs file.
Open the Startup.cs class from the Solution Explorer window.
Then inside the ConfigureServices method, you will have to add the following code.
publicvoid ConfigureServices(IServiceCollection services)
{
services.AddControllersWithViews()
.AddJsonOptions(options => options.JsonSerializerOptions.PropertyNamingPolicy = null);
}
Model
It is a Model class named PersonModel with two properties i.e. Name and DateTime.
public class HomeController : Controller
{
// GET: Home
public IActionResult Index()
{
return View();
}
[HttpPost]
public JsonResult AjaxMethod([FromBody] PersonModel person)
{
person.DateTime = DateTime.Now.ToString();
return Json(person);
}
}
Controller
The Controller consists of two Action methods.
public class HomeController : Controller
{
// GET: Home
public IActionResult Index()
{
return View();
}
[HttpPost]
public JsonResult AjaxMethod([FromBody] PersonModel person)
{
person.DateTime = DateTime.Now.ToString();
return Json(person);
}
}
ReactJS JSX file
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 contains of an HTML DIV dvMessage inside which the message from the ReactJa will be displayed.
Then the following mandatory JS files for ReactJs application are inherited.
1. react.development.js
2. react-dom.development.js
Finally, the ReactAJAX.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/ReactAJAX.jsx”)”></script>
</body>
</html>
