Я пытаюсь сериализовать форму, которая может содержать массив объектов, и отправить ее в мою службу приложений, и я не могу найти способ заставить ее работать...
Вот мой метод сохранения
var brewer = _$form.serializeFormToObject();
abp.services.app.brewer.create(brewer).done(() => {
...
});
// brewerService
serviceNamespace.create = function(brewerDto, ajaxParams) {
return abp.ajax($.extend({
url: abp.appPath + 'api/services/app/brewer/Create',
type: 'POST',
data: JSON.stringify(brewerDto)
}, ajaxParams));
};
Вот моя форма
<form name="AddBrewerForm" role="form" novalidate class="form-validation">
<ul class="nav nav-tabs tab-nav-right" role="tablist">
<li role="presentation" class="active">
<a href="#brewer-detail" data-toggle="tab">@L("BrewerDetails")</a>
</li>
<li role="presentation">
<a href="#beers-list" data-toggle="tab">@L("Beers")</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane animated fadeIn active" id="brewer-detail">
<div class="row clearfix" style="margin-top:10px;">
<div class="col-sm-12">
<div class="form-group form-float">
<div class="form-line">
<input id="name" type="text" name="Name" required class="validate form-control" />
<label for="name" class="form-label">Name</label>
</div>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane animated fadeIn" id="beers-list">
<div id="beer-list-content">
<div class="brewer-beer-card row form-group form-float" style="border: 1px solid black;">
<div class="col-md-10">
<div class="form-line">
<input id="beer-0" type="text" name="Beers[0].Name" required class="validate form-control" />
<label for="beer-0" class="dynamic-beer-label form-label">@L("Name")</label>
</div>
</div>
</div>
<div class="brewer-beer-card row form-group form-float" style="border: 1px solid black;">
<div class="col-md-10">
<div class="form-line">
<input id="beer-1" type="text" name="Beers[1].Name" required class="validate form-control" />
<label for="beer-1" class="dynamic-beer-label form-label">@L("Name")</label>
</div>
</div>
</div>
</div>
<div class="row" style="margin-top: 10px;">
<div class="col-sm-12 ">
<button type="button" id="add-beer-button" class="btn btn-primary waves-effect">
@L("Add")
</button>
</div>
</div>
</div>
</div>
</form>
ApplicationServiceDto
public class InsertBrewerDto
{
[Required]
[StringLength(128)]
public string Name { get; set; }
public List<NewBrewerBeerDto> Beers { get; set; }
}
public class NewBrewerBeerDto
{
[Required]
public string Name { get; set; }
}
jquery-плагин ABP для сериализации
$.fn.serializeFormToObject = function () {
//serialize to array
var data = $(this).serializeArray();
//add also disabled items
$(':disabled[name]', this).each(function () {
data.push({ name: this.name, value: $(this).val() });
});
//map to object
var obj = {};
data.map(function (x) { obj[x.name] = x.value; });
return obj;
};
Я продолжаю получать нуль для своих массивов пива...
Итак, я попытался использовать $(form).serialize(), но получаю эту ошибку: Ваш запрос недействителен!
Попробуй это:
Так что ошибки не видно...
Ошибка консоли JavaScript:
{код: 0, сообщение: "Ваш запрос недействителен!", сведения: "Во время проверки были обнаружены следующие ошибки. ↵ - ↵", validationErrors: Array(1)} код: 0 сведения: "Обнаружены следующие ошибки во время проверки. ↵ - ↵" сообщение: "Ваш запрос недействителен!" validationErrors: Массив(1) 0: Члены: Массив(1) 0: "brewerDto" длина: 1 сообщение: ""
ИЗМЕНИТЬ1
JS для получения консоли
Во время проверки были обнаружены следующие ошибки.
var b1 = _$form.serialize();
var b2 = _$form.serializeArray();
var b3 = _$form.serializeFormToObject();
console.log(b1);
console.log(b2);
console.log(b3);
b1
Name=123&Beers%5B0%5D.Name=123&Beers%5B1%5D.Name=321
b2
(3) [{…}, {…}, {…}]
0:{name: "Name", value: "123"}
1:{name: "Beers[0].Name", value: "123"}
2:{name: "Beers[1].Name", value: "321"}
length:3
b3
{Name: "123", Beers[0].Name: "123", Beers[1].Name: "321"}
Beers[0].Name :"123"
Beers[1].Name : "321"
Name : "123"