Question

I am working with jQuery. I need to insert data into database in webapi (mvc4) here I have data in <p> now I need to insert that data into database.

Here is my code:

 <script type="text/javascript">
     $(document).ready(function () {
     $('#btndiv1').hide();
     $('#btndiv').hover(function () {
        $('#btndiv1').show();
    });
    });
 </script>
     <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(dataToPost);
            ale(value);
            $.ajax({
                type: "POST",
                url: "/CkeditrorData/create",
                contentType: "application/json; charset=utf-8",
                data: dataToPost,
                dataType: "json",
                success: function () {
                    // do what you want on success.


                }
            });
        });
    });

</script>

and here is my html:

     <h4>design your own text</h4>
<div id="btndiv" >
    <div id="btndiv1" style="height:auto;width:auto; border:solid 1px;">
    <textarea  rows="10"   id="editor1" "></textarea>
    <p id="text" ></p>
        </div>
</div>

Now I have data in <p> tag above; I need to insert data into the database. How could I do this? Could you please help me?

Answer 1

You need to make an ajax call to your action, which will make an insert to the database.

Below is a very simple ajax call,

var Contact = {
Lastname: 'Smith',
Firstname: 'John'
};

var dataToPost = JSON.stringify(Contact);

$.ajax({
    type: "POST",
    url: "/contacts/create",
    contentType: "application/json; charset=utf-8",
    data: dataToPost,
    dataType: "json",
    success: function(){
        // do what you want on success.
    }
});

On server create a class with a similar structure for the contact class.

public class Contact
{
public string Lastname { get; set; };
public string Firstname { get; set; };
}

below is the action to which the values will be posted using jquery.

[HttpPost]
public string Create(Contact contact)
{
    // insert this contact to db.
}