How to send js variables to mvc controller

asp.net-mvc, javascript, jquery

Solution

Here goes solution -

Model -

public class ImageCoordinates
{
    public int x1 { get; set; }
    public int x2 { get; set; }
    public int y1 { get; set; }
    public int y2 { get; set; }
}

Action -

    public ActionResult CreateCover(ImageCoordinates coordinates)
    {
        return null;
    }

Lets create a View which will make the AJAX call to the Action.

<script src="~/Scripts/jquery-1.10.2.min.js"></script>

<script>
    function submitForm() {

        var model = new Object();
        model.x1 = 120;
        model.y1 = 240;
        model.x2 = 360;
        model.y2 = 480;


        jQuery.ajax({
            type: "POST",
            url: "@Url.Action("CreateCover")",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify({ coordinates: model }),
            success: function (data) {
                alert(data);
            },
            failure: function (errMsg) {
                alert(errMsg);
            }
        });
    }
</script>

<input type="button" value="Click" onclick="submitForm()" />

Output -

Problem

I`m new to client-server programming concepts. What I need, to send four js vars to my MVC 3 controller action. ``` $(document).ready(function() { var $jcrop; $('#image').Jcrop({ bgColor: 'red', onSelect: refreshData }, function () { $jcrop = this; }); function refreshData(selected) { myData = { x1: selected.x1, x2: selected.x2, y1: selected.y1, y2: selected.y2 }; } }); ``` So i get my vars in browser. What I have on server side is: ``` public ActionResult CreateCover(ImageCoordinates coordinates) { ViewData.Model = coordinates; return View(); } public class ImageCoordinates { public int x1 { get; set; } public int x2 { get; set; } public int y1 { get; set; } public int y2 { get; set; } } ``` Is there an easy way to post my four params from js to my action? I tried to use couple examples from this site, using $.ajax Like this ``` $.ajax({ url: '/dashboard/createcover', type: 'POST', data: JSON.stringify(myData), contentType: 'application/json; charset=utf-8', success: function (data) { alert(data.success); }, error: function () { alert("error"); }, async: false }); ``` But it does not worked, i received 0 0 0 0 in my action. But honestly I`m not even sure how to call this jquery function. Should i call it by clicking the button, or it auto calls when i post the form? And are there other methods to send this params?

Original source