如何使用 Json 數據作為參數進行 Jquery Ajax 調用？

Question

我正在 ASP.NET MVC 框架中發出 ajax 行動號召。 在操作中，字符串 jsonModel 始終為 null。 我在這里錯過了什么？ 你能幫忙嗎？

僅供參考——我試圖保持動作的簽名與我使用現有動作的簽名相同。 如果我們可以檢查我們將 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

試試看：

 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 2

我認為你應該改變你的概念以使事情變得更容易：

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

Answer 3

修復你的 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);
        }
    });