How to receive data from ajax send() method in a controller

Question

I'm trying to serve the data in the ASP.NET MVC controller sent by ajax POST. On client side I use traditional XMLHttpRequest object and send() method instead of jQuery.ajax().

Do you know how to get variables from send() in controller? In documentation http://www.xul.fr/XMLHttpRequest-object.html I've read that it has to be string.

My client-side:

    var data1 = "some string";
    var data2 = "other string";

    var xhr = new XMLHttpRequest();
    xhr.open("POST", "https://localhost:44301/Home/SaveDataInDB", true);
    xhr.send(data1, data2);
    xhr.onreadystatechange = saved;

My server-side:

[HttpPost]
    public JsonResult SaveDataInDB(string data1, string data2) 
    {
        var dbobj = new DbObj
        {                
            field1 = data1,
            field2 = data2
        };

        if (User.Identity.IsAuthenticated)
        {
            dbobj.user = User.Identity.Name;
        }
        else 
        {
            dbobj.user = "anonymous";
        }


        db.DbObj.Add(dbobj);
        db.SaveChanges();

        return Json(true);
    }

Answer 1

You can do like this, lets say this is your xmlHttpRequest -

<script type="text/javascript">
    var request = new XMLHttpRequest();
    var o = new Object();
    o.data1 = "Rami";
    o.data2 = "Ramilu";

    request.open('POST', '/Home/xhr', true);
    request.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
    request.setRequestHeader('Content-Length', JSON.stringify(o).length);
    request.onreadystatechange = function () {
        if (request.readyState == 4 && request.status == 200) {
            alert(request.responseText);
        }
    }
    request.send(JSON.stringify(o));
</script>

On the server side, have a ViewModel defined this way -

public class XhrViewModel
{
    public string data1 { get; set; }
    public string data2 { get; set; }
}

Then your controller action which want to get this data -

    public ActionResult xhr(XhrViewModel model)
    {
        return Content("success", "text/plain");
    }

And the output would be -