如何使用 AJAX 将数据从视图传递到控制器

Posted 2023-02-26

【中文标题】如何使用 AJAX 将数据从视图传递到控制器

【英文标题】：how to pass data from view to controller using AJAX

【发布时间】：2019-04-05 10:39:49

【问题描述】：

使用 Ajax 将参数从视图传递到控制器，但在操作时，参数显示为空

我尝试通过首先获取变量中的值并将变量作为参数传递来传递数据

Ajax 请求

$.ajax( 
            type: 'GET',
            url: '/Product/Edit',
            data:  Id: $(this).attr('dataid') , //Id is fetching data but not getting passed to controller
            dataType: "json",
            contentType: "application/json; charset=utf-8"
);

行动：

public ActionResult Edit(int  Id)

    var Category = ServProd.GetProductForId(Id);
    return PartialView(Category);

按钮：

<button class="ProdEdit" type="button" dataid="@Prod.Id">Edit</button>

【问题讨论】：

你能发表你的看法吗？

因为你要向控制器发送一个复杂对象而不是一个 int，所以创建一个带有 Id 属性的模型类，它会自动绑定

我将 ID 传递为： -- var EditId = $(this).attr('dataid') 并将 'EditId' 传递给 data ，dataid="@Prod.Id" 的 ID 为产品

【参考方案1】：

1) 将您的 AJAX 调用修改为如下所示：

const dataToSend =  Id: $(this).attr('dataid') ;
$.ajax( 
    type: 'GET',
    url: '/Product/Edit',
    data: JSON.stringify(dataToSend),
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function (data)  
        console.log(`Request passed!`);
        console.log(data);
    ,
    error: function (jqXHR, textStatus, errorThrown) 
        console.log(`Request failed!`);
    
);

2) 制作 C# 模型：

public class MyModel

    public int Id  get; set; 

3) 将您的操作方法更改为如下所示：

public ActionResult Edit(MyModel RequestModel)

    var Category = ServProd.GetProductForId(RequestModel.Id);
    return PartialView(Category);

现在将发生适当的model binding，您将把您的Id 放入RequestModel.Id 属性中。