POST dynamically added Lists to Controller as Json and redirect view

Question

Description I'm am creating a dynamic table where the user can select regions in a dropdown lists. On "add" the user can also add new table rows with region dropdown lists included. On POST, a list of Regions should be posted to the controller where it´s being saved to the SavingPlan model.

Problem Ajax is returning null to my controller even though I have saved selected option-data to string arrays which is being posted to the controller.

Addition I am fairly new to ASP.NET MVC so please have that in mind when commenting. I am open minded towards doing things differently but I´d very much appreciate I someone would be able to guid me and my code in the right direction.

Region Model

   public class Region
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }

Saving Plan Model

public SavingPlan()
        {
        }

        public SavingPlan(List<Region> regionList)
        {
            RegionList = regionList;
        }

        public int Id { get; set; }

        public ApplicationUser AssessmentUser { get; set; }
        public IEnumerable<Region> RegionLookUp { get; set; }
        public bool IsActive { get; set; }
        public byte RegionId { get; set; }
        public Region Region { get; set; }
        public List<Region> RegionList { get; set; }
    }

SavingPlan - ViewModel

    public class SavingPlan
    {
        public SavingPlan()
        {
        }

        public SavingPlan(List<Region> regionList)
        {
            RegionList = regionList;
        }

        public int Id { get; set; }

        public ApplicationUser AssessmentUser { get; set; }
        public IEnumerable<Region> RegionLookUp { get; set; }
        public bool IsActive { get; set; }
        public byte RegionId { get; set; }
        public Region Region { get; set; }
        public List<Region> RegionList { get; set; }
    }

Controller Action GET - NewSavingPlan

        public ActionResult NewSavingPlan()
        {
            SavingPlanAssessmentView viewModel = new SavingPlanAssessmentView();
            viewModel.SavingPlan = new SavingPlan();

            var regions = _context.Regions
                .ToList();

            viewModel.RegionLookUp = regions;
            return View(viewModel);
        }

Controller Action POST - Save SavingPlan

        [HttpPost]
        public JsonResult SaveList(string RegionList)
        {
            var urlBuilder = new UrlHelper(Request.RequestContext);
            var url = urlBuilder.Action("Index", "Assessments");

            string[] arr = RegionList.Split(',');

            foreach (var item in arr)
            {
                var region = item;
            }

            return Json(new { status = "success", redirectUrl = Url.Action("Index","Home") });

        }

SavingPlan Partial View

@model BBRG.ViewModels.SavingPlanAssessmentView


<h2>@Model.Heading</h2>
@*@using (Html.BeginForm("Save", "Assessments", FormMethod.Post))
{*@
    @*@Html.AntiForgeryToken()
    @Html.HiddenFor(m => m.Id)*@


    <legend>Saving Plan</legend>
    <table id="regionTable" class="table table-striped">
        <thead>
            <tr>
                <td>Region</td>
                <td> <button id="add" type="button" class="btn btn-link">Add</button></td>
                <td></td>
            </tr>
        </thead>
        <tbody>
            <tr id="regionRow_1">
                <td>
                    @Html.DropDownListFor(m => m.RegionId, new SelectList(Model.RegionLookUp, "Id", "Name"), "Select Region", new { @class = "form-control Region", id = "Region_1", type="string", name = "Region", selected="false" })
                </td>
                <td>
                    <button data-region-id="@Model.RegionId" id="deleteRegion" type="button" class="btn btnDeleteRegion btn-link btn-xs btn" btn-xs>remove</button>
                </td>
            </tr>
        </tbody>
    </table>
    <hr />

    <p>

        @Html.HiddenFor(m => m.Id)
        <button data-saving-id="@User.Identity" onclick="saveRegion()" type="submit" calss="btn btn-default js-toggle-save">Save</button>

    </p>

Jquery - Add new table row with dropdownlist

$(document).ready(function () {
    var counter = 2;
    $(function () {

        $('#add').click(function () {
            $('<tr id="regionRow_' + counter + '">'
                + '<td>'
                + '<select type="text" value="RegionId" name="Region" id="Region_'+ counter+'" class="form-control Region" " >'
                + $(".Region").html()
                + '</select>'
                + '</td>'
                + '<td>'
                + '<button data-region-id= id="deleteRegion" type="button" class="btn btnDeleteRegion btn-link btn-xs btn" btn-xs>remove</button>'
                + '</td>'
                + '</tr>').appendTo('#regionTable');
            counter++;
            return false;
        });
    });
});

Jquery and .ajax for POST

    {
    <script src="~/Scripts/SavingPlanScripts.js"></script>
     <script>
            var saveRegion = (function () {
                var array = []; 
                var commaSeperated = ""; 
                var count = 1;

                $("#regionTable tbody .Region").each(function (index, val) {
                    var regionId = $(val).attr("Id"); 
                    var arr = regionId.split('_');

                    var currentRegionId = arr[1];

                    var isSelected = $(".Region option").is(':selected', true);
                        if (isSelected) {
                            array.push(currentRegionId);
                        }
                    count++;
                });

                if (array.length != 0) {
                    commaSeperated = array.toString();

                    $.ajax({
                        type: "POST",
                        dataType: "json",
                        contentType: "/application/json",
                        url: "/SavingPlans/SaveList",
                        data: { "RegionList": commaSeperated },
                        success: function (json) {
                            if (json.status == "success") {
                                window.location.href = json.redirectUrl;
                            };
                        }
                    });                        
                };
            });
        </script>
}```

Answer 1

I found the solution to my problem, I forgot to stringify my .ajax data. If anyone still want to provide me with some constructive input, please don´t hesitate.

               $.ajax({
                   url: "../SavingPlans/SaveList",
                   data: JSON.stringify({ RegionId: commaSeperated }),
                   type: "POST",
                   dataType: "json",
                   contentType: 'application/json; charset=utf-8',
                   success: function (json) {
                       if (json.status == "success") {
                           window.location.href = json.redirectUrl;
                       };
                   }
               });