POST method not working in .NET Core MVC while using Jquery , AJAX for calling api from View(html page)?

Question

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;
        }

its just refreshing the page and nothing happens - typically happens when you have a form and think just adding javascript to the click/submit action won't do a regular form submit ... you need to prevent the default event handling .... i.e. $('#save').click(function (e) { e.perventDefault(); rest of your code - or add $('form').submit(function(e) { e.perventDefault();} — Jaromanda X
– Jaromanda X, Commented Feb 27, 2020 at 7:34

double-beep · Accepted Answer · 2020-02-27 08:46:16Z

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);
    }
  });

Mehrdad · Accepted Answer · 2020-02-27 07:50:38Z

0

html buttons have a type property which is 'submit' by default, change your button type to 'button' to solve your refresh problem.

<button type="button">...</button>

answered Feb 27, 2020 at 7:50

Mehrdad

1,74114 silver badges25 bronze badges

Collectives™ on Stack Overflow

POST method not working in .NET Core MVC while using Jquery , AJAX for calling api from View(html page)?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related