控制器没有获取从 Ajax 请求发送的信息（对于模型）答案

【问题标题】：Controller not getting information (for the Model) sent from Ajax request控制器没有获取从 Ajax 请求发送的信息（对于模型）
【发布时间】：2022-12-12 14:26:15
【问题描述】：

我从我的 javascript 数组中的 HTML 表中获取所有信息，我通过 Ajax 请求将其发送到控制器。查看代码：（已添加）

    <table id="tblAuction" class="table table-striped" style="width:80%" align="center">
            <thead>
                <tr>
                    <th style="width:150px">Image</th>
                    <th style="width:150px">Goods ID</th>
                    <th style="width:150px">Description</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @foreach (var items in Model.tbl_Goods)
                {
                    <tr>
                        <td>
                            @if (items.fileTobePosted != null)
                            {
                                <img src="@items.fileTobePosted" width="100" height="100" />
                            }
                            else
                            { <label>No picture</label>
                            }

                        </td>
                        <td>@items.GoodsInformation<
                        <td><input type="button" value="Remove" onclick="Remove(this)" /></td>
                    </tr>
                }
            </tbody>
            <tfoot>
                <tr>
                    <td><input name="fileTobePosted" type="file" id="fileTobePosted"></td>
                    <td><input type="text" id="txtGoodsInformation" /></td>
                    <td><input type="text" id="txtDescription" /></td>
                    
                    <td><input type="button" id="btnAdd" value="Add" /></td>
                </tr>
            </tfoot>
        </table>

这是我的 JS 和 Ajax 请求：

   //js code to get all textboxes values

   $("body").on("click", "#btnSave", function () {
    var formdata = new FormData($('form').get(0));
    var customers = new Array();
    $("#tblAuction TBODY TR").each(function () {
        var row = $(this);
        var customer = {};
        customer.GoodsInformation = row.find("TD").eq(1).html();
        customer.Description = row.find("TD").eq(2).html();
        customers.push(customer);
    });        
    formdata.append("Goods", JSON.stringify(customers));
    $.ajax({
        type: "POST",
        url: "@Url.Action("test","Home")",
        data: formdata,    
        processData: false,
        contentType: false,
        dataType: "json"
    });
});

我想从中获取信息的控制器。

    public ActionResult Test(tbl_Goods Goods)
    {                         
            HttpPostedFileBase fileTobePosted = Request.Files["fileTobePosted"];
            var getdata = Request.Form["auctionGoods"];

我在 filetobeposted 中得到了文件，这很好。我也得到信息

   var getdata

它恭敬地显示：{goodsinformation, description}。

但我想遍历它，因为用户可能会添加一行或多行。像这样。

   if (fileTobePosted != null)
            {
                //Loop through the forms
                for (int i = 0; i <= Request.Form.Count; i++)
                {
                   var GoodsInformation = Request.Form["GoodsInformation[" + i + "]"];
                    var Description = Request.Form["Description[" + i + "]"];

但是 Goodsinformation 和 Description 在这里返回 NULL。

另外，当鼠标悬停在我的模型上时，我得到 NULL

   public ActionResult Test(tbl_Goods Goods)

【问题讨论】：

标签： javascript c# model-view-controller asp.net-ajax

【解决方案1】：

我试过你的 sn-p 但有些东西是我自己填写的。索引.html

<html>
<head>
</head>
<body>
    <button id="btnSave">Save</button>
    <table id="tblAuction">
        <tbody>
            <tr>
                <td></td>
                <td>Info1</td>
                <td>Descr1</td>
            </tr>
            <tr>
                <td></td>
                <td>Info2</td>
                <td>Descr2</td>
            </tr>
        </tbody>
    </table>
    <script src="lib/jquery/dist/jquery.min.js"></script>
    <script>
        $("body").on("click", "#btnSave", function () {
            var customers = new Array();
            $("#tblAuction TBODY TR").each(function () {
                var row = $(this);
                var customer = {};
                customer.GoodsInformation = row.find("TD").eq(1).html();
                customer.Description = row.find("TD").eq(2).html();
                customers.push(customer);
            });
            $.ajax({
                type: "POST",
                url: "Home/Test",
                data: JSON.stringify(customers),
                contentType: "application/json; charset=utf-8",
                dataType: "json"
            });
        });
    </script>
</body>
</html>

然后是 Homecontroller.cs：

using Microsoft.AspNetCore.Mvc;

public class Goods
{
    public string GoodsInformation { get; set; }
    public string Description { get; set; }
}

[Route("[controller]/[action]")]
public class HomeController : Controller
{
    [HttpPost]
    public IActionResult Test([FromBody] List<Goods> goods)
    {
        return Ok(goods);
    }
}

当我按下保存按钮时，我在商品参数中得到了两条 TR 行。我不确定您为什么要尝试创建一个 formdata 对象，也不确定为什么要尝试访问控制器中的 HttpPostedFileBase。

【讨论】：

嗨约翰。感谢您的贡献。是的，在我的 html 表中，我正在连续上传图像和文本。这就是使用 httppostefilebase 的原因。我正在尝试保存图像。我将编辑我的 html 代码，以便您可以看到。