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

Posted 2023-02-22

【中文标题】如何将js变量发送到mvc控制器

【英文标题】：How to send js variables to mvc controller

【发布时间】：2014-03-17 21:47:09

【问题描述】：

我是客户端-服务器编程概念的新手。我需要什么，将四个 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 函数。我应该通过单击按钮调用它，还是在我发布表单时自动调用它？ 还有其他方法可以发送此参数吗？

【参考方案1】：

在您不想使用 AJAX 或想要快速解决的情况下，您也可以尝试添加隐藏字段，然后使用 javascript(JS) 填充该隐藏字段中的值。

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

这将在 html 端生成一个 id ="ImageCoordinates_x1" 的“输入”标签 然后用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 填充输入标签的值

【参考方案2】：

这里有解决方案 -

型号 -

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

输出 -

【讨论】：

突出显示最重要的部分“数据：JSON.stringify(坐标：模型)，”

谢谢，我对此进行了测试，并在我的控制器操作中收到了变量。另一个问题是，如何使用我收到的参数呈现另一个视图。

public ActionResult CreateCover(ImageCoordinates 坐标) ViewData.Model = 坐标；返回视图（）；这是我的视图代码，但我仍然在我发送参数的那个页面上。在调试中，我收到了我的 vars，但视图没有呈现。

@CadmusX，很高兴你解决了这个问题。如有其他问题，请将它们作为单独的问题发布。

@ramiramilu 我可以在一个控制器上使用它，但是否可以将它传递给多个控制器？

【参考方案3】：

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

$.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 的引用。

【讨论】：

Nah.. MVC 内置 json 模型绑定器，无需反序列化

@AlexanderTaran，我部分同意。如果您对传递的字典稍加尝试，您很快就会得出结论，一些解析必须在控制器中显式完成。

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

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() funk 中。

@AndreiV 好的。不过，非常感谢您的帮助。