Question

我目前正致力于使用MVC模式的ASP.net Web应用程序。我已经设置了一个页面，人们可以在其中添加项目到gridstack部分并拖动它们（Gridstack是一个插件来创建可拖动的框/对象）。我的目标是将这些盒子的最终坐标发送给我的控制器：

function saveData() {
    var pagePositions = [];

    // Fill our array
    $('.grid-stack-item.ui-draggable').each(function () {
        var $this = $(this);
        pagePositions.push({
            x: $this.attr('data-gs-x'),
            y: $this.attr('data-gs-y'),
            w: $this.attr('data-gs-width'),
            h: $this.attr('data-gs-height'),
            content: $('.grid-stack-item-content', $this).html()
        });
    });

    // Convert array to object
    var pagePosData = toObject(pagePositions);

    alert(pagePosData);

    $.ajax({
        type: "POST",
        url: "savePage",
        data: { positions: JSON.stringify(pagePosData) }
    });

} function toObject(arr) {
    var rv = {};
    for (var i = 0; i < arr.length; ++i)
        if (arr[i] !== undefined) rv[i] = arr[i];
    return rv;
}

上面的代码填充给定html元素的属性并将它们放入数组中。根据互联网上的几个主题，我假设发送数组引起了麻烦，所以我插入了一个将数组转换为javascript对象（键值对）的函数。我通过AJAX调用将它们发送到我的控制器，这导致错误代码500：

    [HttpPost]
    public string savePage(string positions)
    {
        //some code
        var json = positions;
        var test = "";
        CreatePagemodelJson obj = new JavaScriptSerializer().Deserialize<CreatePagemodelJson>(positions.ToString());
        //var jsonObject = JsonConvert.DeserializeObject<CreatePagemodel>(positionsJson.ToString());

        return "";
    }

我在控制器内设置断点以读取从参数位置得到的值，但它甚至没有到达那一点。我尝试为Json文件设置模型，但问题是post调用返回动态json格式。

更新我设法让它与以下帖子一起工作。使用以下结构，我根据我的模型将结果作为数组得到。

function saveData() {
    var pagePositions = [];

    // Fill our array
    $('.grid-stack-item.ui-draggable').each(function () {
        var $this = $(this);
        pagePositions.push({
            x: $this.attr('data-gs-x'),
            y: $this.attr('data-gs-y'),
            w: $this.attr('data-gs-width'),
            h: $this.attr('data-gs-height'),
            content: $('.grid-stack-item-content', $this).html()
        });
    });

    alert(pagePositions);

    $.ajax({
        type: "POST",
        url: "savePage",
        contentType: 'application/json',
        data: JSON.stringify(pagePositions)
    });
}

public class Position
{
    public string x { get; set; }
    public string y { get; set; }
    public string w { get; set; }
    public string h { get; set; }
    public string content { get; set; }
}

[HttpPost]
public ActionResult savePage(IEnumerable<Position> positions)
{
    //some code
    return View("SomeView");
}

参数位置成功返回发送的pagePositions数组：

我尝试在没有JSON.stringify（pagePositions）和ContentType的情况下发送数据：＆＃39; application / json＆＃39;选项，但我在控制器上的参数中得到一个null返回。

Answer 1

这里有很多要指出的事情。

关于你当前的问题。

您发送的数据不是字符串。 positions正在创建一个JavaScript对象，其属性为function saveData() { var pagePositions = []; // Fill our array $('.grid-stack-item.ui-draggable').each(function () { var $this = $(this); pagePositions.push({ x: $this.attr('data-gs-x'), y: $this.attr('data-gs-y'), w: $this.attr('data-gs-width'), h: $this.attr('data-gs-height'), content: $('.grid-stack-item-content', $this).html() }); }); $.ajax({ type: "POST", url: "savePage", data: JSON.stringify(pagePositions), contentType: "application/json" }); } public class Position { public int X { get; set; } public int Y { get; set; } public int W { get; set; } public int H { get; set; } public string Content { get; set; } } [HttpPost] public string savePage(Position[] positions) { //some code return ""; }，其值为对象的序列化版本。
您应该能够创建一个c＃类并接受它作为您的控制器方法参数，并更接近您期望的结果。这看起来如下：

公共课Foo { public string Positions {get;组; } }

public string savePage（Foo位置）
或者，您可以更新您的方法，将请求正文作为字符串获取，如this SO answer

更重要的是，看起来好像你遇到了一些错误的信息。将数组传回控制器不应该有任何问题。同样，您将需要一个c＃类来模拟您的预期数据类型。你没有在你的问题中列出那些，所以很难确定你需要更新你的代码，但我会建议更像以下内容：

<?php
    $day = date('l'); 
    $time = date('H:i');
    $hour = date('H');

?>

<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="Project Management Training and Consulting">
        <meta name="keywords" content="PMP, CAPM, Agile, ITIL, PMI-ACP, SCRUM, Waldorf, MD, Washington, DC, Alexandria, VA">
        <meta name="author" content="Vince McKeown">
        <title>Jaza Solutions - Home PHP</title>
        <link rel = "stylesheet" type = "text/css" href = "jazasolutions.css" /> 
    </head>
    <body>
        <div id = "header">
            <img src="jazasolutions2.png" alt = "Jaza Solutions, LLC">
        </div>
        <nav>
        <div id="nav">
            <ul>        
                <li><a href=JazaSolutionsContact.html>Contact</a></li>
                <li><a href=JazaSolutionsAboutUs.html>About Us</a></li>
                <li><a href=JazaSolutionsCourses.html>Courses</a></li>
                <li><a href=index.php>Home</a></li>
            </ul>
        </div>
        </nav>
        <div>
            <img class="imageSideRight" src="Meeting.jpeg" alt = "Jaza Solutions, LLC">
        </div>
        <div class="sideRight">
            <h2> Upcoming Classes </h2>
            <p class="microsoft marquee"><span>Enrollment discounted at 50% for a limited time for the <font color="red">6/25/18</font color> PMP boot camp.</span></p>
            <p> <font color="red">6/25/18</font> PMP Bootcamp: Waldorf, MD </p> 
            <p> <font color="red">7/23/18</font> PMP Bootcamp: Waldorf, MD </p>
        </div>
        <div class = "main">
            <p> Good morning </p>

            <h1> Jaza Solutions offers industry endorsed training in: </h1>
            <ol> 
                <li> <a href=JazaSolutionsPMP.html>PMP</li>
                <li> <a href=JazaSolutionsCAPM.html>CAPM</a></li>
                <li> <a href=JazaSolutionsITIL.html>ITIL</a></li>
                <li> <a href=JazaSolutionsAgile.html>Agile & Scrum</a></li>
                <li> <a href=JazaSolutionsSixSigma.html>Six Sigma</a></li>
            </ol>
            <br>
            <h1> The Jaza Advantage: </h1>
            <ul> 
                <li> Acquire certifications in Management not just training </li>
                <li> Get trained by experts at your site or ours </li>
                <li> Flexible training hours & online training to fit your needs </li>
            </ul>
        </div>
        <div id = "footer">
            <img class="imageSideRight" src="PMI.png" alt = "Jaza Solutions, LLC" height="60" margin-bottom= "0px" width = "100">
            <p>  <br> Call us:  (301)861-2133 <br> Email us: info@jazasolutions.com <br><small>&copy; 2017 Jaza Solutions, LLC</small></p>
        </div>
    </body>
</html>

如果这不起作用，请提供更多有关什么不起作用，您接收的错误以及您正在使用的asp.net mvc版本的详细信息。

将JSON字符串化javascript对象发送到控制器

1 个答案: