Javascript 数组发送到 asp.net MVC 控制器答案

【问题标题】：Javascript array sending to asp.net MVC controllerJavascript 数组发送到 asp.net MVC 控制器
【发布时间】：2013-09-16 23:52:27
【问题描述】：

我目前正在尝试开发一个网络应用程序，其中用户在谷歌地图上定义一组带有坐标的点，这些点存储在一个像这样的数组中：

 mvcPolygon: new google.maps.MVCArray(),

现在我需要用户名、密码等并将其提交给服务器。我对 javascript 和前端开发很陌生，所以我对要走的路一无所知。所以目前我有存储坐标的javascript代码，我需要的是当用户完成定义他的多边形，并用用户名、密码、电子邮件等填写表格时，所有这些信息都会尽快发送到控制器当用户点击提交按钮时。该网络应用程序目前正在 ASP.NET MVC 5 和 c# 上开发，任何帮助将不胜感激！

【问题讨论】：

标签： javascript jquery asp.net asp.net-mvc asp.net-mvc-4

【解决方案1】：

基本上有两种方法可以将数据返回到服务器：

您可以将数据放入表单元素并将该表单发布到设置为接收它的操作。这将要求您将用户名、密码等放入一系列 html 元素中，这些元素的名称属性设置为遵循 MVC 的约定（This page 有一些关于使用约定的信息）。
您可以使用 jQuery 的 ajax 功能将包含您的数据的原始 javascript 对象发送到 MVC 操作（有关如何完成此操作的详细信息，请参阅this answer 和它的链接帖子）。

在任何一种情况下，您都不应该在每次请求时都向服务器发送用户名和密码，因为一旦用户登录到您的应用程序，您就可以使用身份验证 cookie 来验证用户的身份（有很多在线资源解释这是如何工作的）。

对于选项 2：

Javascript：

var myobject = {
    username: "Joe",
    password: "password",
    points: [{ x: 111.1112, y: 22.2222 },{ x: 11.12, y: 21.11 }]
}

jQuery.ajax({
    url: "/MyController/MyAction",
    contentType: "application/json",
    dataType: "json",
    data: JSON.stringify(myobject)
})

C#：

public class PointModel 
{
    public double x { get; set; }
    public double y { get; set; }
}

public class MyModel
{
    public string username { get; set; }
    public string password { get; set; }
    public IList<PointModel> points { get; set; }
}

public class MyController : Controller 
{
    [HttpPost]
    public JsonResult MyAction(MyModel model) {
        ...
    }
}

【讨论】：

我已经检查了这两个选项，但我不确定它们是否适用，场景是这样的：用户要在网站上注册，这需要用户填写他的所有个人信息信息和除此之外，他在地图上定义的一组点。这些点被存储在那个新数组中，所以当用户完成定义点、他的用户名、他的电子邮件、他的年龄等时。他将点击提交并发送信息。问题是我不知道如何将该数组绑定到点击提交按钮后发送回服务器的数据。感谢您抽出宝贵时间帮助我！
我知道这就是你想要做的。您有一个复杂的 javascript 对象要发布到服务器，因此最简单的方法是选项 2。您需要在服务器上设置一个 MVC 控制器操作，该操作设置为接收代表用户个人信息的模型，以及要存储的点数组。然后，您需要使用 ajax 将您的 javascript 对象（其格式与服务器期望的模型匹配）发布到控制器操作的 url，然后控制器可以处理存储/操作该数据。
好的，首先感谢您抽出宝贵的时间编写该 sn-p。第二：我已经实现了代码，现在我有一系列问题。 1st，与 Javascript 代码相关的表单如何，我的意思是，如果我有一个用户名输入，我如何从表单中获取它并将其分配给 javascript 变量（这是用 JQuery 完成的吗？2。如何我触发了 ajax 片段的 post 调用，我的意思是如何设置它以便在用户单击提交时立即调用它？我正在尝试吸收所有这些信息，但是我缺少一些东西，如果这是让你感到沮丧，谢谢！
还有一件事，该方法应该重定向到将显示另一个屏幕的操作，换句话说，这不是异步的，在这种情况下，ajax 是该工作的正确选择吗？
花时间浏览course on jQuery 并浏览jQuery documentation 中的一些内容，您会得到很好的服务。为了回答您的问题，通常当您需要在提交数据后重定向时，表单发布会更好（如上面答案中的选项 1 所示），但这使得绑定数组在 MVC 中有点棘手。您可以通过在 json 对象中返回重定向 url 并使用 ajax success event 执行重定向来通过 ajax 获得类似的功能。

【解决方案2】：

你可以使用下面的java脚本方法来定义JavaScript数组

<script type="text/javascript">
 var array = [];
    array.push(10);
    array.push(20);
</script>

您使用此数组在数组中插入点并使用以下 Ajax 调用发送此数组

 var _data = {
            'array ': array 
        };
$.Post(url ,_data, function(data){
})

【讨论】：