I am performning CRUD opeartions in .net core mvc project by using an api , and List's to store all data instead of a database.I want to call the api directly from my html page using jquery and ajax.But now iam stuck with Edit operation(which is a POST method).In the edit page when iam clicking on the Save button its just refreshing the page and nothing happens.
This is the jquery,Ajax gievn in the view page for editing
@section Scripts{
<script>
var id = localStorage.getItem("empid");
$.ajax({
contentType: "application/json",
type: "GET",
url: "https://localhost:44347/api/Values/Edit/" + id,
success: function (data) {
$('#id').val(data.id)
$('#fname').val(data.fname)
$('#lname').val(data.lname)
$('#location').val(data.location)
$('#contact').val(data.contact)
$('#email').val(data.email)
$('#password').val(data.password)
$('#roles').val(data.roles)
},
error: function (jqXHR, textStatus, errorThrown) {
alert("alertt");
$("#postResult").val(jqXHR.statusText);
}
});
$('#save').click(function () {
var obj = {};
obj.id = $('#id').val();
obj.fname = $('#fname').val();
obj.lname = $('#lname').val();
obj.location = $('#location').val();
obj.contact = $('#contact').val();
obj.email = $('#email').val();
obj.password = $('#password').val();
obj.roles = $('#roles').val();
$.ajax({
type: "POST",
url: "https://localhost:44347/api/Values/Save",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(obj),
success: function (data) {
window.location.href = "/Home/Details/";
},
error: function (jqXHR, textStatus, errorThrown) {
alert("Error occured");
$("#postResult").val(jqXHR.statusText);
}
});
});
</script>
}
This is the api function that is to be invoked while clicking the save button in edit page
[HttpPost("Save")]
public IActionResult Save(StudentModel student)
{
obj1 = new StudentModel();
obj1 = obj2.Save(student);
if (obj1 != null)
{
return Ok(obj1);
}
return null;
}
Use this and see it if it works.
<h1>Register</h1>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id="form">
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputfname">id</label>
<input type="text" class="form-control" name="id" id="id" readonly>
</div>
<div class="form-group col-md-6">
<label for="inputlname">fname</label>
<input type="text" class="form-control" name="fname" id="fname">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputfname">lname</label>
<input type="text" class="form-control" name="lname" id="lname">
</div>
<div class="form-group col-md-6">
<label for="inputlname">Location</label>
<input type="text" class="form-control" name="location" id="location">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputemail">contact</label>
<input type="text" class="form-control" name="contact" id="contact">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputcontact">Email</label>
<input type="email" class="form-control" name="email" id="email">
</div>
<div class="form-group col-md-6">
<label for="inputemail">password</label>
<input type="password" class="form-control" name="password" id="password">
</div>
</div>
<div class="form-group col-md-4">
<label for="inputrole">Role</label>
<input type="text" class="form-control" name="roles" id="roles" readonly>
</div>
</div>
<div class="form-group">
<div class="form-check">
</div>
</div>
<button type="button" class="btn btn-primary" id="save">Save</button>
</form>
</body>
</html>
@section Scripts{
<script>
var id = localStorage.getItem("empid");
$.ajax({
contentType: "application/json",
type: "GET",
url: "https://localhost:44347/api/Values/Edit/" + id,
success: function(data) {
$('#id').val(data.id)
$('#fname').val(data.fname)
$('#lname').val(data.lname)
$('#location').val(data.location)
$('#contact').val(data.contact)
$('#email').val(data.email)
$('#password').val(data.password)
$('#roles').val(data.roles)
},
error: function(jqXHR, textStatus, errorThrown) {
alert("alertt");
$("#postResult").val(jqXHR.statusText);
}
});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments