Como postar uma matriz de objetos complexos com JSON, jQuery para ASP.NET MVC Controller?

Meu código atual se parece com o seguinte. Como posso passar meu array para o controlador e que tipo de parâmetros minha ação do controlador deve aceitar?

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

Meu método de ação do controlador parece

public JsonResult SaveOrUpdate(IList<PageDesignWidget> widgets)

Eu encontrei uma solução. Eu uso uma solução de Steve Gentile, jQuery e ASP.NET MVC - enviando JSON para um Action - Revisited .

Meu código de visualização ASP.NET MVC se parece com:

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

e minha ação do controlador é decorada com um atributo personalizado

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

O código para o atributo personalizado pode ser encontrado aqui (o link está quebrado agora).

Como o link está quebrado, este é o código para o 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 é de Json.NET

Link: serializando e desserializando JSON com Json.NET

Filtros de ação, jquery stringify, bleh ...

Peter, essa funcionalidade é nativa do MVC. Essa é uma das coisas que torna o MVC tão bom.

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

E na ação,

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

Funciona como um encanto:

Se você estiver usando jQuery 1.4+, então você deseja configurar o modo tradicional:

jQuery.ajaxSettings.traditional = true;

Conforme descrito aqui: http://www.dovetailsoftware.com/blogs/kmiller/archive/2010/02/24/jquery-1-4-breaks-asp-net-mvc-actions-with-array-parameters

Isso funciona até mesmo para objetos complexos. Se estiver interessado, você deve consultar a documentação MVC sobre Model Binding: http://msdn.microsoft.com/en-us/library/dd410405.aspx

Em .NET4.5, MVC 5não há necessidade de widgets.

Javascript:

objeto em JS:

mecanismo que posta.

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

C #

Objetos:

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

Controlador:

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

Objeto recebido:

Espero que isso economize algum tempo.

Em direção à segunda metade de Criar API REST usando ASP.NET MVC que fala JSON e XML simples , para citar:

Agora precisamos aceitar a carga útil JSON e XML, entregue via HTTP POST. Às vezes, seu cliente pode querer fazer upload de uma coleção de objetos de uma só vez para processamento em lote. Portanto, eles podem fazer upload de objetos usando o formato JSON ou XML. Não há suporte nativo na ASP.NET MVC para analisar automaticamente JSON ou XML postado e mapear automaticamente para parâmetros de ação. Então, eu escrevi um filtro que faz isso. "

Ele então implementa um filtro de ação que mapeia o JSON para objetos C # com o código mostrado.

Primeiro baixe este código JavaScript, JSON2.js , que nos ajudará a serializar o objeto em uma string.

No meu exemplo, estou postando as linhas de um jqGrid via Ajax:

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

Agora no controlador:

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

Crie uma classe JsonFilter (graças à referência 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;
            }
        }
    }

Crie outra classe para que o filtro possa analisar a string JSON para o objeto manipulável real: Esta classe comissionsJS são todas as linhas do meu 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; }
    }

Espero que este exemplo ajude a ilustrar como postar um objeto complexo.

Oh meu Deus. não precisa fazer nada de especial. apenas na sua seção de postagem, faça o seguinte:

    $.post(yourURL,{ '': results})(function(e){ ...}

No servidor, use isto:

   public ActionResult MethodName(List<yourViewModel> model){...}

este link ajuda você a fazer ...

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

    }