How to update in webapi using jquery?

Question

Hi all i am working on webapi now here i need to update data right i am having table (entitymodel)

         id  | value
          1  | previous data
          2  | new data

now i need to update the table means iam updating ckeditor data iam some text into ckeditor and once mouseleves the ckeditor div i need to save that data into db so everything is fing when iam get moving to controllers i got controllers empty form ajax call could u plz help me

here my ajaxcall:

 <script type="text/javascript">
$(document).ready(function () {
var editor = CKEDITOR.editor.replace('editor1');
$('#btndiv').mouseleave(function (event) {
    $('#btndiv1').hide("slow");
        alert(1);
        var value = editor.getData();
        $('#btndiv').append(value);
    // send your ajax request with value

        var dataToPost = JSON.stringify(value);
        alert('hi');
        alert(dataToPost+"got data");
        $.ajax({
            type: "Put",
            url: "/api/UpdateCkeditor",
            contentType: "application/json; charset=utf-8",
            data: dataToPost,
            dataType: "json",
            success: function () {
                // do what you want on success.


            }
        });
    });
});
</script>

here iam having data (value) od when it moves to controllers it shows empty

here my controllers:

      public void Put(ckeditormodels value)
    {
        webapiEntities db = new webapiEntities();

        var empObj = db.ckeditorDatas.First(c => c.value ==value.value);
        empObj.value = value.value;

        db.SaveChanges();

    }

here my models:

     public class ckeditormodels
{
    public int id { get; set; }
    public string value { get; set; }
 }

even it showing error and in controolers showing some error like object reference not se to an object of instance plz help me to do this work thanks in advance

Troy Alford · Answer 1 · 2013-12-03T08:31:15.677

You aren't getting model binding because of the way you've structured your .ajax() call's data property. Essentially, what you are posting right now is just a bunch of plain text, not a JSON object.

Try this instead:

var id = getId(); // Implement this to actually get your ID.

$.ajax({
    type: "Put",
    url: "/api/UpdateCkeditor",
    contentType: "application/json; charset=utf-8",
    data: { 'id': id, 'value': dataToPost },
    dataType: "json",
    success: function () {
        // do what you want on success.
    }
});

Notice the way the data property is formed - it is an object which exactly matches the signature of the model you are wanting to bind to server-side.

I would also suggest in your server-side method signature, that you change it to:

public void Put([FromUri]int id, [FromBody]ckeditormodels value) {
    value.id = id;
    webapiEntities db = new webapiEntities();

    var empObj = db.ckeditorDatas.First(c => c.value == value.value);
    empObj.value = value.value;

    db.SaveChanges();
}

The reason is that you are making a change to an existing object - and from a RESTful standpoint, that is better done with a URL that indicates which unique server-side resource (record ID) is being updated. This is just a methodology / stylistic thing, though - it won't have any real bearing on your data binding.

How to update in webapi using jquery?

1 Answers1