Serializar lista utilizando Jquery

[Nero Luz 0]

Pessoal, boa noite!

Tenho uma lista na página que está disponível no link abaixo e preciso saber como posso serializar esta lista para enviar para o servidor utilizando ajax, quando realizo submit na página o método recebe a lista de objetos, porém através de ajax não consegui.
Segue abaixo os métodos que são utilizados.

 

Chamada a requisição Ajax

            $("#addItem").click(function () {
                $.ajax({
                    url: this.href,
                    cache: false,
                    dateType: 'json',
                    success: function (html) { $("#editorRows").append(html); }
                });
                return false;
            });

Método que será chamado através de Ajax

public ViewResult BlackEditorRow(IEnumerable<Gift> Gifts)
{
return View("GiftEditorRow", new Gift());
}

Link da página

http://brt-dashboard-dev.elasticbeanstalk.com/GiftList

[KhaosDoctor 242]

Transforme em JSON e envie como string, depois no outro lado transforme de novo em array.

 

https://msdn.microsoft.com/en-us/library/system.web.helpers.json.encode%28v=vs.111%29.aspx

https://stackoverflow.com/questions/579053/how-can-i-encode-an-array-in-vb-net-to-json

[Nero Luz 0]

A minha dificuldade é justamente em como obter os dados para transformar em JSON.

[KhaosDoctor 242]

Como obter os dados? Você está dizendo que ainda não tem o retorno da função? É basicamente transformar qualquer coisa que você receber em um array. Qual é o retorno da sua função?

[Nero Luz 0]

Os dados estão em Html e preciso recuperar estas informações da página e enviar via Ajax da mesma forma como é recuperada quando submeto a página e ele recebe a lista como parâmetros.

[Nero Luz 0]

Pessoal, boa tarde!

 

Acho que minha dúvida não ficou muito clara.

 

Eu tenho uma lista de Objetos e com MVC montei essa lista em minha pagina conforme o código abaixo

 

Página Principal,

        @using (Html.BeginForm("", "", FormMethod.Post, new { id="form"}))
        {
            <div id="editorRows">
                @foreach (var gift in Model)
                {
                    Html.RenderPartial("GiftEditorRow", gift);
                }
            </div>
            @Html.ActionLink("Add Another...", "BlackEditorRow", null, new { id = "addItem" })
            <input type="submit" value="Save changes" />
        }

Partial View

    @using (Html.BeginCollectionItem("gifts"))
    {
        <div class="row">
            <div class="col-lg-5 gifts">
                @Html.LabelFor(x => x.Name)
                @Html.TextBoxFor(x => x.Name)
            </div>
            <div class="col-lg-5 gifts">
                @Html.LabelFor(x => x.Price)
                @Html.TextBoxFor(x => x.Price, new { size = 4 })
            </div>
            <a href="#" onclick="deleteContainer(this)">Delete</a> 
        </div>
    }

Quando acesso a página tenho acesso apenas ao HTML Gerado pelo Framework conforme abaixo,

<form id="form" action="/" method="post">
  <div id='editorRows'>

<!--Início da coleção-->
    <div class='editorRow'>
      <input name='gifts.index' type='hidden' value='6c117bf7-10e8-499f-9adb-7c4031051efd' autocomplete='off'>

      <!-- Item 1-->
      <div class='row'>
        <div class='col-lg-5 gifts'>
          <label for='gifts_6c117bf7-10e8-499f-9adb-7c4031051efd__Name'>Name</label>
          <input name='gifts[6c117bf7-10e8-499f-9adb-7c4031051efd].Name' id='gifts_6c117bf7-10e8-499f-9adb-7c4031051efd__Name' type='text' value='Gift One'>
        </div>
        <div class='col-lg-5 gifts'>
          <label for='gifts_6c117bf7-10e8-499f-9adb-7c4031051efd__Price'>Price</label>
          <input name='gifts[6c117bf7-10e8-499f-9adb-7c4031051efd].Price' id='gifts_6c117bf7-10e8-499f-9adb-7c4031051efd__Price' type='text' size='4' value='14.5' data-val-number='The field Price must be a number.' data-val='true'>
        </div>
        <a onclick='deleteContainer(this)' href='#'>Delete</a> 
      </div>
    </div>
    <div class='editorRow'>
      <input name='gifts.index' type='hidden' value='8c85775c-2da6-48fd-9ba8-ec1401a4bcc7' autocomplete='off'>


      <!-- Item 2 -->
      <div class='row'>
        <div class='col-lg-5 gifts'>
          <label for='gifts_8c85775c-2da6-48fd-9ba8-ec1401a4bcc7__Name'>Name</label>
          <input name='gifts[8c85775c-2da6-48fd-9ba8-ec1401a4bcc7].Name' id='gifts_8c85775c-2da6-48fd-9ba8-ec1401a4bcc7__Name' type='text' value='Gift two'>
        </div>
        <div class='col-lg-5 gifts'>
          <label for='gifts_8c85775c-2da6-48fd-9ba8-ec1401a4bcc7__Price'>Price</label>
          <input name='gifts[8c85775c-2da6-48fd-9ba8-ec1401a4bcc7].Price' id='gifts_8c85775c-2da6-48fd-9ba8-ec1401a4bcc7__Price' type='text' size='4' value='27.38' data-val-number='The field Price must be a number.' data-val='true'>
        </div>
        <a onclick='deleteContainer(this)' href='#'>Delete</a> 
      </div>
    </div>
  </div>
  <a id="addItem" href='/GiftList/BlackEditorRow'>Add Another...</a>
  <input type="submit" value='Save changes'>
</form>

Quando dou um post no formulário através do submit eu consigo recuperar a lista de objetos que compõem a mesma que estão dentro das divs com class "row", porém eu necessito recuperar estes dados utilizando JQuery para enviar via AJAX.

[Snowden 94]

jQuery

$('#form').on('submit', function(event){
// implemente a validação caso desejar
	$.ajax({
		url: $(this).attr('action'),
		method: $(this).attr('method'),
		data: $(this).serialize(),
		cache: false
	}).done(function(data){
		console.log(data) // debug success
	}).fail(function(error){
		console.log(error.statusText) // debug error
	});
	//return false;
});

Obs: você está incluindo a biblioteca jQuery 2 vezes na sua página acima.