JVC Ajax का उपयोग करके एक MVC कंट्रोलर विधि में वस्तुओं की एक सूची पास करना

Question

मैं jQuery के ajax () फ़ंक्शन का उपयोग करके एमवीसी कंट्रोलर विधि में ऑब्जेक्ट्स की एक सरणी को पास करने की कोशिश कर रहा हूं। जब मैं PassThing () C # कंट्रोलर विधि में आता हूं, तो तर्क "चीजें" शून्य है। मैंने तर्क के लिए एक प्रकार की सूची का उपयोग करके यह कोशिश की है, लेकिन यह भी काम नहीं करता है। मैं क्या गलत कर रहा हूं?

<script type="text/javascript">
    $(document).ready(function () {
        var things = [
            { id: 1, color: 'yellow' },
            { id: 2, color: 'blue' },
            { id: 3, color: 'red' }
        ];

        $.ajax({
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            type: 'POST',
            url: '/Xhr/ThingController/PassThing',
            data: JSON.stringify(things)
        });
    });
</script>

public class ThingController : Controller
{
    public void PassThing(Thing[] things)
    {
        // do stuff with things here...
    }

    public class Thing
    {
        public int id { get; set; }
        public string color { get; set; }
    }
}

Comments

आप JavaScriptSerializer.Deserialize Method (String, Type)

— jk

आपका डेटा एक स्ट्रिंग है, फिर भी आपका तरीका एक सरणी को स्वीकार करता है। एक स्ट्रिंग को स्वीकार करने के लिए अपनी विधि बदलें, फिर विधि के भीतर इसे पुन: व्यवस्थित करें।

— बॉब हॉर्न

आपका कोड सही है। मैंने इसका परीक्षण किया और इसने MVC 4 का उपयोग करके काम किया। कृपया इसे जानने के लिए अधिक डेटा प्रदान करें।

— डिएगो

यह बहुत अच्छा सामान है लेकिन क्या होगा यदि आपको पास करने के लिए न केवल तार की एक सूची की आवश्यकता है, बल्कि तार की सूची से जुड़े एक अलग आईडी को शामिल करने की आवश्यकता है? तो जैसे, ग्रुप आईडी, ग्रुप आईडी के तहत समूहों की सूची।

— नाथन मैककस्ले

Answer 1

NickW के सुझाव का उपयोग करते हुए, मैं यह things = JSON.stringify({ 'things': things });पूरी तरह से कोड का उपयोग करके यह काम पाने में सक्षम था ।

$(document).ready(function () {
    var things = [
        { id: 1, color: 'yellow' },
        { id: 2, color: 'blue' },
        { id: 3, color: 'red' }
    ];      

    things = JSON.stringify({ 'things': things });

    $.ajax({
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        type: 'POST',
        url: '/Home/PassThings',
        data: things,
        success: function () {          
            $('#result').html('"PassThings()" successfully called.');
        },
        failure: function (response) {          
            $('#result').html(response);
        }
    }); 
});


public void PassThings(List<Thing> things)
{
    var t = things;
}

public class Thing
{
    public int Id { get; set; }
    public string Color { get; set; }
}

इससे दो बातें सीखीं:

1. सामग्री प्रकार और डेटाटाइप सेटिंग्स अजाक्स () फ़ंक्शन में बिल्कुल आवश्यक हैं। यदि वे गायब हैं तो यह काम नहीं करेगा। मुझे बहुत परीक्षण और त्रुटि के बाद यह पता चला।

2. एमवीसी नियंत्रक पद्धति में वस्तुओं के एक सरणी में पास होने के लिए, बस JSON.stringify ({'चीज़ें': चीज़ें) 'प्रारूप' का उपयोग करें।

मैं उम्मीद करता हूं कि इससे किसी की मदद होगी!

Comments

मैं एक ही समस्या थी और contentType जोड़कर इसे ठीक किया। धन्यवाद!

— रोशेल C

दो बातें ध्यान दें: JSON.stringify और 'contentType' निर्दिष्ट करना।

— दिनेश ygv

Crud। फिर भी मेरे लिए काम नहीं कर रहा है। मेरे अनुरोध यूआरएल है http://localhost:52459/Sales/completeSale?itemsInCart=[{"ItemId":1,"Quantity":"1","Price":3.5}]और Sales.completeSaleकर रहा है public ActionResult completeSale(ItemInCart[] itemsInCart), एक के रूप में व्याख्या किए गए HttpGet।

— अबल्टर

जो भी कारण के लिए मुझे सिर्फ इस्तेमाल करना थाdata: JSON.stringify(things),

— रोब स्कॉट

dataTypeइसकी आवश्यकता नही है। यदि इसका लोप हो गया है, तो ajax फ़ंक्शन इसे रिटर्न डेटा के आधार पर काम करेगा

Answer 2

क्या आप ऐसा नहीं कर सकते?

var things = [
    { id: 1, color: 'yellow' },
    { id: 2, color: 'blue' },
    { id: 3, color: 'red' }
];
$.post('@Url.Action("PassThings")', { things: things },
   function () {
        $('#result').html('"PassThings()" successfully called.');
   });

... और अपनी कार्रवाई को चिह्नित करें

[HttpPost]
public void PassThings(IEnumerable<Thing> things)
{
    // do stuff with things here...
}

Comments

यह सबसे अच्छा जवाब होना चाहिए। JSON.stringify का उपयोग इस मामले में नहीं किया जाना चाहिए

यह मेरे लिए काम नहीं कर रहा है..मैं [HttpPost] सार्वजनिक int SaveResults (List <ShortDetail> मॉडल) {} और $ .post ("@ Url.Action (" SaveResults "," Maps ")", {मॉडल का उपयोग कर रहा हूं। dataItems}, फ़ंक्शन (परिणाम) {});

— सामरा

इसने मेरे लिए काम किया। बिल्कुल बेहतरीन जवाब। मुझे नहीं पता है कि हैलियॉन कार्यान्वयन क्यों काम नहीं किया। PassThings फ़ंक्शन को लागू किया गया था, लेकिन 'चीजें' इनपुट वैरिएबल खाली थी, भले ही वह कॉल से ठीक पहले जावास्क्रिप्ट में भरी गई हो।

— लियोनार्डो डागा

Answer 3

अपने डेटा को स्वरूपित करना जो समस्या हो सकती है। इनमें से कोई भी प्रयास करें:

data: '{ "things":' + JSON.stringify(things) + '}',

या ( मैं फार्म के बिना ASP.NET MVC नियंत्रक के लिए स्ट्रिंग की एक सरणी कैसे पोस्ट कर सकता हूं? )

var postData = { things: things };
...
data = postData

Comments

आपका कोड करीब है, लेकिन यह काम नहीं करता है। मैं आपके सुझाव के लिए कोड काम कर पाने में सक्षम था। मेरा जवाब ऊपर देखिए।

— हेलिसीन

Answer 4

मैं .Net Core 2.1 वेब एप्लिकेशन का उपयोग कर रहा हूं और काम करने के लिए यहां एक भी उत्तर नहीं मिल सका है। मुझे या तो एक रिक्त पैरामीटर मिला (यदि विधि बिल्कुल कहा जाता था) या 500 सर्वर त्रुटि। मैंने उत्तरों के हर संभव संयोजन के साथ खेलना शुरू किया और अंत में काम करने का परिणाम मिला।

मेरे मामले में समाधान इस प्रकार था:

स्क्रिप्ट - मूल सरणी (नामांकित संपत्ति का उपयोग किए बिना) को कठोर करें

    $.ajax({
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        url: mycontrolleraction,
        data: JSON.stringify(things)
    });

और नियंत्रक विधि में, [FromBody] का उपयोग करें

    [HttpPost]
    public IActionResult NewBranch([FromBody]IEnumerable<Thing> things)
    {
        return Ok();
    }

विफलताओं में शामिल हैं:

• सामग्री का नामकरण

  डेटा: {सामग्री: नोड्स}, // सर्वर त्रुटि 500

• कंटेंट टाइप न होना = सर्वर की त्रुटि 500

टिप्पणियाँ

• dataTypeजरूरत नहीं है, इसके बावजूद कि कुछ जवाब क्या कहते हैं, जैसा कि प्रतिक्रिया डिकोडिंग के लिए उपयोग किया जाता है (इसलिए यहां अनुरोध उदाहरणों के लिए प्रासंगिक नहीं है)।
• List<Thing> नियंत्रक विधि में भी काम करता है

Answer 5

मेरे पास इस सब के लिए एकदम सही जवाब है: मैंने बहुत सारे समाधान की कोशिश की, जो आखिरकार खुद को प्रबंधित करने में सक्षम नहीं है, कृपया नीचे दिए गए विवरण का जवाब पाएं:

       $.ajax({
            traditional: true,
            url: "/Conroller/MethodTest",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            data:JSON.stringify( 
               [
                { id: 1, color: 'yellow' },
                { id: 2, color: 'blue' },
                { id: 3, color: 'red' }
                ]),
            success: function (data) {
                $scope.DisplayError(data.requestStatus);
            }
        });

controler

public class Thing
{
    public int id { get; set; }
    public string color { get; set; }
}

public JsonResult MethodTest(IEnumerable<Thing> datav)
    {
   //now  datav is having all your values
  }

Comments

आपके पास अधिक upvotes होना चाहिए: पारंपरिक: सच है

— जेक्वेरी

Answer 6

मुझे काम करने का एकमात्र तरीका JSON को एक स्ट्रिंग के रूप में पास करना है और फिर इसे उपयोग करने के लिए deserialise करना है JavaScriptSerializer.Deserialize<T>(string input), जो कि MVC 4 के लिए डिफ़ॉल्ट डेज़रिएलाइज़र है, तो यह बहुत ही अजीब है।

मेरे मॉडल में ऑब्जेक्ट्स की नेस्टेड सूची है और JSON डेटा का उपयोग करके मुझे जो सबसे अच्छा मिल सकता है, वह यह है कि इसमें आइटमों की सही संख्या होने के लिए सबसे ऊपर की सूची है, लेकिन आइटमों के सभी क्षेत्र शून्य थे।

इस तरह की बात इतनी कठिन नहीं होनी चाहिए।

    $.ajax({
        type: 'POST',
        url: '/Agri/Map/SaveSelfValuation',
        data: { json: JSON.stringify(model) },
        dataType: 'text',
        success: function (data) {

    [HttpPost]
    public JsonResult DoSomething(string json)
    {
        var model = new JavaScriptSerializer().Deserialize<Valuation>(json);

Comments

इस काम को करने के लिए, अजाक्स कॉल के प्रारूप का बारीकी से पालन करें।

— ग्राहम लाईट

Answer 7

यह आपकी क्वेरी के लिए काम कर रहा कोड है, आप इसका उपयोग कर सकते हैं।

controler

    [HttpPost]
    public ActionResult save(List<ListName> listObject)
    {
    //operation return
    Json(new { istObject }, JsonRequestBehavior.AllowGet); }
    }

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

  $("#btnSubmit").click(function () {
    var myColumnDefs = [];
    $('input[type=checkbox]').each(function () {
        if (this.checked) {
            myColumnDefs.push({ 'Status': true, 'ID': $(this).data('id') })
        } else {
            myColumnDefs.push({ 'Status': false, 'ID': $(this).data('id') })
        }
    });
   var data1 = { 'listObject': myColumnDefs};
   var data = JSON.stringify(data1)
   $.ajax({
   type: 'post',
   url: '/Controller/action',
   data:data ,
   contentType: 'application/json; charset=utf-8',
   success: function (response) {
    //do your actions
   },
   error: function (response) {
    alert("error occured");
   }
   });

Answer 8

किसी अन्य ऑब्जेक्ट के साथ ऑब्जेक्ट की अपनी सूची को रैप करना, जिसमें एक संपत्ति है जो उस पैरामीटर के नाम से मेल खाती है जो MVC नियंत्रक द्वारा अपेक्षित है। वस्तु सूची के चारों ओर का आवरण महत्वपूर्ण है।

$(document).ready(function () {
    var employeeList = [
        { id: 1, name: 'Bob' },
        { id: 2, name: 'John' },
        { id: 3, name: 'Tom' }
    ];      

    var Employees = {
      EmployeeList: employeeList
    }

    $.ajax({
        dataType: 'json',
        type: 'POST',
        url: '/Employees/Process',
        data: Employees,
        success: function () {          
            $('#InfoPanel').html('It worked!');
        },
        failure: function (response) {          
            $('#InfoPanel').html(response);
        }
    }); 
});


public void Process(List<Employee> EmployeeList)
{
    var emps = EmployeeList;
}

public class Employee
{
    public int Id { get; set; }
    public string Name { get; set; }
}

Answer 9

     var List = @Html.Raw(Json.Encode(Model));
$.ajax({
    type: 'post',
    url: '/Controller/action',
    data:JSON.stringify({ 'item': List}),
    contentType: 'application/json; charset=utf-8',
    success: function (response) {
        //do your actions
    },
    error: function (response) {
        alert("error occured");
    }
});

Comments

Ajax का उपयोग करके मॉडल ऑब्जेक्ट की सूची पास करने के लिए इस कोड को आज़माएं। मॉडल IList <मॉडल> ​​का प्रतिनिधित्व करता है। मूल्यों को प्राप्त करने के लिए नियंत्रक में IList <मॉडल> ​​का उपयोग करें।

— अथुल नलूपुरक्कल १६'१ul को ur

Answer 10

यदि आप ASP.NET वेब एपीआई का उपयोग कर रहे हैं तो आपको बस पास होना चाहिए data: JSON.stringify(things)।

और आपके नियंत्रक को कुछ इस तरह दिखना चाहिए:

public class PassThingsController : ApiController
{
    public HttpResponseMessage Post(List<Thing> things)
    {
        // code
    }
}

Answer 11

@Veeresh से संशोधन i

 var data=[

                        { id: 1, color: 'yellow' },
                        { id: 2, color: 'blue' },
                        { id: 3, color: 'red' }
                        ]; //parameter
        var para={};
        para.datav=data;   //datav from View


        $.ajax({
                    traditional: true,
                    url: "/Conroller/MethodTest",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    data:para,
                    success: function (data) {
                        $scope.DisplayError(data.requestStatus);
                    }
                });

In MVC



public class Thing
    {
        public int id { get; set; }
        public string color { get; set; }
    }

    public JsonResult MethodTest(IEnumerable<Thing> datav)
        {
       //now  datav is having all your values
      }

Answer 12

जब मैंने MVC कार्रवाई के लिए DataTable में कई चयनित पंक्तियों से कुछ डेटा भेजने का प्रयास किया तो मैंने क्या किया:

HTML पृष्ठ की शुरुआत में:

@Html.AntiForgeryToken()

(बस एक पंक्ति दिखाई गई है, मॉडल से बांधें):

 @foreach (var item in Model.ListOrderLines)
                {
                    <tr data-orderid="@item.OrderId" data-orderlineid="@item.OrderLineId" data-iscustom="@item.IsCustom">
                        <td>@item.OrderId</td>
                        <td>@item.OrderDate</td>
                        <td>@item.RequestedDeliveryDate</td>
                        <td>@item.ProductName</td>
                        <td>@item.Ident</td>
                        <td>@item.CompanyName</td>
                        <td>@item.DepartmentName</td>
                        <td>@item.ProdAlias</td>
                        <td>@item.ProducerName</td>
                        <td>@item.ProductionInfo</td>
                    </tr>
                }

जावास्क्रिप्ट फ़ंक्शन शुरू करने वाला बटन:

 <button class="btn waves-effect waves-light btn-success" onclick="ProcessMultipleRows();">Start</button>

जावास्क्रिप्ट फ़ंक्शन:

  function ProcessMultipleRows() {
            if ($(".dataTables_scrollBody>tr.selected").length > 0) {
                var list = [];
                $(".dataTables_scrollBody>tr.selected").each(function (e) {
                    var element = $(this);
                    var orderid = element.data("orderid");
                    var iscustom = element.data("iscustom");
                    var orderlineid = element.data("orderlineid");
                    var folderPath = "";
                    var fileName = "";

                    list.push({ orderId: orderid, isCustomOrderLine: iscustom, orderLineId: orderlineid, folderPath: folderPath, fileName : fileName});
                });

                $.ajax({
                    url: '@Url.Action("StartWorkflow","OrderLines")',
                    type: "post", //<------------- this is important
                    data: { model: list }, //<------------- this is important
                    beforeSend: function (xhr) {//<--- This is important
                      xhr.setRequestHeader("RequestVerificationToken",
                      $('input:hidden[name="__RequestVerificationToken"]').val());
                      showPreloader();
                    },
                    success: function (data) {

                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {

                    },
                     complete: function () {
                         hidePreloader();
                    }
                });
            }
        }

एमवीसी कार्रवाई:

[HttpPost]
[ValidateAntiForgeryToken] //<--- This is important
public async Task<IActionResult> StartWorkflow(IEnumerable<WorkflowModel> model)

और C # में मॉडल:

public class WorkflowModel
 {
        public int OrderId { get; set; }
        public int OrderLineId { get; set; }
        public bool IsCustomOrderLine { get; set; }
        public string FolderPath { get; set; }
        public string FileName { get; set; }
 }

निष्कर्ष:

त्रुटि का कारण:

"Failed to load resource: the server responded with a status of 400 (Bad Request)"

विशेषता है: [ValidateAntiForgeryToken]एमवीसी कार्रवाई के लिएStartWorkflow

Ajax कॉल में समाधान:

  beforeSend: function (xhr) {//<--- This is important
                      xhr.setRequestHeader("RequestVerificationToken",
                      $('input:hidden[name="__RequestVerificationToken"]').val());
                    },

ऑब्जेक्ट्स की सूची भेजने के लिए आपको उदाहरण में डेटा बनाने की आवश्यकता है (सूची ऑब्जेक्ट को पॉप्युलेट करना) और:

डेटा: {मॉडल: सूची},

प्रकार: "पोस्ट",

Answer 13

यह मेरे लिए कैसे ठीक काम करता है:

var things = [
    { id: 1, color: 'yellow' },
    { id: 2, color: 'blue' },
    { id: 3, color: 'red' }
];

$.ajax({
    ContentType: 'application/json; charset=utf-8',
    dataType: 'json',
    type: 'POST',
    url: '/Controller/action',
    data: { "things": things },
    success: function () {
        $('#result').html('"PassThings()" successfully called.');
    },
    error: function (response) {
        $('#result').html(response);
    }
});

राजधानी "सी" में "ContentType" के साथ।