ASP.NET: How to Update String data in Web Api Controller using Jquery Ajax?

Question

Hei everyone. i have project to make communication between my website and my application using web api. i have success to get data from api controller in my application and browser (via url). but i can't update the data in my website. for example: i write a text on input box and click the write button. when i click read button the data not change.

the data i want to update is string data. here is my code

Web Api with read/write template

public class ActionController : ApiController
    {
        public string text1 = "Read Data Success";
        // GET: api/Action
        public string Get()
        {          
            return text1;
        }

        // GET: api/Action/5
        public string Get(int id)
        {          
            return "value" + id;
        }

        // POST: api/Action
        public void Post([FromBody]string value)
        {
            text1 = value;
        }

        // PUT: api/Action/5
        public void Put(int id, [FromBody]string value)
        {

        }

        // DELETE: api/Action/5
        public void Delete(int id)
        {

        }
    }

Html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Server Manager</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link rel="shortcut icon" href="favicon.ico" />
    <script src="Scripts/Action.js"></script>


</head>
<body>
    <div>
        <input id="Button1" type="button" value="write" />
        <input id="Button2" type="button" value="read" />
        <input id="TextIn1" type="text" />
        <p id="text1">Text 1</p>              

    </div>

</body>
</html>

Jquery

$(document).ready(function () {
    $("#Button1").click(function () {
        var TextIn = $("#TextIn1").val();
        $.ajax({
            type: 'POST',
            url: 'api/Action',
            dataType: 'text',
            data: TextIn,
            success: function (response) {
                alert("Writed " + response);
            },
            error: function (response) {
                alert(response.responseText);
            }

        });
        console.log("write complete");
    });
    $("#Button2").click(function () {     

        $.ajax({
            url: 'api/Action',             
            type: 'GET',
            dataType: 'json',
            success: function (data, textStatus, xhr) {
                $("#text1").text("Get " + data);
            },
            error: function (responese) {
                alert(responese.responseText);

            }  
        });  
    console.log("read complete");
});

});

i know my code looks weird or ambiguous. because this is my first time in web programming

text1 variable is initialized with value "Read Data Success" on every request, because it's a variable of class, and class is created every time you send request — feihoa
– feihoa, Commented Jul 15, 2019 at 18:43
its fixed now. i follow this answer stackoverflow.com/questions/26543912/… — Nyako
– Nyako, Commented Jul 17, 2019 at 8:09

aozogul · Accepted Answer · 2019-07-15 18:40:03Z

0

Simply remove the [FromBody] attribute from the Post method.

edited Jul 15, 2019 at 18:40

answered Jul 15, 2019 at 18:18

aozogul

6216 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nyako Over a year ago

it's not working. i got error message {"Message":"The requested resource does not support http method 'POST'."}

Andrei Dragotoniu · Accepted Answer · 2019-07-17 14:52:20Z

this is never going to work.

WebAPI is stateless, this means that requests are independent and separate and there is no state maintained between requests.

what you are doing is this:

send POST request, text1 gets initialized and updated correctly
send GET request, text1 is initialized again with the default value and returned as such.

Typically when you POST something, some data will be created / updated in a database, for example.

a GET request comes in, goes to the db and gets the data as it is, after the change.

If you want to see changes happening, then you can do something else, update a text file on disk for example and when you issue the GET request then you read from the same file. You will then see the changes properly. Point is, use something real for storage and understand what stateless means for an API.

Collectives™ on Stack Overflow

ASP.NET: How to Update String data in Web Api Controller using Jquery Ajax?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related