Question posted in
You can find the official documentation here.

How to make an Jquery Ajax call with Json data as parameter?

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

3

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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);
    }
    Login or Signup to reply.
  3. 0

    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);
        }
    });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search