如何使用 Json 数据作为参数进行 Jquery Ajax 调用？

Question

我正在 ASP.NET MVC 框架中对 Action 进行 ajax 调用。在操作中，字符串 jsonModel 始终为空。我在这里错过了什么？你能帮忙吗？

仅供参考——我正在尝试保持操作的签名与我使用现有操作的签名相同。如果我们可以检查我们将 Json 数据发送到 Action 的方式以及为什么后续操作无法获取 Json 字符串，那就太好了。

Ajax 调用：

function send(SubmissionID, EntityOrganizationID) {
    var user = $('#commentrecipients').val();
    var comment = $('#Comment').val();  

    var scObj = {};
    scObj["EntityOrganizationID"] = EntityOrganizationID;
    scObj["SubmissionID"] = SubmissionID;
    scObj["Comment"] = comment;
    scObj["RecipientModels"] = user;

    
    var jsonModel = JSON.stringify(scObj);
    alert(jsonModel);

    $.ajax({
        url: "/Submission/SubmissionHeaderCommentAction",
        dataType: "JSON", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
        data: jsonModel,
        async:false,
        success: function (result) {
            // notify the data source that the request succeeded
            options.success(result);
        },
        error: function (result) {
            // notify the data source that the request failed
            options.error(result);
        }
    });

行动：

[AuditItem("SubmissionHeaderCommentAction")]
        public ActionResult SubmissionHeaderCommentAction(string jsonModel) // jsonModel comes as null
        {
            //convert json to our poco model
            dynamic data = JObject.Parse(jsonModel);
.........

  return AdComplianceStatusResult(HttpStatusCode.OK, "Comment submitted successfully");
        }

Answer 1

修复你的 ajax

function send(SubmissionID, EntityOrganizationID) {
    var user = $('#commentrecipients').val();
    var comment = $('#Comment').val();  

    var jsonModel= 
    {
      entityOrganizationID: EntityOrganizationID,
    submissionID : SubmissionID,
    comment : comment,
   recipientModels = user
};
    $.ajax({
       url: "/Submission/SubmissionHeaderCommentAction",
         data: {jsonModel},
         success: function (result) {
            // notify the data source that the request succeeded
            options.success(result);
        },
        error: function (result) {
            // notify the data source that the request failed
            options.error(result);
        }
    });

恕我直言，使用 viewModel 的更好方法

public CommentViewModel
{
public int EntityOrganizationID {get; set;}, 
public int SubmissionID {get; set;}, 
public string Comment {get; set;}, 
public string  RecipientModels {get; set;}
}

通过这个动作

public IActionResult SubmissionHeaderCommentAction(CommentViewModel viewModel )
    {

     //do something with data
    
      return Ok("Comment submitted successfully");
    }

更新

如果您需要使用现有操作，可以使用此代码（在 Visual Studio 中测试过）

public IActionResult SubmissionHeaderCommentAction(string jsonModel)
    {

CommentViewModel result= JsonConvert.DeserializeObject<CommentViewModel>(jsonModel);
    
     ....your code
    }

并使用这个 ajax

function send(SubmissionID, EntityOrganizationID) {
    var user = $('#commentrecipients').val();
    var comment = $('#Comment').val();  

    var jsonObj= 
    {
      entityOrganizationID: EntityOrganizationID,
    submissionID : SubmissionID,
    comment : comment,
   recipientModels = user
  };
var jsonModel= = JSON.stringify(jsonObj);

    $.ajax({
       url: "/Submission/SubmissionHeaderCommentAction",
         data: { JsonModel:jsonModel },
         success: function (result) {
            // notify the data source that the request succeeded
            options.success(result);
        },
        error: function (result) {
            // notify the data source that the request failed
            options.error(result);
        }
    });

Answer 2

试试看：

 var jsonModel = JSON.stringify(scObj);

  var newObj = {data:jsonModel };//<===========  
  var newJsonModel  = JSON.stringify(newObj);//<===========

$.ajax({
            url: "/Submission/SubmissionHeaderCommentAction",
            dataType: "application/json",  //<=========
            data: newJsonModel ,//<===========
            async:false,
            success: function (result) {
                // notify the data source that the request succeeded
                options.success(result);
            },
            error: function (result) {
                // notify the data source that the request failed
                options.error(result);
            }
        });

行动：

[AuditItem("SubmissionHeaderCommentAction")]
        public ActionResult SubmissionHeaderCommentAction([FromBody]string data ) //<==============
        {
            //convert json to our yourPocoModel
           dynamic obj = JObject.Parse(data); 

  return AdComplianceStatusResult(HttpStatusCode.OK, "Comment submitted successfully");
        }

*** 已过期

Answer 3

我认为你应该改变你的概念以使事情变得更容易：

function send(SubmissionID, EntityOrganizationID) {
    var user = $('#commentrecipients').val();
    var comment = $('#Comment').val();  

    var scObj = new Object();
    scObj.entityOrganizationID = EntityOrganizationID;
    scObj.submissionID = SubmissionID;
    scObj.comment = comment;
    scObj.recipientModels = user;

    
    var jsonModel = JSON.stringify(scObj);
    alert(jsonModel);

    $.ajax({
        url: "/Submission/SubmissionHeaderCommentAction",
        dataType: "JSON", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
        data: jsonModel,
        async:false,
        success: function (result) {
            // notify the data source that the request succeeded
            options.success(result);
        },
        error: function (result) {
            // notify the data source that the request failed
            options.error(result);
        }
    });

然后简单地返回 json：

public JsonResult SubmissionHeaderCommentAction(int entityOrganizationID, int submissionID, string comment, string  recipientModels)
    {
                //so something with data
    
      return Json("Comment submitted successfully", JsonRequestBehavior.AllowGet);
    }