如何将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

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

让我们创建一个视图，该视图将发起 AJAX 调用到 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()" />

输出 -

- ramiramilu

---

突出显示最重要的部分"data: JSON.stringify({ coordinates: model }),"。 - Alexander Taran

谢谢，我测试了一下，我的控制器动作接收到了变量。另外一个问题是，如何使用接收到的参数渲染另一个视图。 - CadmusX

公共的ActionResult CreateCover(ImageCoordinates coordinates) { ViewData.Model = coordinates; 返回视图(); } 这是我的视图代码，但我仍然停留在我发送参数的页面。 在调试中，我在操作中接收到了我的变量，但视图没有呈现。 - CadmusX

@CadmusX，我很高兴你解决了这个问题。如果有其他问题，请单独发布提问。 - ramiramilu

@ramiramilu 我可以让它在一个控制器上运行，但是能否将其传递给多个控制器？ - D.M

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

---

不需要反序列化，MVC已经内置了JSON模型绑定器。 - Alexander Taran

@AlexanderTaran，我部分地同意。如果你对于传递字典方面稍作尝试，你很快就会得出结论，即某些解析工作必须明确地在控制器中完成。 - Andrei V

@AndreiV 首先感谢您的帮助和时间。我尝试使用您的代码，但是收到了500服务器错误。 - CadmusX

POST http://localhost:42771/dashboard/createcover 500 (Internal Server Error) jquery-1.7.1.min.js:4 send jquery-1.7.1.min.js:4 f.extend.ajax jquery-1.7.1.min.js:4 submitForm Imgedit:21 onclick我应该如何执行 $.ajax 函数？我将其粘贴到 submitForm() 函数中，当按钮被点击时调用。 - CadmusX

@AndreiV 好的。仍然非常感谢你的帮助。 - CadmusX

Answer 3

如果你不想使用AJAX或者想要一个快速的解决办法，你也可以尝试添加一个隐藏字段，然后使用Javascript(JS)将值填充到该隐藏字段中。

    @Html.HiddenFor(m=>Model.ImageCoordinates.x1)
    <button type="submit">Submit Coordinates</button>

这将在HTML侧生成一个id为"ImageCoordinates_x1"的“input”标签，然后使用JS

function refreshData(selected) {
            myData = {
                x1: selected.x1,
                x2: selected.x2,
                y1: selected.y1,
                y2: selected.y2
            };
            return myData;
           
}

let coordinateData = refreshData(selected)
let x1 = document.getElementById("ImageCoordinates_x1");
x1.value = coordinateData .x1;

您现在可以通过此功能将x1坐标信息发送到服务器。要向其他坐标发送数据，您需要为它们创建隐藏表单，并使用JS填充输入标签的值。

- user16043284