JQuery অ্যাজাক্স ব্যবহার করে কোনও এমভিসি নিয়ন্ত্রণকারী পদ্ধতিতে অবজেক্টগুলির একটি তালিকা পাস করা


113

আমি jQuery এর এজাক্স () ফাংশনটি ব্যবহার করে একটি এমভিসি নিয়ামক পদ্ধতিতে অবজেক্টগুলির একটি অ্যারে পাস করার চেষ্টা করছি। আমি যখন পাসটিহিং () সি # নিয়ামক পদ্ধতিতে প্রবেশ করি তখন "জিনিস" যুক্তিটি বাতিল ull আমি আর্গুমেন্টের জন্য এক ধরণের তালিকা ব্যবহার করে এটি চেষ্টা করেছি, তবে এটিও কার্যকর হয় না। আমি কি ভুল করছি?

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


3
আপনার ডেটা একটি স্ট্রিং, তবুও আপনার পদ্ধতিটি একটি অ্যারে গ্রহণ করে। একটি স্ট্রিং গ্রহণ করতে আপনার পদ্ধতিটি পরিবর্তন করুন, তারপরে এটি পদ্ধতির মধ্যেই ডিসরিয়ালাইজ করুন।
বব হর্ন

2
আপনার কোডটি সঠিক। আমি এটি পরীক্ষা করেছি এবং এটি এমভিসি ৪ ব্যবহার করে কাজ করেছে Please দয়া করে এটি বের করার জন্য আরও ডেটা সরবরাহ করুন।
দিয়েগো

এটি দুর্দান্ত স্টাফ তবে আপনি যদি স্ট্রিংগুলির পাস করার জন্য কেবল একটি তালিকার প্রয়োজন না তবে স্ট্রিংগুলির তালিকার সাথে যুক্ত একটি পৃথক আইডি অন্তর্ভুক্ত করার প্রয়োজন হয় তবে কী করবেন? যেমন, গ্রুপ আইডি, গ্রুপ আইডির অধীনে গ্রুপগুলির তালিকা।
নাথান ম্যাককাস্কলে

উত্তর:


188

নিকডাব্লুর পরামর্শটি ব্যবহার করে, আমি 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 ({'জিনিস': জিনিস}) ফর্ম্যাটটি ব্যবহার করুন।

আমি আশা করি এটি অন্য কাউকে সাহায্য করবে!


8
আমার একই সমস্যা ছিল এবং কনটেন্ট টাইপ এটি সংশোধন করে। ধন্যবাদ!
রোশেল সি

9
দুটি বিষয় লক্ষণীয়: JSON.stringify এবং 'কন্টেন্ট টাইপ' নির্দিষ্ট করে।
দিনেশ ygv

টি ককটেলের। তবুও আমার পক্ষে কাজ করছে না। আমার অনুরোধ URL হল http://localhost:52459/Sales/completeSale?itemsInCart=[{"ItemId":1,"Quantity":"1","Price":3.5}]এবং Sales.completeSaleহয় public ActionResult completeSale(ItemInCart[] itemsInCart), একটি হিসাবে সটীক HttpGet
আবাল্টার

3
যে কোনও কারণে আমাকে কেবল ব্যবহার করতে হয়েছিলdata: JSON.stringify(things),
রব স্কট

1
dataTypeপ্রয়োজন হয় না. যদি এটি বাদ দেওয়া হয় তবে

32

আপনি কি শুধু এটি করতে পারেন না?

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

3
এটি সেরা উত্তর হওয়া উচিত। JSON.stringify এই ক্ষেত্রে ব্যবহার করা উচিত নয়

এটি আমার পক্ষে কাজ করছে না ... আমি [এইচটিটিপি পোস্ট] পাবলিক ইন সেভআরসাল্টস (তালিকা <শর্টডেটেল> মডেল) {} এবং $ .পোস্ট ("@ ইউআরএল.একশন (" SaveResults "," মানচিত্র ")), {মডেল ব্যবহার করছি: ডেটা আইটেমস}, ফাংশন (ফলাফল) {});
সামরা

2
এটা আমার জন্য কাজ করেছে। একেবারে সেরা উত্তর। আমি জানি না কেন হ্যালসিওন বাস্তবায়ন কাজ করে নি। PassThings ফাংশনটি আহ্বান করা হয়েছিল তবে 'জিনিসগুলি' ইনপুট ভেরিয়েবলটি কল করার ঠিক আগে জাভাস্ক্রিপ্টে পূরণ করা হলেও খালি ছিল।
লিওনার্দো ডাগা

13

আপনার ডেটা ফর্ম্যাট করা যা সমস্যা হতে পারে। এর মধ্যে যে কোনও একটি ব্যবহার করে দেখুন:

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

বা ( আমি কীভাবে কোনও ফর্ম ছাড়াই এএসপি.নেট এমভিসি নিয়ন্ত্রকের কাছে স্ট্রিংয়ের একটি অ্যারে পোস্ট করতে পারি? )

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

আপনার কোডটি নিকটে, তবে এটি কার্যকর হয় না। আপনার পরামর্শের জন্য আমি কোডটি কাজ করে পেতে সক্ষম হয়েছি। আমার উত্তর উপরে দেখুন।
হালসিওন

12

আমি একটি নেট নেট ২.১ ওয়েব অ্যাপ্লিকেশন ব্যবহার করছি এবং এখানে কাজ করার জন্য একটি উত্তর পাওয়া যায়নি। আমি হয় ফাঁকা প্যারামিটার পেয়েছি (যদি পদ্ধতিটি একেবারেই বলা হত) অথবা একটি 500 টি সার্ভার ত্রুটি। আমি উত্তরগুলির প্রতিটি সম্ভাব্য সংমিশ্রণ নিয়ে খেলতে শুরু করেছি এবং অবশেষে একটি কার্যকরী ফলাফল পেয়েছি।

আমার ক্ষেত্রে সমাধানটি নিম্নরূপ ছিল:

স্ক্রিপ্ট - মূল অ্যারে (নামকরণ করা সম্পত্তি ব্যবহার না করে)

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

এবং নিয়ামক পদ্ধতিতে, [ফ্রমবিডি] ব্যবহার করুন

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

ব্যর্থতা অন্তর্ভুক্ত:

  • বিষয়বস্তুর নামকরণ

    ডেটা: {সামগ্রী: নোডস //, // সার্ভার ত্রুটি 500

  • কনটেন্ট টাইপ = সার্ভার ত্রুটি 500 নেই 500

মন্তব্য

  • dataTypeকিছু উত্তর যা বলে তা সত্ত্বেও প্রয়োজন হয় না, কারণ এটি প্রতিক্রিয়া ডিকোডিংয়ের জন্য ব্যবহৃত হয় (সুতরাং অনুরোধের সাথে প্রাসঙ্গিক নয়) উদাহরণগুলির সাথে এখানে )।
  • List<Thing> নিয়ামক পদ্ধতিতেও কাজ করে

10

এই সমস্ত কিছুর জন্য আমার সঠিক উত্তর আছে: আমি চেষ্টা করেছি এতগুলি সমাধান শেষ পর্যন্ত নিজেকে পরিচালনা করতে সক্ষম না হয়ে, দয়া করে নীচের বিশদ উত্তরটি সন্ধান করুন:

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

নিয়ন্ত্রকের

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
  }

আপনার আরও উচিৎ হওয়া উচিত: প্রচলিত:
জ্যাকারি

7

আমি এই কাজটি করতে পারার একমাত্র উপায় হ'ল JSON কে স্ট্রিং হিসাবে পাস করা এবং তারপরে এটি ডিসরিয়ালাইজ করা JavaScriptSerializer.Deserialize<T>(string input), এটি এমভিসি 4 এর জন্য ডিফল্ট ডিসরিয়ালাইজার হলে এটি বেশ বিস্ময়কর।

আমার মডেলটিতে অবজেক্টের তালিকাগুলির তালিকা রয়েছে এবং জেএসওএন ডেটা ব্যবহার করে আমি সবচেয়ে ভালভাবে জানতে পেতাম যে এতে সঠিক আইটেমের সংখ্যা থাকতে পারে তবে আইটেমের সমস্ত ক্ষেত্র শূন্য ছিল।

এই ধরণের জিনিস এত কঠিন হওয়া উচিত নয়।

    $.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);

এই কাজটি করতে, আজাক্স কলটির বিন্যাসটি নিবিড়ভাবে অনুসরণ করুন।
গ্রাহাম লাইট

4

এটি আপনার প্রশ্নের জন্য কোড কাজ করছে, আপনি এটি ব্যবহার করতে পারেন।

নিয়ন্ত্রকের

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

2

এমভিসি নিয়ামক কাজ দ্বারা প্রত্যাশিত প্যারামিটারের নামের সাথে মেলে এমন একটি সম্পত্তি যুক্ত অন্য কোনও অবজেক্টের সাথে আপনার অবজেক্টগুলির তালিকা মোড়ানো। গুরুত্বপূর্ণ বিট অবজেক্ট তালিকার চারপাশে মোড়ক হওয়া।

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

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

এজ্যাক্স ব্যবহার করে মডেল অবজেক্টের তালিকা পাস করার জন্য এই কোডটি ব্যবহার করে দেখুন। মডেল আইলিস্ট <মডেল> উপস্থাপন করে। মানগুলি পেতে কন্ট্রোলারে আইলিস্ট <মডেল> ব্যবহার করুন।
আথুল নালুপুরাক্কল

0

আপনি যদি এএসপি.নেট ওয়েব এপিআই ব্যবহার করে থাকেন তবে আপনার কেবল পাস করা উচিত data: JSON.stringify(things)

এবং আপনার কন্ট্রোলারের এমন কিছু দেখতে পাওয়া উচিত:

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

0

@ ভেরেশ থেকে পরিবর্তন ification

 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
      }

0

ডেভিটেবলের কয়েকটি নির্বাচিত সারি থেকে এমভিসি অ্যাকশনে কিছু পাঠানোর চেষ্টা করার সময় আমি কী করেছি:

এইচটিএমএল একটি পৃষ্ঠার শুরুতে:

@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)

এবং সি # তে মডেল:

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

আজাক্স কলটিতে সমাধান:

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

অবজেক্টের তালিকা প্রেরণ করতে আপনাকে উদাহরণ তৈরি করতে (যেমন পপুলেটিং লিস্ট অবজেক্ট) এবং:

ডেটা: {মডেল: তালিকা},

প্রকার: "পোস্ট",


0

এটি আমার পক্ষে ঠিকঠাক কাজ করে:

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

মূলধন "সি" তে "কন্টেন্টটাইপ" সহ।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.