@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>
How To Create Post Axios Reuqest In Asp.Net Core 2.0
</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script>
function OnSubmit() {
let url = "/Axios/GetData";
let users = {
Name: document.getElementById("txtName").value,
Address: document.getElementById("txtAddress").value,
PhoneNo: document.getElementById("txtPhone").value
};
axios({
method: 'post',
url: url,
data: users
}).then
(data => {
document.getElementById("Name").innerHTML = (data.data.name)
document.getElementById("Address").innerHTML = (data.data.address)
document.getElementById("PhoneNo").innerHTML = (data.data.phoneNo)
}).catch(err => alert(err))
}
</script>
</head>
<body>
<div id="New_App">
<div class="site-section bg-light">
<div class="container">
<div class="row">
<div class="col-md-7 mb-5" data-aos="fade">
<form action="#" class="p-5 bg-white">
<div class="row form-group">
<div class="col-md-6 mb-3 mb-md-0">
<input type="text" id="txtName" placeholder="Enter your Name" class="form-control rounded">
</div>
</div>
<div class="row form-group">
<div class="col-md-6 mb-3 mb-md-0">
<input type="text" id="txtAddress" placeholder="Enter your Address" class="form-control rounded">
</div>
</div>
<div class="row form-group">
<div class="col-md-6 mb-3 mb-md-0">
<input type="text" id="txtPhone" placeholder="Enter your Phone" class="form-control rounded">
</div>
</div>
<div class="row form-group">
<div class="col-md-6 mb-3 mb-md-0">
<input type="button" value="Submit" onclick="OnSubmit()" class="btn btn-primary py-2 px-4 text-white">
</div>
</div>
<br />
</form>
Name: <span id="Name"> </span>
<br />
Address: <span id="Address"> </span>
<br />
PhoneNo: <span id="PhoneNo"> </span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>