How to pass variable from JavaScript to partial view code behind using @Html.Raw

Question

I'm trying to pass a variable from cshtml via Javascript to my code-behind page. I'm able to trigger the below javascript function. However the variable passed in when used inside @Html.Raw gives me the error below.

"The name 'UserProgramId ' does not exist in the current context"

My Javascript function is shown below:

  function showStandingAddPanel(UserProgramId) {
    
    $("#divStandingAddPanel").show().load("@(Html.Raw($"{ Url.Page("UserDetails", "UserStandingFormPartial")}&userId={Model.ManagedUser.UserId}&userProgramId={UserProgramId}&standingIndex={standingList.Count + 1 }"))");
}

How to pass a variable using @Html.Raw from Javascript?

Answer 1

Here is a demo to pass data to handler.

cshtml:

<div id="divStandingAddPanel"></div>
@section scripts{

    <script>
        $(function () {
            showStandingAddPanel(2);
        })
        function showStandingAddPanel(UserProgramId) {
            var standingList = ["1","3","5"];
            var url= "@Url.Page("UserDetails", "UserStandingFormPartial")"+"&userId=" +@Model.ManagedUser.UserId+"&userProgramId=" + UserProgramId + "&standingIndex=" + (standingList.length + 1);
            $.ajax({
                type: "GET",
                url: url,
                success: function (response) {
                    $("#divStandingAddPanel").html(response);
                },
                failure: function (response) {
                    alert(response);
                }
            });



        }
    </script>
}

cshtml.cs:

public ManagedUser ManagedUser { get; set; } = new ManagedUser { UserId = 2 };
        
        public void OnGet()
        {
        }
        public JsonResult OnGetUserStandingFormPartial(int userId,int userProgramId,int standingIndex)
        {

            return new JsonResult("success");
        }

result: