ASP.NET MVC 代码模式弹出不发送参数到 controller

Question

I am trying to present Organization Details in a partial view in a Bootstrap Modal. After a day of reading/watching tutorials I am stumped.

Organizations are loaded into a Table and there is a View option on each row. The table has an id="OrganizationGrid"

 <table class="table table-striped table-bordered dt-responsive nowrap" width="100%" cellspacing="0" id="OrganizationGrid"> <thead> <tr style="color:#126E75; background-color:lightcyan"> <th style=" width:5%"> @Html.ActionLink("ID", "Index", new { sortOrder = ViewBag.IDSortParm, currentFilter=ViewBag.CurrentFilter }) </th> <th style=" width:25%"> @Html.ActionLink("Name", "Index", new { sortOrder = ViewBag.NameSortParm, currentFilter=ViewBag.CurrentFilter }) </th> <th style=" width:25%"> Parent Org </th> <th style=" width:10%; text-align:center"> Website </th> <th style="width:25%"> Comment </th> <th scope="col" colspan="3" style=" width:10%; text-align:center">Action</th> </tr> </thead> <tbody> @foreach (var item in Model) { <tr class=" table-light"> <td style="text-align:left"> @Html.DisplayFor(modelItem => item.Id) </td> <td style="text-align:left"> @Html.DisplayFor(modelItem => item.Name) </td> <td style="text-align:left"> @Html.DisplayFor(modelItem => item.ParentOrg.Name) </td> <td style="text-align: center"> <a href=@Html.DisplayFor(modelItem=> item.Website) target="_blank"> <i class="fa-solid fa-globe" target="_blank" rel="noopener noreferrer"></i> </a> </td> <td style="text-align:left"> @Html.DisplayFor(modelItem => item.Comment) </td> <td style="text-align: center"> <a asp-action="Edit" asp-route-id="@item.Id"> <i class="fas fa-edit"></i> </a> </td> <td> <a class="details" href="javascript:;">View</a> </td> <td style="text-align: center"> <a asp-action="Delete" asp-route-id="@item.Id"> <i class="fas fa-trash" style="color:red"></i> </a> </td> </tr> } </tbody> </table>

My understanding is that it triggers the JavaScript function which is currently residing at the bottom of the same page:

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $(function() { $("#OrganizationGrid.details").click(function() { var organizationId = $(this).closest("tr").find("td").eq(0).html(); $.ajax({ type: "POST", url: "/Organizations/Details", data: '{organizationId: "' + organizationId + '" }', contentType: "application/json; charset=utf-8", dataType: "html", success: function(response) { $("#partialModal").find(".modal-body").html(response); $("#partialModal").modal('show'); }, failure: function(response) { alert(response.responseText); }, error: function(response) { alert(response.responseText); } }); }); }); </script>

I inserted a break in the controller to see if ajax was passing the organizationId but it is not. This is the Controller Details Action method:

 [HttpPost]
    public ActionResult Details(int organizationId)
    {

        var organization = _context.Organizations
            .Include(o => o.ParentOrg).Where(p=>p.Id == organizationId);


        if (organization == null)
        {
            return NotFound();
        }
        return PartialView("_Details", organization);
    }

If I hard code organizationId in the Controller the popup loads with the correct information BUT if I hard code organizationId in the JavaScript function it still passes a null value to the controller. Could someone please point me in the right direction.

Answer 1

The issue was with the JavaScript function and specifically the syntax of the data attribute in ajax. Corrected solution is as follows:

 $(function () { $("#OrganizationGrid.details").click(function () { var organizationId = $(this).closest("tr").find("td").eq(0).html(); //alert(organizationId) $.ajax({ type: "POST", url: "/Organizations/Details", data: { 'id': organizationId }, //contentType: "application/json; charset=utf-8", //dataType: "html", success: function (response) { $("#viewEditOrgModal").find(".modal-body").html(response); $("#viewEditOrgModal").modal('show'); }, failure: function (response) { alert(response.responseText); }, error: function (response) { alert(response.responseText); } }); }); });