Passing value to partial view via post

Question

I want to pass a long string from my View to a partial View and render the partial View on Button click. The string is too long to be passed as a part of the url, so it must be passed via post.

On the click of the Button Details, an ajax function is called, which should pass the required parameter to the partial view and render it. Unfortunytely this doesn't work, it seems I have an error in my ajax-declaration. When I click the Details Button nothing happens, and the debugger jumps over the ajax declaration.

Here is a part of my View:

<form class="form-inline" asp-controller="Order" asp-action="Details">
    
    <table class="ComplianceTable" id="ComplianceTable">
        <thead>
            <tr id='tableHeader'>
                <th>Res.</th>
                <th>Trend</th>
                <th>Portfolio</th>
                <th>Level</th>
                <th>Code</th>
                <th>Description</th>
                <th>Rule</th>
                <th>Test Type</th>
                <th>Limit</th>
                <th>Result</th>
                <th>(Previous)</th>
                <th>Severity</th>
                <th>Details</th>
            </tr>
        </thead>
        <tbody>

            @foreach (var info in Model.ViolationInfo)
            {
            <tr>
                <td>@info.RuleType</td>
                <td></td>
                <td>@Model.code</td>
                <td></td>
                <td></td>
                <td></td>
                <td>@info.RuleName</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>
                    <input type="hidden" id="value1" name="info.Diagnostic">
                    <button class="btn js-details" type="button" name="Details" data-id="@info.Diagnostic">
                            Details
                    </button>
                </td>
            </tr>
            <tr class="info"><td colspan="11">@info.Diagnostic</td></tr>
                    

                    }
            </tbody>
    </table>
    <div id="getComplianceDetails"></div>
</form>

Here is my PartialView:

@model string

<div id="getComplianceDetails">
   <p>Test</p>
   <p>
       @Model
   </p>
</div>

Here is my javascript:

$(document).ready(function () {
$(document).on('click', '.js-details', function (event) {
    $("#ComplianceTable tr").removeClass("selected");
    $(this).closest('tr').addClass('selected');

    var $element = $(event.currentTarget);
    var id = $element.data('id');
    $.ajax({
        url: '@Url.Action("Details", "Order")',
        data: {info: id},
        type: "POST",
        success: function (data) {
            $('#getComplianceDetails').html(data);
        }
    });
});
});

Here is my OrderController:

public ActionResult Details(string info)
    {
        return PartialView("~/Views/Shared/complianceDetails.cshtml", info);
    }

Answer 1

Assuming that your "info" has value, try an explicit url:

 url: '/Order/Details',

and maybe you need to add [FromBody] to your action:

public ActionResult Details([FromBody] string info)
    {
        return PartialView("~/Views/Shared/complianceDetails.cshtml", info);
    }