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

Question

I'm making an ajax call to Action in ASP.NET MVC framework. In Action string jsonModel is always getting as null. What I missing here? Can you please help?

FYI -- I'm trying to keep the signature of the Action same as I'm using an existing action. It would be great if we could check the way we are sending Json data to Action and why following action is failing to get the Json string.

Ajax Call:

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);
        }
    });

Action:

[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

try it:

 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);
            }
        });

Action:

[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");
        }

*** Uodated

Answer 2

I think you should change your concept to make things easier:

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);
        }
    });

And simply return json:

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

Answer 3

fix your 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);
        }
    });

IMHO much better way to use viewModel

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

with this action

public IActionResult SubmissionHeaderCommentAction(CommentViewModel viewModel )
    {

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

UPDATE

If you need to use existing action you can use this code ( it was tested in Visual Studio)

public IActionResult SubmissionHeaderCommentAction(string jsonModel)
    {

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

and use this 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);
        }
    });