web-dev-qa-db-fra.com

Comment publier un tableau d'objets complexes avec JSON, jQuery sur le contrôleur ASP.NET MVC?

Mon code actuel ressemble à ce qui suit. Comment puis-je transmettre mon tableau au contrôleur et quels types de paramètres mon action de contrôleur doit-elle accepter?

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

Ma méthode d'action du contrôleur ressemble à

public JsonResult SaveOrUpdate(IList<PageDesignWidget> widgets)
c#javascriptjqueryasp.net-mvcjson
92
JSC

J'ai trouvé une solution. J'utilise une solution de Steve Gentile, jQuery et ASP.NET MVC - envoi de JSON à une action - Revisited.

Mon code de vue ASP.NET MVC se présente comme suit:

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

et mon action de contrôleur est décorée avec un attribut personnalisé

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

Le code pour l'attribut personnalisé peut être trouvé ici (le lien est cassé maintenant).

Parce que le lien est cassé c'est le code pour le 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 provient de Json.NET

Lien: Sérialisation et désérialisation de JSON avec Json.NET

84
JSC

Filtres d'action, jQuery stringify, bleh ...

Peter, cette fonctionnalité est native de MVC. C'est l'une des choses qui rend MVC si formidable.

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

Et dans l'action,

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

Fonctionne comme un charme:

enter image description here

Si vous utilisez jQuery 1.4+, vous voulez examiner la configuration du mode traditionnel:

jQuery.ajaxSettings.traditional = true;

Comme décrit ici: http://www.dovetailsoftware.com/blogs/kmiller/archive/2010/02/24/jquery-1-4-breaks-asp-net-mvc-actions-with-array- paramètres

Cela fonctionne même pour les objets complexes. Si vous êtes intéressé, vous devriez consulter la documentation de MVC sur la liaison de modèle: http://msdn.Microsoft.com/en-us/library/dd410405.aspx

22
Levitikon

Dans .NET4.5, MVC 5 pas besoin de widgets.

Javascript:

objet dans JS: enter image description here

mécanisme qui poste.

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

C #

Objets:

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

Manette:

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

Objet reçu:

enter image description here

J'espère que cela vous fait gagner du temps.

11
Matas Vaitkevicius

Vers la seconde moitié de Création REST utilisant ASP.NET MVC qui parle à la fois JSON et XML simple, pour citer:

Nous devons maintenant accepter les données utiles JSON et XML, livrées via HTTP POST. Parfois, votre client peut vouloir télécharger une collection d'objets en une fois pour le traitement par lots. Ils peuvent donc télécharger des objets en utilisant le format JSON ou XML. ASP.NET MVC ne prend pas en charge natif l’analyse automatique des données JSON ou XML publiées et l’association automatique aux paramètres Action. Donc, j'ai écrit un filtre qui le fait. "

Il implémente ensuite un filtre d'action qui mappe les objets JSON à C # avec le code affiché.

8
anonymous

Commencez par télécharger ce code JavaScript, JSON2.js , qui nous aidera à sérialiser l’objet dans une chaîne.

Dans mon exemple, je poste les lignes d'un 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");
            }
        }
    });

Maintenant sur le contrôleur:

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

Créez une classe JsonFilter (grâce à la référence 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;
            }
        }
    }

Créez une autre classe pour que le filtre puisse analyser la chaîne JSON avec l'objet manipulable réel: Cette classe comissionsJS correspond à toutes les lignes de mon 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; }
    }

J'espère que cet exemple aide à illustrer comment publier un objet complexe.

7
Sanchitos

Oh mon Dieu. pas besoin de faire quelque chose de spécial. procédez comme suit uniquement dans votre section de messages:

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

Sur le serveur, utilisez ceci:

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

ce lien vous aider à faire ...

0
mahdi moghimi