JQuery Ajax Kullanarak Nesnelerin Listesini Bir MVC Denetleyici Yöntemine Aktarma

JQuery'nin ajax () işlevini kullanarak bir MVC denetleyici yöntemine bir nesne dizisi geçirmeye çalışıyorum. PassThing () C # denetleyici yöntemine girdiğimde, "şeyler" bağımsız değişkeni boş. Bunu argüman için bir Liste türü kullanarak denedim, ancak bu da işe yaramıyor. Neyi yanlış yapıyorum?

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

NickW'nin önerisini kullanarak, things = JSON.stringify({ 'things': things });işte tam kodu kullanarak bunu çalıştırmayı başardım .

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

Bundan öğrendiğim iki şey var:

1. ContentType ve dataType ayarları, ajax () işlevinde kesinlikle gereklidir. Kayıplarsa işe yaramaz. Bunu çok deneme yanılmadan sonra buldum.

2. Bir nesne dizisini bir MVC denetleyici yöntemine geçirmek için, JSON.stringify ({'things': things}) biçimini kullanmanız yeterlidir.

Umarım bunun bir başkasına yardımı olur!

Bunu yapamaz mısın?

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

... ve eyleminizi şununla işaretleyin:

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

Verilerinizi biçimlendirmek sorun olabilir. Şunlardan birini deneyin:

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

Veya ( form olmadan ASP.NET MVC Denetleyicisine bir dize dizisini nasıl gönderebilirim? )

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

Net Core 2.1 Web Uygulaması kullanıyorum ve burada çalışmak için tek bir yanıt alamadım. Ya boş bir parametre aldım (yöntem hiç çağrıldıysa) ya da 500 sunucu hatası. Olası her cevap kombinasyonuyla oynamaya başladım ve sonunda bir çalışma sonucu elde ettim.

Benim durumumda çözüm şuydu:

Komut dosyası - orijinal diziyi dizgeleştirin (adlandırılmış bir özellik kullanmadan)

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

Ve denetleyici yönteminde [FromBody] kullanın

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

Başarısızlıklar şunları içerir:

• İçeriği Adlandırma

  data: {content: nodes}, // Sunucu hatası 500

• ContentType = Sunucu hatası 500'e sahip değil

notlar

• dataTypeBazı yanıtların söylediğine rağmen, yanıt kod çözme için kullanıldığı için gerekli değildir (bu nedenle buradaki istek örnekleriyle ilgili değildir ).
• List<Thing> ayrıca denetleyici yönteminde de çalışır

Tüm bunlara mükemmel bir cevabım var: Sonunda kendimi yönetemeyecek kadar çok çözümü denedim, lütfen aşağıdaki ayrıntılı cevabı bulun:

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

Kontrolör

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
  }

Bunu çalıştırabilmemin tek yolu, JSON'u bir dize olarak geçirmek ve ardından onu kullanarak seri durumdan çıkarmaktır JavaScriptSerializer.Deserialize<T>(string input); bu, MVC 4 için varsayılan seri çözücü ise oldukça gariptir.

Modelim iç içe geçmiş nesne listelerine sahip ve JSON verilerini kullanarak elde edebileceğim en iyi şey, içinde doğru sayıda öğeye sahip olmak için en üstteki listedir, ancak öğelerdeki tüm alanlar boştu.

Bu tür şeyler o kadar da zor olmamalı.

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

Bu, sorgunuz için çalışan koddur, onu kullanabilirsiniz.

Kontrolör

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

javaScript

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

Nesne listenizi, MVC denetleyicisi tarafından beklenen parametrenin adıyla eşleşen bir özellik içeren başka bir nesneyle sarma çalışır. Önemli olan, nesne listesinin etrafındaki sarmalayıcıdır.

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

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

ASP.NET Web API kullanıyorsanız, o zaman geçmelisiniz data: JSON.stringify(things).

Ve denetleyiciniz şuna benzemelidir:

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

@ Veeresh i'den değişiklik

 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
      }

DataTable'daki seçili birkaç satırdan MVC eylemine bazı veriler göndermeye çalışırken ne yaptım:

HTML Bir sayfanın başında:

@Html.AntiForgeryToken()

(sadece bir satır gösterilir, modelden bağla):

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

JavaScript işlevini başlatan düğme:

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

JavaScript işlevi:

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

MVC eylemi:

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

Ve C # 'da 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; }
 }

SONUÇ:

HATA'nın nedeni:

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

Is özniteliği: [ValidateAntiForgeryToken]MVC eylemi içinStartWorkflow

Ajax çağrısındaki çözüm:

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

Nesnelerin Listesini göndermek için örnekteki gibi veri oluşturmanız gerekir (liste nesnesini doldurmak) ve:

veri: {model: liste},

type: "post",

Bu benim için iyi çalışıyor:

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

"C" büyük harfle "ContentType" ile.