如何使用JSON將jQuery的複雜對象數組發佈到ASP.NET MVC控制器？

Question

我目前的代碼如下所示。我如何將我的數組傳遞給控制器​​以及我的控制器動作必須接受哪種參數？

function getplaceholders() { 
    var placeholders = $('.ui-sortable'); 
    var result = new Array(); 
    placeholders.each(function() { 
     var ph = $(this).attr('id'); 
     var sections = $(this).find('.sort'); 
     var section; 

     sections.each(function(i, item) { 
      var sid = $(item).attr('id'); 

      result.push({ 'SectionId': sid, 'Placeholder': ph, 'Position': i }); 
     }); 
    }); 
    alert(result.toString()); 
    $.post(
     '/portal/Designer.mvc/SaveOrUpdate', 
     result, 
     function(data) { 
      alert(data.Result); 
     }, "json"); 
}; 

我控制器操作方法看起來像

public JsonResult SaveOrUpdate(IList<PageDesignWidget> widgets) 

Answer 1

。我使用的解決方案史蒂夫·詹蒂萊，jQuery and ASP.NET MVC – sending JSON to an Action – Revisited

我的ASP.NET MVC視圖代碼如下所示：

function getplaceholders() { 
     var placeholders = $('.ui-sortable'); 
     var results = new Array(); 
     placeholders.each(function() { 
      var ph = $(this).attr('id'); 
      var sections = $(this).find('.sort'); 
      var section; 

      sections.each(function(i, item) { 
       var sid = $(item).attr('id'); 
       var o = { 'SectionId': sid, 'Placeholder': ph, 'Position': i }; 
       results.push(o); 
      }); 
     }); 
     var postData = { widgets: results }; 
     var widgets = results; 
     $.ajax({ 
      url: '/portal/Designer.mvc/SaveOrUpdate', 
      type: 'POST', 
      dataType: 'json', 
      data: $.toJSON(widgets), 
      contentType: 'application/json; charset=utf-8', 
      success: function(result) { 
       alert(result.Result); 
      } 
     }); 
    }; 

和我控制器操作飾有一個自定義的attri自定義屬性弼

[JsonFilter(Param = "widgets", JsonDataType = typeof(List<PageDesignWidget>))] 
public JsonResult SaveOrUpdate(List<PageDesignWidget> widgets 

代碼可以發現here（即現在的鏈路斷開）。

因爲鏈接被打破，這是代號爲JsonFilterAttribute

public class JsonFilter : ActionFilterAttribute 
{ 
    public string Param { get; set; } 
    public Type JsonDataType { get; set; } 
    public override void OnActionExecuting(ActionExecutingContext filterContext) 
    { 
     if (filterContext.HttpContext.Request.ContentType.Contains("application/json")) 
     { 
      string inputContent; 
      using (var sr = new StreamReader(filterContext.HttpContext.Request.InputStream)) 
      { 
       inputContent = sr.ReadToEnd(); 
      } 
      var result = JsonConvert.DeserializeObject(inputContent, JsonDataType); 
      filterContext.ActionParameters[Param] = result; 
     } 
    } 
} 

JsonConvert.DeserializeObject從Json.NET

鏈接：Serializing and Deserializing JSON with Json.NET

Answer 2

朝Create REST API using ASP.NET MVC that speaks both JSON and plain XML下半年，引用：

現在我們需要接受JSON和XML有效載荷，通過交付HTTP POST。有時您的客戶可能想要一次性上傳一批對象進行批處理。因此，他們可以使用JSON或XML格式上傳對象。在ASP.NET MVC中沒有本地支持來自動分析發佈的JSON或XML並自動映射到Action參數。所以，我寫我找到了一個解決方案的過濾器，做它。」

然後，他實現了一個動作過濾器的JSON映射到C＃對象與代碼所示。

Answer 3

首先下載這段JavaScript代碼，JSON2.js，這將幫助我們將對象序列化爲一個字符串。在控制器上

var commissions = new Array(); 
    // Do several row data and do some push. In this example is just one push. 
    var rowData = $(GRID_AGENTS).getRowData(ids[i]); 
    commissions.push(rowData); 
    $.ajax({ 
     type: "POST", 
     traditional: true, 
     url: '<%= Url.Content("~/") %>' + AREA + CONTROLLER + 'SubmitCommissions', 
     async: true, 
     data: JSON.stringify(commissions), 
     dataType: "json", 
     contentType: 'application/json; charset=utf-8', 
     success: function (data) { 
      if (data.Result) { 
       jQuery(GRID_AGENTS).trigger('reloadGrid'); 
      } 
      else { 
       jAlert("A problem ocurred during updating", "Commissions Report"); 
      } 
     } 
    }); 

現在：

在我的例子，我通過Ajax張貼jqGrid的行

[HttpPost] 
    [JsonFilter(Param = "commissions", JsonDataType = typeof(List<CommissionsJs>))] 
    public ActionResult SubmitCommissions(List<CommissionsJs> commissions) 
    { 
     var result = dosomething(commissions); 
     var jsonData = new 
     { 
      Result = true, 
      Message = "Success" 
     }; 
     if (result < 1) 
     { 
      jsonData = new 
      { 
       Result = false, 
       Message = "Problem" 
      }; 
     } 
     return Json(jsonData); 
    } 

創建JsonFilter類（感謝JSC參考）。

public class JsonFilter : ActionFilterAttribute 
    { 
     public string Param { get; set; } 
     public Type JsonDataType { get; set; } 
     public override void OnActionExecuting(ActionExecutingContext filterContext) 
     { 
      if (filterContext.HttpContext.Request.ContentType.Contains("application/json")) 
      { 
       string inputContent; 
       using (var sr = new StreamReader(filterContext.HttpContext.Request.InputStream)) 
       { 
        inputContent = sr.ReadToEnd(); 
       } 
       var result = JsonConvert.DeserializeObject(inputContent, JsonDataType); 
       filterContext.ActionParameters[Param] = result; 
      } 
     } 
    } 

創建另一個類，以便過濾器可以解析JSON字符串實際操縱的對象：此類comissionsJS是我的jqGrid的所有行。

public class CommissionsJs 
    { 
     public string Amount { get; set; } 

     public string CheckNumber { get; set; } 

     public string Contract { get; set; } 
     public string DatePayed { get; set; } 
     public string DealerName { get; set; } 
     public string ID { get; set; } 
     public string IdAgentPayment { get; set; } 
     public string Notes { get; set; } 
     public string PaymentMethodName { get; set; } 
     public string RowNumber { get; set; } 
     public string AgentId { get; set; } 
    } 

我希望這個例子有助於說明如何發佈一個複雜的對象。

Answer 4

操作過濾器，jQuery的字符串化，...的Bleh

彼得，此功能是原產於MVC。這是使MVC如此偉大的原因之一。

$.post('SomeController/Batch', { 'ids': ['1', '2', '3']}, function (r) { 
    ... 
}); 

而且在行動，

[HttpPost] 
public ActionResult Batch(string[] ids) 
{ 
} 

就像一個魅力：

如果你正在使用jQuery 1.4以上版本，那麼你要考慮設置傳統模式：

jQuery.ajaxSettings.traditional = true; 

如此處所述：http://www.dovetailsoftware.com/blogs/kmiller/archive/2010/02/24/jquery-1-4-breaks-asp-net-mvc-actions-with-array-parameters

這甚至適用於複雜的物體。如果你有興趣，你應該看看關於模型綁定的MVC文檔：http://msdn.microsoft.com/en-us/library/dd410405.aspx

Answer 5

在.NET4.5，MVC 5不需要小部件。

的Javascript：

對象在JS：

機制，做後期。

$('.button-green-large').click(function() { 
     $.ajax({ 
      url: 'Quote', 
      type: "POST", 
      dataType: "json", 
      data: JSON.stringify(document.selectedProduct), 
      contentType: 'application/json; charset=utf-8', 
     }); 
    }); 

C＃

對象：

public class WillsQuoteViewModel 
{ 
    public string Product { get; set; } 

    public List<ClaimedFee> ClaimedFees { get; set; } 
} 

public partial class ClaimedFee //Generated by EF6 
{ 
    public long Id { get; set; } 
    public long JourneyId { get; set; } 
    public string Title { get; set; } 
    public decimal Net { get; set; } 
    public decimal Vat { get; set; } 
    public string Type { get; set; } 

    public virtual Journey Journey { get; set; } 
} 

控制器：

[AcceptVerbs(HttpVerbs.Post)] 
public ActionResult Quote(WillsQuoteViewModel data) 
{ 
.... 
} 

對象接收：

希望這可以爲您節省一些時間。

Answer 6

[HttpPost] 
    public bool parseAllDocs([FromBody] IList<docObject> data) 
    { 
     // do stuff 

    }