如何在asp.net mvc 5中使用jQuery ajax将模型添加到剃须刀页面？

127

穆罕默德·拉希米

我想用此代码将模型值添加到带有jQuery ajax的剃须刀页面中，我可以获得值列表：

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

                console.log(data);


            }
        });
    </script>

但是我想将此数据添加到我的剃刀页面模型中，但是我不知道该怎么做

我的控制器代码：

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

Yiyi You

这是一个从控制器获取列表并将其放入表格的演示，然后单击按钮将列表传递给控制器（如果需要，您还可以选择要传递的列表元素）：

型号A：

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

    }

视图：

@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（使用假数据进行测试）：

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

结果：