C# 无法访问id元素为Ajax post的JS列表生成对象。

我的模型包含两个

订单

实体类型列表，但仅通过

状态

属性的值进行区分。创建

订单

时，

状态

属性自动设置为

进行中

，并在

AdminOrders视图

中，放置在

进行中订单表

中。

AdminOrders视图

有两个表：

Orders In Progress表

和

Orders Dispatched表

，分别由

模型

的列表填充

当

新订单

的

状态

值从下拉列表更改为

已调度

，并且单击视图中的

更新

按钮时，

ajaxpost请求

应该由JavaScript点击事件触发——将视图中所有更新订单的

列表

传递给ajaxpost方法。但是，当我运行应用程序时，似乎什么都没有发生

每次，

多个订单对象

都可以更改其

状态

，这就是为什么我认为一个简单的

Ajax更新post请求

是合适的

下面是模型类：

public class AdminOrdersViewModel
{
    public List<Order> OrdersInProgress { get; set; }
    public List<Order> OrdersDespatched { get; set; }
    public List<Status> OrderStatuses { get; set; }
}

正如您所看到的，有一个列表正在被传递。此列表是从视图中的JavaScript方法收集的：

<script type="text/javascript">
    $(document).ready(function () {

        $("#Order-Update-Button").click(function () {

            var ListOfUpdatedOrders = []

            @{

                foreach (var item in Model.OrdersInProgress)
                {
                    @:ListOfUpdatedOrders.push({ id: "@item.OrderId", newStatus: document.getElementById("@item.OrderId") });

                }

            }

            var dataJson = JSON.stringify({
                "UpdatedOrdersList": ListOfUpdatedOrders
            });

            alert("running");
            // Perform the ajax post
            $.ajax({
                contentType: "application/json; charset=utf-8",
                type: "POST",
                url: "@Url.Action("UpdateOrders", "Manage")",
                data: dataJson,
                dataType: "json",
                success: function (data) {
                    alert(data);
                },
                error: function () {
                    alert("an error has occured!!!");
                }
            });

        });
    });
</script>

Chrome控制台错误：

AdminOrders:60 Uncaught TypeError: Converting circular structure to JSON
    at JSON.stringify (<anonymous>)
    at HTMLInputElement.<anonymous> (AdminOrders:60)
    at HTMLInputElement.dispatch (jquery-3.1.1.js:5201)
    at HTMLInputElement.elemData.handle (jquery-3.1.1.js:5009)

AdminOrders:60未捕获类型错误：将循环结构转换为JSON
在JSON.stringify（）上
在HTMLInputElement。（行政命令：60）
在HTMLInputElement.dispatch（jquery-3.1.1.js:5201）
位于HTMLInputElement.elemData.handle（jquery-3.1.1.js:5009）

---

​

您没有项.OrderId。 你不能得到这样的值

  for (var item = 0; item < @Model.OrdersInProgress.Count(); item++){
            var UpdatedOrder = { id: item.OrderId, newStatus: 
          document.getElementById(item.OrderId) };
            ListOfUpdatedOrders.push(UpdatedOrder);
  }

newstatus: $("#@item.OrderId").val()

更新

更改下拉列表

 @Html.DropDownListFor(m => item.Status, new SelectList(Model.OrderStatuses, 
 "StatusName", "StatusName", item.Status), new { @id = item.OrderId })

你应该得到这样的新闻状态

  for (var item = 0; item < @Model.OrdersInProgress.Count(); item++){
            var UpdatedOrder = { id: item.OrderId, newStatus: 
          document.getElementById(item.OrderId) };
            ListOfUpdatedOrders.push(UpdatedOrder);
  }

newstatus: $("#@item.OrderId").val()

---

您的代码存在多个问题。不能使用

foreach

循环生成表单控件-请参阅。如果发布一个数组，您需要对数据进行字符串化并设置

contentType:'application/json'

。您的

newStatus:document.getElementById（item.OrderId）

没有任何意义，并且不会返回状态，因为您的HTMLB无效。但是，您为什么要调用ajax来发布此消息呢。创建一个表示所需内容的视图模型，该模型显示所有订单以及相关的dropdownlist（如果您只有两个可能的状态值，则仅显示一个复选框，例如，

bool isDispatched

），然后回发该集合。感谢您的回复。由于某些原因，调试器没有通过JSON字符串化列表的那一行。欢迎光临。你是怎么调试那条线的。用铬？。你检查过你的更新列表吗？如果你在使用chrome，你能从控制台选项卡发布你的异常吗？我已经更新了我的答案，不要使用

document.getElementById（@item.OrderId”）

如果你坚持使用

document.getElementById（@item.OrderId”）。值

   @foreach (var d in Model.OrdersInProgress)
   {
            @:ListOfUpdatedOrders.push({ id: "@d.OrderId", newstatus: 
                "@d.Status.StatusName" });
   }

   var dataJson = JSON.stringify({
            'UpdatedOrdersList': ListOfUpdatedOrders,
    });

         //Perform the ajax post
        $.ajax({
            contentType: "application/json; charset=utf-8",
            type: "POST",
            url: '@Url.Action("UpdateOrders", "AdminOrders")',
            data: dataJson,
            dataType: "json",
            success: function (data) {
                alert(data);
            },
            error: function () {
                alert("An error has occured!!!");
            }
        });

 @Html.DropDownListFor(m => item.Status, new SelectList(Model.OrderStatuses, 
 "StatusName", "StatusName", item.Status), new { @id = item.OrderId })

newstatus: $("#@item.OrderId").val()