locked
How to send data from a controller method to a modal popup in razor RRS feed

  • Question

  • User-259252065 posted

    Hello. I'm implementing asp.net core 3.1 project. I have a razor view and in razor, I'm showing some data that are getting from the Index method in my controller which its name is RequestorsController. In razor, for each row there is a link which is called "Details" and I want when the user clicks on the Details button for each row, the related id for that row passes to a method called "Details" in RequestorsController and a list of related data returns back to the razor view and displays on a Modal popup. Now I could implement the Modal popup, but my problem is I couldn't fetch the data from the controller to show on modal. I appreciate if anyone solves my problem. after debugging I saw the error is "Failed to load resource: the server responded with a status of 500 () Requestors/Details"

    <div>   

     <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);
                }


    </div>

    Sunday, August 16, 2020 11:09 AM

All replies

  • User-939850651 posted

    Hi Elenorarez,

    I used the code you provided to reproduce your problem, and modified part of the code to achieve your requirement.(code in yellow)

    <div>
        <h4>RequestInfo</h4>
        <hr />
        <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>
    <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">Detail Info</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", "Request")/' + id, function (data) {
                    modal.find('.modal-body input[name*="name"]').val(data[0].itemName);
                    modal.find('.modal-body input[name*="status"]').val(data[0].requestStatus);
                });
                @*$.ajax({
                    url: '@Url.Action("getByRequestId", "Request")/'+id,
                    type: 'POST',
                    dataType: 'json',
                    contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
                    success: function (res) {
                        modal.find('.modal-body input[name*="name"]').val(res[0].itemName);
                        modal.find('.modal-body input[name*="status"]').val(res[0].requestStatus);
                    },
                    error: function (e) {
                        console.log('error');
                    }
                });*@
            });
        </script>
    }
    public class RequestController : Controller
        {
            public static List<RequestInfo> allInfos = new List<RequestInfo>() {
            new RequestInfo { applicantID = 1,itemName="item1", requestorName = "Name1", requesteditemCount = 2,requestStatus="start" },
            new RequestInfo { applicantID = 2,itemName="item2", requestorName = "Name2", requesteditemCount = 3,requestStatus="end" },
            new RequestInfo { applicantID = 3,itemName="item3", requestorName = "Name3", requesteditemCount = 5,requestStatus="Processing" }
            };
            public IActionResult Index()
            {
                var model = new List<RequestInfo>();
                model = allInfos;
                return View(model);
            }
    
            //[HttpPost]
            public async Task<JsonResult> Details(int? id)
            {
                var model = new List<RequestInfo>();
                foreach (var item in allInfos)
                {
                    if (item.applicantID == id)
                    {
                        model.Add(item);
                    }
                }
                return this.Json(model);
            }
        }

    Result:

    As you can see, you should use JsonResult as the return type.

    Best regards,

    Xudong Peng

    Monday, August 17, 2020 6:56 AM
  • User-939850651 posted

    Hi Elenorarez,

    Have your problem solved?

    Thursday, August 27, 2020 7:13 AM