ajax - 如何将数据列表从控制器发送到剃须刀中的模式弹出窗口

Question

我正在实施 asp.net core 3.1 项目。我有一个 razor 视图，在 razor 中，我显示了一些从控制器中的 Index 方法获取的数据，它的名称是 RequestorsController。在剃须刀中，对于每一行都有一个名为“详细信息”的链接，我希望当用户单击每一行的详细信息按钮时，该行的相关 ID 传递给 RequestorsController 中名为“详细信息”的方法和一个列表相关数据返回剃刀视图并显示在模态弹出窗口中。现在我可以实现模态弹出窗口，但我的问题是我无法从控制器中获取数据以显示在模态上。如果有人解决我的问题，我将不胜感激。

<div id="tablecontainer" class="my-5 col-sm-12  d-flex justify-content-center">
        <table id="myDummyTable" class="table m-table mytable table-striped mb-4 col-12 dataTable table-bordered px-0 mx-0" style="box-sizing:content-box;">
            <thead>
                <tr id="headerrow">
      
                    <th>
                        requestor name
                    </th>

                    <th>
                        items requested
                    </th>
                  
                    <th>
                        operations
                    </th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model)
                {
                    <tr>
                      
                        <td>
                            @Html.HiddenFor(modelItem => item.applicantID)
                            @Html.DisplayFor(modelItem => item.requestorName)
                        </td>


                        <td>
                            @Html.DisplayFor(modelItem => item.requesteditemCount)
                        </td>
                        
                        <td>

                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-id="@item.applicantID">Details</button>
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    </div>

    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">New message</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form method="post">
                    <div class="modal-body">

                        <div class="form-group">
                            <label for="recipient-apiname" class="col-form-label">name:</label>
                            <input type="text" class="form-control" id="recipient-apiname" name="apiname">
                            <input type="hidden" id="recipient-id" name="id" />
                        </div>
                        <div class="form-group">
                            <label for="recipient-status" class="col-form-label">status:</label>
                            <input type="text" class="form-control" id="recipient-status" name="status">
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <input type="submit" class="btn btn-primary" value="Save" />
                    </div>
                </form>
            </div>
        </div>
    </div>

    @section scripts{
        <script>
        @{
            if (ViewBag.ModalState == null)
            {
                ViewBag.ModalState = "hide";
            }
        }
        $('#exampleModal').modal('@ViewBag.ModalState');

        $('#exampleModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var id = button.data('id');

            var modal = $(this);
            modal.find('.modal-body input[name="id"]').val(id);

            $.get('@Url.Action("Details", "Requestors")/' + id, function (data) {

                modal.find('.modal-body input[name="name"]').val(data.itemName);
                modal.find('.modal-body input[name="status"]').val(data.requestStatus);
            });

        });
        </script>
    }
 


   public async Task<IActionResult> Details(int? id)
        {
            
                List<ItemDTO> al = new List<ItemDTO>();

                ItemDTO apDTO;
                

                var myquery = (from t in _context.Items
                               where t.ApplicantId == id
                               select new { ItemName = t.ItemName, requestStatus = t.LastRequestStatus }).ToList();



                foreach (var index in myquery)
                {
                    apDTO = new ItemDTO();

                    apDTO.itemName = index.itemName;
                    apDTO.requestStatus = index.requestStatus;

                    al.Add(apDTO);
                }
                return View(al);
            }

标签： ajaxrazorasp.net-core-mvc

Answer 1

现在我可以实现模态弹出窗口，但我的问题是我无法从控制器中获取数据以显示在模态上。

正如您在评论中提到的，当您单击详细信息按钮时，会发生 500 错误，我确实重现了这个错误。

这是因为 Details 动作返回的View是 ajax 中需要返回的 json 数据，而不是需要返回的 json 数据，并且因为没有 Details 视图，所以会出现 500 错误。

要解决它，只需要更改返回Json 数据的 Details 动作的内容，如下图：

public async Task<IActionResult> Details(int? id)
        {

            List<ItemDTO> al = new List<ItemDTO>();

                ItemDTO apDTO;
                

                var myquery = (from t in _context.Items
                               where t.ApplicantId == id
                               select new { ItemName = t.ItemName, requestStatus = t.LastRequestStatus }).ToList();



                foreach (var index in myquery)
                {
                    apDTO = new ItemDTO();

                    apDTO.itemName = index.ItemName;// here is ItemName(case sensitive)
                    apDTO.requestStatus = index.requestStatus;

                    al.Add(apDTO);
                }
            return Json(al);
        }

我的疑惑是，如果ApplicantId是key，那么从Items表中获取的数据计数一定是1，不需要list集合，但是因为你返回的是集合数据，那么在ajax中，需要传递data[0]给bind对应的输入值/

并且您需要更改input[name="name"]为input[name="apiname"].

这是ajax代码：

 $.get('@Url.Action("Details", "Requestors")/' + id, function (data) {

                modal.find('.modal-body input[name="apiname"]').val(data[0].itemName);
                modal.find('.modal-body input[name="status"]').val(data[0].requestStatus);
            });