将 javascript 数组传递给 C# 代码 Razor 页面

Question

我在 Index.cshtml 中有以下 JavaScript 代码

 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);
        

    }

我想将数组 splitCollection 传递给 Index.cshtml.cs 以使用

        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
                }
            }

如何访问我的 cshtml.cs 中的 splitCollection 或 splitCollection 中要在 c# 中使用的数据

Answer 1

由于您想在 razor 页面中将数组传递给 cshtml.cs，因此您需要使用 Post 方法。因此您可以将数据传递给OnPost处理程序，这里有一个演示：

.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) 
        { 
            ...
        }