如何将js变量发送到mvc控制器

Question

我是客户端-服务器编程概念的新手。我需要的是将四个 js 变量发送到我的 MVC 3 控制器操作。

     $(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
            };
        }
    });

所以我在浏览器中获取了我的变量。

我在服务器端的是：

     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; }
}

有没有一种简单的方法可以将我的四个参数从 js 发布到我的操作中？我尝试使用此站点中的几个示例，使用 $.ajax

像这样

        $.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
        });

但它没有用，我在我的行动中收到了 0 0 0 0。但老实说，我什至不确定如何调用这个 jquery 函数。我应该通过单击按钮来调用它，还是在我发布表单时自动调用它？还有其他方法可以发送此参数吗？

原文由 CadmusX 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是解决方案 -

模型 -

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

行动 -

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

让我们创建一个视图，它将对 Action 进行 AJAX 调用。

 <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()" />

输出 -

原文由 ramiramilu 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

尝试更改传递给控制器的对象的名称：

 $.ajax({
    url: '/dashboard/createcover',
    type: 'POST',
    data: {coordinates : JSON.stringify(myData)}, //change here
    contentType: 'application/json; charset=utf-8',
    success: function (data) {
        alert(data.success);
    },
    error: function () {
        alert("error");
    },
    async: false
});

请注意，这会将值作为 JSON 对象发布。您需要像这样修改您的控制器：

 public ActionResult CreateCover(string jsonCoordinates) {
    ImageCoordinates coordinates = JsonConvert.DeserializeObject<ImageCoordinates >(jsonCoordinates);

    ViewData.Model = coordinates;
    return View();
}

您还需要添加对 Newtonsoft.Json 的引用。

原文由 Andrei V 发布，翻译遵循 CC BY-SA 3.0 许可协议