JSON, jQuery के साथ ASP.NET MVC नियंत्रक के साथ जटिल वस्तुओं की एक सरणी कैसे पोस्ट करें?


92

मेरा वर्तमान कोड निम्न जैसा दिखता है। मैं अपने सरणी को नियंत्रक के पास कैसे भेज सकता हूं और मेरे नियंत्रक कार्रवाई को किस प्रकार के मापदंडों को स्वीकार करना चाहिए?

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)

जवाबों:


84

मुझे एक उपाय मिल गया है। मैं स्टीव जेंटाइल, jQuery और ASP.NET MVC के समाधान का उपयोग करता हूं - JSON को एक कार्रवाई में भेज रहा हूं - पुनरीक्षित

मेरा 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);
            }
        });
    };

और मेरी नियंत्रक क्रिया को एक कस्टम विशेषता से सजाया गया है

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

कस्टम विशेषता के लिए कोड यहां पाया जा सकता है (लिंक अब टूट गया है)।

क्योंकि लिंक टूट गया है यह 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 से है

लिंक: JSON.NET के साथ JSON का सीरियल और वर्णन करना


बहुत अच्छा लग रहा है - ब्लॉग पोस्ट और कस्टम विशेषता कोड लिंक अब काम नहीं करते - क्या आप पुन: पोस्ट कर सकते हैं?
छोटीछोटी

4
इस समाधान के लिए क्लाइंट और सर्वर साइड पर परिवर्तन की आवश्यकता होती है। मुझे पता है कि आपको इसकी ज़रूरत बहुत पहले थी, लेकिन मैं एक अलग दृष्टिकोण के लिए एक लिंक भी प्रदान कर सकता हूं, जो कि एक साधारण jQuery प्लगइन का उपयोग करता है जो कि जावास्क्रिप्ट वस्तु को एक ऐसे रूप में परिवर्तित करना संभव बनाता है जिसे डिफ़ॉल्ट मॉडल बाइंडर समझता है और मापदंडों को बांधता है। कोई फिल्टर की जरूरत है। iraticdev.blogspot.com/2010/12/… मुझे नहीं पता कि आपने सत्यापन त्रुटियों को कैसे हल किया, लेकिन मेरे पास इसके लिए एक समाधान भी है: iraticdev.blogspot.com/2010/11/…
रॉबर्ट कोरिटनिक

3
क्या आप JavaScriptConvert.DeserializeObject का स्रोत / उत्पत्ति दे सकते हैं?
मैथ्यू

यह न्यूटनसॉफ्ट जोंस लाइब्रेरी है - यदि आप नगेट पैकेज मैनेजर खोलते हैं और न्यूटनसॉफ्ट पर खोज करते हैं, तो यह आपके लिए दिखाई देगा (अब यह 2016 है)। संभवतः यह अब स्पष्ट है, लेकिन मामले में कोई भी आश्चर्यचकित है।
रॉब सदलर

22

एक्शन फिल्टर्स, jquery stringify, blh ...

पीटर, यह कार्यक्षमता 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

यह भी जटिल वस्तुओं के लिए काम करता है। यदि आप रुचि रखते हैं, तो आपको मॉडल बंधन के बारे में एमवीसी प्रलेखन में देखना चाहिए: http://msdn.microsoft.com/en-us/library/dd410405.aspx


1
आप सही हो सकते हैं, लेकिन JSON मॉडल बाइंडर MVC3 के लिए नया है और यह सवाल 2008 में पूछा गया था जब यह समर्थित नहीं था। यह आपके उत्तर में ध्यान देने योग्य होगा।
पायोत्र ओविसक

3
यह जटिल वस्तुओं की एक सरणी को पारित करने का एक उदाहरण कैसे है ?
डकमास्ट्रो

यह नहीं है लेकिन उदाहरण अभी भी लागू होता है (MVC 3+)। जब तक आपके पैरामीटर के नाम उस मॉडल के साथ मेल खाते हैं जिनसे आप उम्मीद कर रहे हैं कि आपके पास कोई मुद्दा नहीं होगा।
जे। मिशेल

यहां कुंजी विधि पैरामीटर नाम ("आईडी") के साथ एक JSON ऑब्जेक्ट बनाने के लिए है और फिर उसके भीतर जटिल ऑब्जेक्ट्स की सरणी डालें। इसके अतिरिक्त, तीसरा पैरामीटर "सच" बनाएं और आप पारंपरिक मोड का ध्यान रखेंगे।
redwards510

11

में .NET4.5, MVC 5विगेट्स की कोई आवश्यकता नहीं है।

जावास्क्रिप्ट:

जेएस में वस्तु: यहां छवि विवरण दर्ज करें

तंत्र जो पोस्ट करता है।

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

सी#

वस्तुओं:

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)
{
....
}

प्राप्त वस्तु:

यहां छवि विवरण दर्ज करें

आशा है कि यह आपको कुछ समय बचाता है।


8

ASP.NET MVC का उपयोग करके REST API के दूसरे भाग की ओर, जो JSON और प्लेन XML दोनों को बोलता है :

अब हमें JSON और XML पेलोड को स्वीकार करने की आवश्यकता है, जो HTTP POST के माध्यम से दिया गया है। कभी-कभी आपका क्लाइंट बैच प्रोसेसिंग के लिए एक शॉट में वस्तुओं का संग्रह अपलोड करना चाहता हो सकता है। इसलिए, वे JSON या XML प्रारूप का उपयोग करके ऑब्जेक्ट अपलोड कर सकते हैं। ASP.NET MVC में स्वचालित रूप से JSON या XML पोस्ट करने और स्वचालित रूप से कार्रवाई मापदंडों पर मैप करने के लिए कोई मूल समर्थन नहीं है। इसलिए, मैंने एक फ़िल्टर लिखा जो इसे करता है। "

वह तब एक एक्शन फ़िल्टर लागू करता है जो JSON को C # ऑब्जेक्ट्स को कोड के साथ मैप करता है।


मैं बस अपनी अवाज लिख रहा था। लेकिन मैं इसे वैसे भी पोस्ट करूंगा ;-)
JSC

7

सबसे पहले इस जावास्क्रिप्ट कोड को डाउनलोड करें, JSON2.js , जो हमें एक स्ट्रिंग में ऑब्जेक्ट को सीरियल करने में मदद करेगा।

अपने उदाहरण में मैं अजाक्स के माध्यम से एक jqGrid की पंक्तियों को पोस्ट कर रहा हूं :

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

अब कंट्रोलर पर:

    [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 स्ट्रिंग को वास्तविक मैनिपुलेबल ऑब्जेक्ट में पार्स कर सके: यह क्लास कॉमिशनजेज़ मेरे 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; }
    }

मुझे उम्मीद है कि यह उदाहरण एक जटिल वस्तु को पोस्ट करने का तरीका बताने में मदद करता है।


0

हे भगवान। कुछ खास करने की जरूरत नहीं है। केवल आपके पोस्ट अनुभाग में निम्नानुसार है:

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

सर्वर में इसका उपयोग करें:

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

इस लिंक की मदद से आप ...


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

    }
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.