ASP Net Core 3.1 AJAX 发送 NULL 到控制器

Question

尝试使用 ajax、Javascript 和 HTML 将 [POST] 表单数据发送到 MVC 控制器已经 3 天了，但结果为空。

请找到控制器和 ajax 代码，请帮助我，同时让我知道是否可以将数据从 ajax 发送到 mvc 控制器？

我是初学者.....提前谢谢。

[HttpPost]
[AllowAnonymous]
public async Task<IActionResult> CreateNewBug([FromBody] BugTrackerRequest bugTrackerRequest)
{
    // BugTrackerResponse bugTrackerResponse = null;
    if (ModelState.IsValid)
    {
        var Request = await _projectDetails.CreateNewBug(bugTrackerRequest);

        if (Request > 0)
        {
            BugTrackerResponse bugTrackerResponse = new BugTrackerResponse();
            bugTrackerResponse.Issuccess = true;
            // return Ok(new {Messgage="Data save successfully in the DB"});     
            return Ok();
        }
    }
    return StatusCode(500, new { Message = "Something went wrong" });
    // return bugTrackerResponse;
    //return StatusCode();

}

---

public class BugTrackerRequest:APIResponse
    {
        public int TicketId { get; set; }
        public string ProjectName { get; set; }
        public string ProjectDescription { get; set; }
        public string Title { get; set; }
        public string Status { get; set; }
        public string AssignTo { get; set; }
        public string AssignFrom { get; set; }
        public byte[] Attachment { get; set; }
        public string Impact { get; set; }
        public string Platform { get; set; }
        public string Priority { get; set; }
        public string BugType { get; set; }
        public DateTime CreatedDate { get; set; }
    }
}

---

function savedetails() {
 let saveuidetails = new   BugdetailRequestclass();

 saveuidetails.ProjectName = $('#projectprojectname').val();
    saveuidetails.ProjectDescription = $('#description').val();
    saveuidetails.Title = $('#title').val();
    saveuidetails.Status = $('#status').val();
    saveuidetails.AssignTo = $('#assignto').val();
    saveuidetails.AssignFrom = $('#assignfrom').val();
    saveuidetails.Attachment = $('#Attfileupload').val;
    saveuidetails.Impact = $('#Priority').val();
    saveuidetails.Platform = $('#platform').val();
    saveuidetails.Priority = $('#Priority').val();
    saveuidetails.BugType = $('bugtype').val();
    saveuidetails.CreatedDate = $('#currentdate').val();

 $.ajax({
        type: 'POST',
        url: '/TicketController1/CreateNewBugFromBody',
        dataType: "json",
        contentType: 'application/json',
        data: JSON.stringify(saveuidetails),
        success: function (data) {
            console.log('success', data);
        },
        error: function () { alert('Exeption:'); }
    });
 }

Answer 1

您在POST中的网址错误，请更改

/TicketController1/CreateNewBugFromBody

到

 /TicketController1/CreateNewBug

请确认您的控制器类名为TicketController1。

首先，请注释掉

saveuidetails.Attachment = $('#Attfileupload').val;

在js和

public DateTime CreatedDate { get; set; }
public byte[] Attachment { get; set; }

当控制器方法工作时，您可能会查看Attachment，这将是一个挑战。 你基本上有三个选择（https://stackoverflow.com/a/4083908/14072498）：

1. Base64 对文件进行编码，代价是数据大小增加了 大约 33%，并增加服务器和客户端的处理开销 用于编码/解码。
2. 首先在 multipart/form-data POST 中发送文件，然后将 ID 返回给 客户。然后客户端发送带有 ID 的元数据，服务器重新 关联文件和元数据。
3. 先发送元数据，返回一个ID给客户端。这 客户端然后发送带有 ID 的文件，服务器重新关联 文件和元数据。

否则，您在此处显示的代码对我来说看起来不错，并且为此使用 MVC 控制器没有问题。如果控制器仅包含 API 方法，则应从 ControllerBase 扩展而不是 Controller，并使用 [ApiController] 注释控制器。后者自动调用模型验证。

在实施新的 API 端点时，请始终从简单的事情开始，并使用例如验证邮递员，您可以到达新的终点。

Answer 2

url: '/TicketController1/CreateNewBugFromBody',

public async Task<IActionResult> CreateNewBug([FromBody] BugTrackerRequest bugTrackerRequest)

首先，检查您的请求 URL 和操作方法，您似乎将表单提交到 CreateNewBugFromBody 方法，而不是 CreateNewBug 操作方法。所以试着改变你的代码如下（我假设你的控制器名称是TicketController1并且你想提交给CreateNewBug方法）：

 $.ajax({
        type: 'POST',
        url: '/TicketController1/CreateNewBug',
        dataType: "json",
        contentType: 'application/json',
        data: JSON.stringify(saveuidetails),
        success: function (data) {
            console.log('success', data);
        },
        error: function () { alert('Exeption:'); }
    });

其次，请检查您的JQuery 对象BugdetailRequestclass，在action 方法中，它接收到一个BugTrackerRequest 对象。因此，尝试修改您的代码如下（请将请求 url 和 jquery 选择器值更改为您的）：

function savedetails() {
    var saveuidetails = {};  //define a object
    saveuidetails.ProjectName = $('#ProjectName').val();
    saveuidetails.ProjectDescription = $('#Description').val();
    saveuidetails.Title = $('#Title').val();
    saveuidetails.Status = $('#Status').val();
    saveuidetails.AssignTo = $('#AssignTo').val();
    saveuidetails.AssignFrom = $('#AssignFrom').val();
    saveuidetails.Attachment = $('#Attfileupload').val;
    saveuidetails.Impact = $('#Priority').val();
    saveuidetails.Platform = $('#Platform').val();
    saveuidetails.Priority = $('#Priority').val();
    saveuidetails.BugType = $('#BugType').val();  
    saveuidetails.CreatedDate = $('#CreatedDate').val();

    $.ajax({
        type: 'POST',
        url: '/Home/CreateNewBug',
        dataType: "json",
        contentType: 'application/json',
        data: JSON.stringify(saveuidetails),
        success: function (data) {
            console.log('success', data);
        },
        error: function () { alert('Exeption:'); }
    });
}

此外，您可以在 JavaScript 资源和 CreateNewBug 操作方法中添加断点，并检查在发送 Ajax 请求之前/之后是否可以获得正确的数据。 截图如下：

JavaScript 调试截图（使用 F12 开发者工具）

动作方法调试截图：