How to pass parameters from Ajax function to controller action?

Question

I have a button in my view that calls a jQuery Ajax function passing in parameters from my model

<input type="button" value="Run Check" onclick="runCheck('@actionItem.StepID', '@Model.Client.DatabaseConnectionString', '@Model.Client.ClientID')" />

The jQuery function

<script type="text/javascript">
        function runCheck(x, y, z) {
            $.ajax({
                url: '@Url.Action("ProcessFeedbackHasRows", "Client")',
                type: 'POST',
                contentType: 'application/json;',
                data: { stepId: x, databaseConnectionString: y, clientId: z },
                success: function (data) {
                    if (data.IsValid) {
                        //alert('true');
                        var url = '@Url.Action("ViewProcessingFeedBackPartial", "Client")';
                        $("#processingFeedbackPartialDiv").load(url, { stepId, databaseConnectionString, clientId },
                            function () {
                                $("#confirmButton").removeAttr("style");
                            });
                    } else {
                        //alert('false');
                        var newUrl = '@Url.Action("Processing", "Client")';
                        window.location = newUrl;
                    }
                }
            });
    };
</script>

And finally my controller action

public JsonResult ProcessFeedbackHasRows(int StepId, string DatabaseConnectionString, int ClientID)
    {
        bool isValid = true;
        FeedbackDetails feedbackDetails = new FeedbackDetails();

        feedbackDetails.Data = _clientProcessingService.GetProcessingFeedbackDetails(StepId, DatabaseConnectionString);

        if (feedbackDetails.Data.Rows.Count == 0)
        {
            _clientProcessingService.RunProcessStepConfirmation(DatabaseConnectionString, StepId, ClientID, "No information returned, automatically proceeding to next step.");
            isValid = false;
        }

        return Json(new { IsValid = isValid });
    }

The logic in the ajax function works when I hard code specific values in the controller to represent the appropriate step, client & database but when I debug I see the two integers as 0 and the string as null .

How can I pass these values to the controller? I considered just storing them in ViewBag or ViewData but that seems clunky and not really a good practice.

Answer 1

Try this,

var req={ stepId: x, databaseConnectionString: y, clientId: z }

function runCheck(x, y, z) {
            $.ajax({
                url: '@Url.Action("ProcessFeedbackHasRows", "Client")',
                type: 'POST',
                contentType: 'application/json;',
                data: JSON.stringify(req),
                success: function (data) {
                    if (data.IsValid) {
                        //alert('true');
                        var url = '@Url.Action("ViewProcessingFeedBackPartial", "Client")';
                        $("#processingFeedbackPartialDiv").load(url, { stepId, databaseConnectionString, clientId },
                            function () {
                                $("#confirmButton").removeAttr("style");
                            });
                    } else {
                        //alert('false');
                        var newUrl = '@Url.Action("Processing", "Client")';
                        window.location = newUrl;
                    }
                }
            });
    };

Answer 2

As per this question , I had to remove my contentType property and the values were passed successfully.

<script type="text/javascript">
    function runCheck(x, y, z) {
        $.ajax({
            url: '@Url.Action("ProcessFeedbackHasRows", "Client")',
            type: 'POST',
            data: { stepId: x, databaseConnectionString: y, clientId: z },
            success: function (result) {
                if (result.IsValid) {
                    alert('true');
                    var url = '@Url.Action("ViewProcessingFeedBackPartial", "Client")';
                    $("#processingFeedbackPartialDiv").load(url, { stepId, databaseConnectionString, clientId },
                        function () {
                            $("#confirmButton").removeAttr("style");
                        });
                } else {
                    alert('false');
                    var newUrl = '@Url.Action("Processing", "Client")';
                    window.location = newUrl;
                }
            }
        });
};