ASP Net Core3.1 AJAX Post 向控制器发送 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中的URL有误，请修改

/TicketController1/CreateNewBugFromBody

至

 /TicketController1/CreateNewBug

请验证您的控制器 class 是否命名为 TicketController1。

首先，请注释掉

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

在 js 和

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

当控制器方法工作时，您可以查看 Attachment 这将是一个挑战。你基本上有三个选择（）：

Base64 编码文件，以增加数据大小为代价大约 33%，并增加了服务器和客户端的处理开销 encoding/decoding.
先在multipart/form-dataPOST中发送文件，然后return一个ID到客户。然后客户端发送带有 ID 的元数据，服务器重新关联文件和元数据。
先发送元数据，然后return一个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动作方法中添加一个断点，并检查是否可以得到正确的数据before/after发送Ajax请求。截图如下：

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

操作方法调试截图：

ASP Net Core3.1 AJAX Post 向控制器发送 NULL

ASP Net Core3.1 AJAX Post Sending NULL to Controller

javascript

c#

ajax

model-view-controller

asp.net-core