将 Javascript 数组发送到控制器 ASP.NET MVC

Question

1. 我正在尝试将用户输入存储在 javascript 数组中并通过 ajax 调用将其发送到控制器。但是我在控制器的参数中得到的只是空值。 代码如下：

   <table class="table-condensed table-bordered table-striped table-responsive">
       @foreach (var project in projects)
       {
           <tr>     
               @foreach (var parameter in parameters)
               {
                   <td>
                       <input type="text" class="form-control remar" id=@i />
                   </td>
                   i++;
               }
           </tr>
       }
       <tr>
           <td colspan=@(parameters.Count() + 1)>
               <button class="btn btn-primary pull-right" onclick="insert()">Submit Remarks</button>
           </td>
       </tr>
   </table>   
   
   <script>
   function insert() {
   var remarks = [];
   jQuery(".remark").each(function () {
       remarks.push(jQuery(this).val());
   });
   $.ajax({
       type: "POST",
       url: "@Url.Action("AddRemarksToEvaluationSheet", "Teacher")",
       data: JSON.stringify({ function_param: remarks }),
       contentType: "application/json; charset=utf-8;"
   });
   }
   </script>
   

控制器：

public ActionResult AddRemarksToEvaluationSheet(string[] function_param)
    {
        return View();
    }

有什么帮助吗？ 附：上面的代码被编辑。成功了！

Answer 1

这里有很多事情要做......

首先，不要给你的输入框提供数字的 id - 在这种情况下，看起来你甚至不会使用值...但是如果你需要它，请将值放入数据元素中：

<input type="text" class="form-control remark" data-remark-id="@i" />

检索值时，您需要获取值，而不是文本框本身：

var remarks = [];
jQuery(".remark").each(function() {
    remarks.push(jQuery(this).val());
});

当使用参数做任何奇怪的事情时，比如数组或复杂对象，如果你使用 JSON 而不是默认的 URL 编码，它会让事情变得更好。

您还应该避免使用绝对路径，并改用Url.Action，这样无论您的应用相对于域位于何处，它都能正常工作。

$.ajax({
    type: "POST",
    url: "@Url.Action("AddRemarksToEvaluationSheet", "Teacher")",
    data: JSON.stringify({ function_param: remarks }),
    contentType: "application/json; charset=utf-8;"
});

你可以接受一个字符串数组，而不是对象：

[HttpPost]
public ActionResult AddRemarksToEvaluationSheet(string[] function_param)
{
}

Answer 2

我有一种感觉，你没有得到数组中的备注。

如果您还没有，请使用允许您调试 js 的浏览器。如果您使用 Chrome，请右键单击 -> inpsect element（或 F12）。转到“Sources”选项卡，转到您的 js 文件并放置一个断点以查看备注数组的样子。

关于代码：

您似乎不需要输入的 id 属性。更不用说数字ID了。

要填充备注数组，请获取具有您放置在所有输入上的类的所有 dom 元素。对于每一个，推入数组中的值。

var remarks = [];
$(".form-control").each(function() {
    remarks.push($(this).val());
});

您可以添加额外的代码以仅添加具有值的代码。

var remarks = [];
    $(".form-control").each(function() {
        if($(this).val().length){
           remarks.push($(this).val());
        }
    });

ajax 调用：

$.ajax({
    type: "POST",
    url: addRemarksUrl,
    data: JSON.stringify({ function_param: remarks }),
    contentType: "application/json; charset=utf-8;"
});

其中 addRemarksUrl 可以是在 html 中声明的全局变量。

还有其他获取 url 的方法。看看这里：

How to send razor created Url to js file

该用户提供了 3 种可能的解决方案：

1. 全局 js 变量
2. 自定义“data-”属性
3. 隐藏输入