Javascript 从Jquery数据表中的按钮单击加载MVC核心视图(通过调用操作)

Javascript 从Jquery数据表中的按钮单击加载MVC核心视图(通过调用操作),javascript,c#,jquery,datatables,asp.net-core-mvc,Javascript,C#,Jquery,Datatables,Asp.net Core Mvc,我在MVC视图中有一个数据表,每个记录中都有编辑按钮 单击edit按钮时,我需要将记录的Id传递给MVC操作方法,并从MVC操作加载编辑表单的MVC视图 这是我的JQuery数据表代码 function PopulateQueryGrid(data) { $('#querytable').dataTable({ destroy: true, data: data, columns: [

我在MVC视图中有一个数据表,每个记录中都有编辑按钮

单击edit按钮时,我需要将记录的Id传递给MVC操作方法,并从MVC操作加载编辑表单的MVC视图

这是我的JQuery数据表代码

function PopulateQueryGrid(data) {
        $('#querytable').dataTable({
            destroy: true,
            data: data,
            columns: [
                { "data": "type", "name": "Product Type", "autoWidth": true },
                {
                    "data": "isDeleted",
                    "render": function(data, type, full) {
                        if (full.isDeleted !== true) {
                            return "<div style='background-color:PaleGreen;width:100px;text-align:center;padding:2px'> Active </div>";
                        } else {
                            return "<div style='background-color:orange;width:100px;text-align:center;padding:2px'> Deleted </div>";
                        }
                    }
                },
                {
                    "data": "id",
                    "render": function(data, type, full) {

                        **// 1 does not work
                        //return '<input type="button" value="Edit" class="btn btn-info" onclick=\'editItem(' + JSON.stringify(full) + ')\' />';


                        // 2 does not work
                        //return '<form asp-controller="ProductType" asp-action="EditProductType" method="get"><input type="hidden" name="typeId" id="typeId" value="' +
                            //full.id +
                            //'" /><input type="submit" class="btn btn-info" value="Edit" /></form>';**

                    }
                },
                {
                    "data": "ID",
                    "render": function(data, type, full) {

                        return '<input type="button" value="Delete" class="btn btn-danger" onclick=\'deleteItem(' +
                            JSON.stringify(full) +
                            ')\' />';
                    }
                }
            ]
        });
    }


    function editItem(item) {

        $.ajax({
            url: '/ProductType/EditProductType',
            data: { typeId : item.id },
            type: 'GET',
            contentType: 'application/json; charset=utf-8',

            error: function() {
                alert("error");
            }
        });
    }

    function deleteItem(item) {
        alert("delete : " + item.id);
    }
到目前为止,我尝试了两种方法来实现这一点(这两种方法都在上面的数据表代码中进行了注释),但没有一种有效

  • Jquery Ajax
  • 为每个编辑按钮创建一个表单,并在单击按钮时向MVC操作提交数据
  • 问题-如何从JS数据表按钮单击向MVC控制器操作传递值,并从该操作加载MVC视图(表单)


    非常感谢你的帮助。谢谢。

    谢谢你的建议/评论。正如评论中建议的那样,我使用
    ”;
    }
    },
    
    Ajax在您想要重定向时毫无意义。为什么要使用
    ?-您只需使用一个链接来调用get方法为什么在EditProductType get方法中使用RedirectToAction?@Stephen Muecke-谢谢。是的,我使用了一个链接,它可以工作。@Dhiren-是的,我应该使用视图(modelObj)而不是重定向到操作。编辑了这个问题。谢谢
    public async Task<IActionResult> EditProductType(int typeId)
        {
            try
            {
                var productType = await _productTypesService.GetProductTypeByIdAsync(typeId);
                return View(productType);
            }
            catch (Exception e)
            {
                Console.WriteLine(e);
                throw;
            }
        }
    
        [HttpPost]
        public IActionResult EditProductType(ProductTypeViewModel vm)
        {
            try
            {
                if (ModelState.IsValid)
                {
                    _productTypesService.EditProductTypeAsync(vm);
                    return RedirectToAction("Index");
                }
    
                return RedirectToAction("EditProductType", vm);
            }
            catch (Exception e)
            {
                Console.WriteLine(e);
                throw;
            }
        }
    
    {
                        "data": "id",
                        "render": function(data, type, full) {
    
                            return '<a class="btn btn-info" href="/ProductType/EditProductType?typeId=' + full.id  + '">Edit</a>';
                        }
                    },