Pass javascript array to C# code Razor pages

Question

I have the following JavaScript code in Index.cshtml

 function getActivity()
    {
        var collection = document.getElementsByClassName("skill-icon-selected");
        const splitCollection = new Array;
        for (var i = 0; i < collection.length; i++)
        {
            var split = collection[i].id.split("-");
            splitCollection.push(split[0]);
        }
        console.log(splitCollection);
        

    }

I want to pass the array splitCollection to Index.cshtml.cs to use

        public List<Activity> allActivities = new List<Activity>();

        public void OnGet()
        {
            allActivities = _context.Activities.ToList();
            foreach (var activity in allActivities)
            {
                if (splitCollection.contains(activity.Skill))
                {
                    //Do stuff
                }
            }

How would I access splitCollection in my cshtml.cs or the data in splitCollection to be usesd in c#

@GeneralGrievance hi, I'm trying to filter through the data to return only some options. The user can select different skills and a random result matching one of those skills will be returned So with C# i'm attempting to filter through the data before passing it back to my front end — D74
– D74, Commented Aug 10, 2022 at 13:50
if you want to process it server side then you would need to make an ajax or fetch request — Pete
– Pete, Commented Aug 10, 2022 at 13:52
Thanks both, I'll look into using ajax for it as it seems the best for what I want to do Assuming I want a POST request, for the url of the request would I need to make a separate razor page? — D74
– D74, Commented Aug 10, 2022 at 13:56
@D74 Is this a MVC application or just razor pages? You can store your JS object in a local storage and then access it on your other cshtml view. — Rahul Sharma
– Rahul Sharma, Commented Aug 10, 2022 at 14:21
@RahulSharma Hi its just a razor page application, What I've done is store into a JS object and used an ajax call to post to my .cshtml.cs — D74
– D74, Commented Aug 10, 2022 at 14:34

Yiyi You · Accepted Answer · 2022-08-11 02:24:13Z

Since you want to pass an array to cshtml.cs in razor page,you need to use Post method.So you can pass data to OnPost handler,here is a demo:

cshtml:

@Html.AntiForgeryToken()
@section Scripts{ 
<script>
    function getActivity() {
       var collection = document.getElementsByClassName("skill-icon-selected");
        const splitCollection = new Array;
        for (var i = 0; i < collection.length; i++)
        {
            var split = collection[i].id.split("-");
            splitCollection.push(split[0]);
        }
        console.log(splitCollection);
        $.ajax({
            type: "POST",
            url: "",
            data: JSON.stringify(splitCollection),
            headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
            contentType: "application/json",
            success: function (data) {

            }
        });
        console.log(splitCollection);


    }
</script>
}

cshtml.cs:

public void OnPost([FromBody] List<Activity> myAllActivities) 
        { 
            ...
        }

Collectives™ on Stack Overflow

Pass javascript array to C# code Razor pages

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related