javascript .NET 7.0 MVC将视图发送到控制器自定义列表对象

我将从Web API获取的列表信息作为列表通过Controller发送到Web Page。这里我显示了我需要的元素。我想从这些显示的元素中批量删除我作为复选框选择的项目。相关函数福尔斯落在Controller上，但参数为空。

这是我将列表从控件发送到视图的地方。

try
{
    List<Material> MaterialInfo = new List<Material>();

    using (var client = new HttpClient())
    {
        client.BaseAddress = new Uri(Baseurl);
        client.DefaultRequestHeaders.Clear();
        client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
        HttpResponseMessage Res = await client.GetAsync("api/Materials");
        if (Res.IsSuccessStatusCode)
        {
            var MaterialsResponse = Res.Content.ReadAsStringAsync().Result;
            MaterialInfo = JsonConvert.DeserializeObject<List<Material>>(MaterialsResponse);
            CurrentMaterials.Add(MaterialInfo);
        }
        return View(MaterialInfo);
    }
}
catch (Exception)
{
    return View();
}

字符串

本节中，Controller中View的响应输入在这里，但Incoming List materials部分显示为空。我尝试将其更改为List obj和object obj，但仍然不起作用。

[HttpPost]
public ActionResult StartProcedure(List<Material> materials)
{
    try
    {
        //foreach (var item in materials)
        //{

        //}
        return View();
    }
    catch (Exception ex)
    {
        return View();
    }
}

型

这部分是我在View中显示在屏幕上的参数。

<tbody>
    @using (Html.BeginForm("StartProcedure", "LastedStatus", FormMethod.Post))
    {
        @foreach (var material in Model)
        {
            @if(material.CabinStatus == CabinStatus.outCabin)
            {
                <tr>
                    <td>
                        @Html.CheckBoxFor(r => material.isSelected, new { @class = "checkbox" })
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => material.Id)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => material.Code)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => material.Name)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => material.Description)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => material.BatchNumber)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => material.RfId)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => material.Weight)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => material.MaterialDrawerNo)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => material.MaterialLocation_X)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => material.MaterialLocation_Y)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => material.RemainingTime)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => material.PickUpTime)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => material.OutsideTime)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => material.CabinStatus)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => material.TimeAlarm)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => material.LifeEnding)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => material.TimeProcess)
                    </td>
                </tr>
            }
        }

        <input type="button" id="deleteItems" value="Delete Selected Items" name="Verify Order Information" class="btn btn-primary btn-large" />
    }
    
    
</tbody>

型

在本节中按下删除按钮时执行的操作。

@section scripts{
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
    <script type="text/javascript">

        $("body").on("click", "#deleteItems", function () {
            //Loop through the Table rows and build a JSON array.
            var materials = new Array();
            $("#table BODY TR").each(function () {
                var row = $(this);
                var material = {};
                material.isSelected = row.find("td:eq(0)").html();
                material.Id = row.find("td:eq(1)").html();
                material.Code = row.find("td:eq(2)").html();
                material.Name = row.find("td:eq(3)").html();
                material.Description = row.find("td:eq(4)").html();
                material.BatchNumber = row.find("td:eq(5)").html();
                material.RfId = row.find("td:eq(6)").html();
                material.Weight = row.find("td:eq(7)").html();
                material.MaterialDrawerNo = row.find("td:eq(8)").html();
                material.MaterialLocation_X = row.find("td:eq(9)").html();
                material.MaterialLocation_Y = row.find("td:eq(10)").html();
                material.RemainingTime = row.find("td:eq(0)").html();
                material.PickUpTime = row.find("td:eq(11)").html();
                material.OutsideTime = row.find("td:eq(12)").html();
                material.CabinStatus = row.find("td:eq(13)").html();
                material.TimeAlarm = row.find("td:eq(14)").html();
                material.LifeEnding = row.find("td:eq(15)").html();
                material.TimeProcess = row.find("td:eq(16)").html();

                materials.push(material);
            });

            //Send the JSON array to Controller using AJAX.
            $.ajax({
                type: "POST",
                url: "/LastedStatus/StartProcedure",
                data: JSON.stringify(materials),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {
                    alert(r + " Success.");
                }
            });
        });
    </script>
}

型

在本节中，按下删除按钮时执行的操作部分是我之前尝试的部分。

@section scripts{
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
    <script type="text/javascript">

        $("body").on("click", "#deleteItems", function () {
            //Loop through the Table rows and build a JSON array.
            var materials = new Array();
            $("#table BODY TR").each(function () {
                var row = $(this).closest("tr");
                var material = {};
                material.isSelected = row.find("TD").eq(0).html();
                material.Id = row.find("TD").eq(1).html();
                material.Code = row.find("TD").eq(2).html();
                material.Name = row.find("TD").eq(3).html();
                material.Description = row.find("TD").eq(4).html();
                material.BatchNumber = row.find("TD").eq(5).html();
                material.RfId = row.find("TD").eq(6).html();
                material.Weight = row.find("TD").eq(7).html();
                material.MaterialDrawerNo = row.find("TD").eq(8).html();
                material.MaterialLocation_X = row.find("TD").eq(9).html();
                material.MaterialLocation_Y = row.find("TD").eq(10).html();
                material.RemainingTime = row.find("TD").eq(11).html();
                material.PickUpTime = row.find("TD").eq(12).html();
                material.OutsideTime = row.find("TD").eq(13).html();
                material.CabinStatus = row.find("TD").eq(14).html();
                material.TimeAlarm = row.find("TD").eq(15).html();
                material.LifeEnding = row.find("TD").eq(16).html();
                material.TimeProcess = row.find("TD").eq(17).html();

                materials.push(material);
            });

            //Send the JSON array to Controller using AJAX.
            $.ajax({
                type: "POST",
                url: "/LastedStatus/StartProcedure2",
                data: JSON.stringify(materials),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {
                    alert(r + " Success.");
                }
            });
        });
    </script>
}

型

我想从这些显示的元素中批量删除我作为复选框选择的项目。相关函数福尔斯落在控制器上，但参数为空。
好吧，根据您的场景和描述沿着共享的代码片段，我试图重现您的问题，我发现了3个导致控制器和var materials = new Array();中的空列表的结果
我们在实践中看一看，我是一步一步地研究这个问题的。
不正确的脚本：
首先，我已经运行了与你的相同的代码，我发现有http/https问题，而加载您的问题如下：
x1c 0d1x的数据
表元素定义不一致：
除此之外，你正在通过table BODY TR提取你的table元素，但是我在你的代码中没有看到任何table和tableId。所以当你使用这种方式迭代时，它无法找到你的数据，因此，将无法将数据绑定到你的数组中。这导致提交时的null数组。正如你可以看到的：

的

控制器中缺少请求正文：
你正在从请求体中发送json对象，但是你的控制器请求对此一无所知，并且你肯定在我们的控制器操作中缺少[FromBody]。这导致StartProcedure操作中的结果集为空。

你如何修复它：
如果为了修复现有的不一致的代码，首先，我认为可以摆脱脚本引用，因为脚本不是强制性的，你正在努力实现。
然后，我们最好定义一个tableId，这样当我们在table元素上循环时，我们可以通过table Id得到tr项。最后，我们必须在控制器操作中使用[FromBody]。
让我们看看修改后的代码：
检视：

@model List<ShoppingCartApp.Controllers.MaterialInfo>
<table id="materialTable">
    <thead>
        <tr>
            <th>Select</th>
            <th>Id</th>
            <th>Code</th>
            <th>Name</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var material in Model)
        {
            <tr>
                <td>
                    @Html.CheckBoxFor(m => material.isSelected)
                </td>
                <td>@material.Id</td>
                <td>@material.Code</td>
                <td>@material.Name</td>
                <td>@material.Description</td>
            </tr>
        }
    </tbody>
</table>

<button id="submitButton">Submit Selected Items</button>

字符串
脚本：

@section Scripts {
    <script>
        $(document).ready(function () {
            $("#submitButton").click(function () {
                var selectedMaterials = new Array();
                $("#materialTable tbody tr").each(function () {
                    var row = $(this);
                    var isChecked = row.find("td:eq(0) input[type='checkbox']").is(':checked');
                    if (isChecked) {
                        var material = {
                            Id: row.find("td:eq(1)").text(),
                            Code: row.find("td:eq(2)").text(),
                            Name: row.find("td:eq(3)").text(),
                            Description: row.find("td:eq(4)").text()
                        };
                        selectedMaterials.push(material);
                    }
                });
                console.log(selectedMaterials);
                $.ajax({
                    url: "/MaterialInfo/StartProcedure",
                    type: "POST",
                    data: JSON.stringify(selectedMaterials),
                    contentType: "application/json",
                    success: function (r) {
                        alert(r + " Success.");
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                       
                        console.error("Error submitting data:", textStatus, errorThrown);
                    }
                });
            });
        });
    </script>
}

型
控制器：

public IActionResult Index()
{
    List<MaterialInfo> list = new List<MaterialInfo>()
    {
        new MaterialInfo(){isSelected = false, Id = 101, Code = "MAT-001", Name = "MAT-A", Description = "Description-X"},
        new MaterialInfo(){isSelected = true, Id = 102, Code = "MAT-002", Name = "MAT-B", Description = "Description-Y"},
        new MaterialInfo(){isSelected = false, Id = 103, Code = "MAT-003", Name = "MAT-C", Description = "Description-Z"}
    };
    return View(list);
}

[HttpPost]
public ActionResult StartProcedure([FromBody] List<MaterialInfo> materials)
{
    try
    {
        //foreach (var item in materials)
        //{

        //}
        return View();
    }
    catch (Exception ex)
    {
        return View();
    }
}

型
样品型号：

public class MaterialInfo
{
    public bool isSelected { get; set; }
    public int Id { get; set; }
    public string? Code { get; set; }
    public string? Name { get; set; }
    public string? Description { get; set; }
}

型

输出

**注意：**如果你注意到，我做了一些重构，以增加可读性，并试图减少代码气味。这，你应该如何解决你的这种问题一步一步。

javascript .NET 7.0 MVC将视图发送到控制器自定义列表对象

1条答案

相关问题

热门标签

最新问答