How to pass data to ajax function with json?

Question

I need to get an id from the URL , comment value from textbox, save it to database and show on page with ajax. Im not sure how should look correct syntax in my controller and ajax function.

Controller

 [HttpPost]
    public JsonResult AddComment(int id, string comment)
    {
        if (ModelState.IsValid)
        {
            return Json(true); // what should be here 
        }
        return Json(true);
    }

Ajax

    $('#submit').click(function () {
        $.ajax({
            url: '/Form/AddComment',
            method: 'POST',
            data: {
                id: 4,               //how to get id from url?
                comment: 'test'      //how to get textbox value?
            },
            success: function (data) {
                console.log(data)
            },
            error: function (a, b, c) {
                console.log('err')
            }
        })
    });

this just show me that it work but i dont know how to move forward

Answer 1

My solution looks like this:

controller:

       [HttpPost]
    public JsonResult AddComment(int id_usr,string comment)
    {
        if (ModelState.IsValid)
        {
            Comments kom = new Comments();
            kom.DateComment = DateTime.Now;
            kom.Id_usr = id_usr;
            kom.Comment = comment;
            db.Comments.Add(kom);
            db.SaveChanges();
            return Json(kom);
        }
        return Json(null);

    }

View

var url = window.location.pathname;
var idurl = url.substring(url.lastIndexOf('/') + 1);
$('#submit').click(function () {
        console.log('click')
        $.ajax({
            url: '/form/AddComment',
            method: 'POST',
            data: {
                comment: $("#Comments_Comment").val(),
                id_usr: idurl,
            },
            success: function (data) {
                console.log(data),

thank you all for guiding me to the solution

Answer 2

Based upon your requirement, you would have to do the appropriate form handling at client side in order to get your variables like id and comment. You can use strongly typed model binding to get your form values and process them on submit or you can use JavaScript techniques to process your form variables. To extract out id from a URL, you can use a Regular Expression or other JavaScript string parsing techniques. I am giving you a simple example of getting your id from a URL and comment from a text box using JavaScript:

Your input control would look like:

<input type="text" id="commentBox" name="Comment" class="form-control" />

In order to achieve your desired functionality using AJAX to POST your form variables to controller, refer to the following code snippet:

AJAX:

<script type="text/javascript">

var url = 'http://www.example.com/4'; //Example URL string
var yourid = url.substring(url.lastIndexOf('/') + 1);
var yourcomment= document.getElementById('commentBox').value;

var json = {
            id: yourid, //4
            comment: yourcomment 
           };

$('#submit').click(function (){
    $.ajax({
        url: '@Url.Action("AddComment", "Form")',
        type: "POST",
        dataType: "json",
        data: { "json": JSON.stringify(json)},
        success: function (data) {
         console.log(data)
         },
         error: function (data) {
         console.log('err')
         },
    });
};
</script>

And you can get your values in your Controller like this:

using System.Web.Script.Serialization;

[HttpPost]
public JsonResult AddComment(string json)
{
    if (ModelState.IsValid)
    {
        var serializer = new JavaScriptSerializer();
        dynamic jsondata = serializer.Deserialize(json, typeof(object));

        //Get your variables here from AJAX call
        string id= jsondata["id"];
        string comment=jsondata["comment"];

        // Do something here with your variables. 
    }
    return Json(true);
}