how to add model to razor page with jquery ajax in asp.net mvc 5?

Question

i want add model value to razor page with jquery ajax with this code i can get value list:

<script>
        $.ajax({
            url: "/TechnicalInfoGroups",
            dataType: 'json',
            cache: false,
            success: function (data) {

                console.log(data);


            }
        });
    </script>

but i want add this data to my razor page model But I do not know how to do it

my controller code:

 public async Task<IActionResult> Index()
        {
            var appDbContext = _context.TechnicalInfoGroups.Include(t => t.Products);
            var model = await appDbContext.ToListAsync();
           
            return Json(model);
        }

Answer 1

Here is a demo to get list from controller and put it into table,and after button click pass the list to controller(If you want,you can also choose an element of the list to pass):

ModelA:

public class ModelA
    {
        public int Id { get; set; }
        public string GroupName { get; set; }
        public string Products { get; set; }

        public string ProductId { get; set; }

        public string TechnicalInfos { get; set; }

    }

View:

@Html.AntiForgeryToken()
<div id="tableArea">
    <table id="table1">
        <thead>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
<button onclick="getTable()">getTable</button>
<button onclick="submit()">submit</button>

js:

<script>
        function getTable() {
            $.ajax({
                url: "/Test/Index",
                dataType: 'json',
                cache: false,
                success: function (data) {
                    $("#table1 thead").append('<tr><td>Id</td><td>GroupName</td><td>Products</td><td>ProductId</td><td>TechnicalInfos</td></tr>');
                    $.each(data, function (i, item) {
                        $("#table1 tbody").append('<tr><td> ' + item["id"] + '</td><td>' + item["groupName"] + '</td><td>' + item["products"] + '</td><td>' + item["productId"] + '</td><td>' + item["technicalInfos"] + '</td></tr>');
                    });


                }
            });
        }
        function submit() {

        $this=$('#table1 tbody').children("tr:first");
        var obj = {};
        obj.Id = parseInt($this.find("td").eq(0).text());
        obj.GroupName = $this.find("td").eq(1).text();
        obj.Products = $this.find("td").eq(2).text();
        obj.ProductId = $this.find("td").eq(3).text();
        obj.TechnicalInfos = $this.find("td").eq(4).text();
       
        $.ajax({
            type: "POST",
            url: "@Url.Action("GetList", "Test")",
            data: obj,
            headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
            success: function (data) {
              
            }
        });
    }
    </script>

TestController(Use fake data to test):

public class TestController : Controller
    {
        public async Task<IActionResult> Index()
        {

            List<ModelA> l = new List<ModelA> {
                new ModelA{  Id=1, GroupName="ssdd"},
                new ModelA{  Id=2, GroupName="ssdd2"},
                new ModelA{  Id=3, GroupName="ssdd3"},
                new ModelA{  Id=4, GroupName="ssdd4"},
                new ModelA{  Id=5, GroupName="ssdd5"}

            };
            return Json(l);
        }
        [HttpPost]
        [ValidateAntiForgeryToken]
        public IActionResult GetList(ModelA modelA)
        {
            return Ok();
        }
    }

result: