Отправка массива входных данных в форме с помощью jquery

Question

У меня есть магазин товаров. У каждого товара есть идентификатор, цена и название. Когда человек нажимает кнопку «Купить», открывается форма, в которой он может заполнить свой адрес, адрес электронной почты и имя. Когда человек нажимает кнопку «Отправить», я выполняю AJAX-вызов на контроллер, отправляющий информацию.

Я пробовал несколько решений, но я не могу найти подходящее: / Что я хочу сделать, это отправить электронную почту, адрес, имя и массив продуктов.

carrinho.js (shoppingcart.js):

function go(nr) {
$('.confirm').toggleClass('comein');
$('#shoppingCart').toggle("fade");

var i = 0;

$("div #cartItems > .itemrow").each(function () {

    var nome = $(this).find("h3").text();
    var preco = $(this).find(".price").text();
    var id = $(this).find(".id").text();

    $("#form").append("" +
        "<input type='hidden' name='[" + i + "].produtos' value='" + nome + "' id='nomeenc' readonly /> " +
        "<input type='hidden' name='[" + i + "].produtos' value='" + id + "' id='idenc' readonly />" +
        "<input type='hidden' name='[" + i + "].produtos' value='" + preco + "' id='precoenc' readonly />");

    $(".messageSuccess button .removeItem").remove();
    $(".messageSuccess img").remove();
    i = i + 1;
});

$("form").on("submit", function (e) {
    e.preventDefault();

    var form = $(this);

    $.ajax({
        type: 'POST',
        url: '/Compra/Encomenda',
        data: form.serialize(),
        success: function () {
            $('.confirm').toggleClass('comein');
            $('#emptyCart').fadeToggle(nr);
            $('.messageSuccess').toggleClass('comein');
        }
    });
});
}

Контроллер:

public ActionResult Encomenda(SubmitFormModel produtos)
    {
        var model = produtos;

        string path = Server.MapPath("~/files");
        DateTime time = DateTime.Now;
        string date = time.ToString("yyyy-MM-dd-hh-mm-ss");

        XmlSerializer serializer = new XmlSerializer(typeof(SubmitFormModel));
        StreamWriter writer = new StreamWriter(path + "\\" + date + ".xml");
        serializer.Serialize(writer, model);
        writer.Close();

        return PartialView(model);
    }

SubmitFormModel.cs:

namespace Loja.Models
{
[Serializable]
public class SubmitFormModel
{
public List<Produto> Produtos { get; set; } //produto = product
    public string Morada { get; set; } //address
    public string Email { get; set; }
    public string Nome { get; set; } //name
}

}

Produto.cs:

namespace Loja.Models
{
[Serializable]
public class Produto
{
    public int Id { get; set; }
    public string Nome_produto { get; set; } //product_name
    public string Tipo { get; set; } //type
    public string Detalhes { get; set; } //details
    public string Imagem { get; set; } //image
    public int Preco { get; set; } //price
    public string ImgArt { get; set; }
}
}

Форма:

<form action="/Compra/Encomenda" method="post" id="form">
    <label class="field a-field a-field_a3 page__field">
        <input class="field__input a-field__input" placeholder="ex. Rodrigo Barradinhas" required name="nome" type="text" id="nome_cliente">
        <span class="a-field__label-wrap">
            <span class="a-field__label">Nome completo</span>
        </span>
    </label>

    <label class="field a-field a-field_a3 page__field">
        <input class="field__input a-field__input" placeholder="ex. email@domain.com" required name="email" type="text" id="email">
        <span class="a-field__label-wrap">
            <span class="a-field__label">E-mail</span>
        </span>
    </label>

    <label class="field a-field a-field_a3 page__field">
        <input class="field__input a-field__input" placeholder="ex. Rua x Nºy 1167-004 Lisboa" required name="morada" type="text" id="morada">
        <span class="a-field__label-wrap">
            <span class="a-field__label">Morada</span>
        </span>
    </label>

    <input type='submit' name='confirmar' value='confirmar' class='event' data-main='Compra' />
    <br /><br />
</form>

Я хотел добавить в свой контроллер что-то вроде: https://imgur.com/a/3woa1sy

и множество продуктов

Answer 1

Еще один способ сделать это.Я всегда считаю, что работать с JSON проще, чем с несколькими входными атрибутами.

1. Прежде всего, я рекомендую вместо того, чтобы принимать значения из текста HTML, вы должны прикрепить **data-***атрибутов.Допустим, ваш HTML похож на

<div id="cartItems">
    <div class="itemrow">
        ...
        <h3>Samsung Mobile S10</h3>
        <span class="price">350</span>
        <input type="hidden" class="id" value="34">
        ...
    </div>
    <div class="itemrow">
        ...
        <h3>IPhone 7s</h3>
        <span class="price">650</span>
        <input type="hidden" class="id" value="38">
        ...
    </div>
</div>

Вместо этого вы должны создать HTML, похожий на этот

<div id="cartItems">
    <div class="itemrow" data-pid="34" data-price="350" data-name="Samsung Mobile S10">
        ...
        <h3>Samsung Mobile S10</h3>
        <span class="price">350</span>
        <input type="hidden" class="id" value="34">
        ...
    </div>
    <div class="itemrow" data-pid="38" data-price="650" data-name="IPhone 7s">
        ...
        <h3>IPhone 7s</h3>
        <span class="price">650</span>
        <input type="hidden" class="id" value="38">
        ...
    </div>
</div>

Вы должны создать строку массива JSON для всех продуктов в корзине.Создайте ОДИН скрытый элемент управления и разместите там свои продукты JSON.

<input type="hidden" id="allproductsjson" value="">

Ваша функция может быть похожа на

$("form").on("submit", function (e) {
    e.preventDefault();
    createProductsJSON();
    var form = $(this);
    $.ajax({
        type: 'POST',
        url: '/Compra/Encomenda',
        data: form.serialize(),
        success: function () {
            $('.confirm').toggleClass('comein');
            $('#emptyCart').fadeToggle(nr);
            $('.messageSuccess').toggleClass('comein');
        }
    });
});

function createProductsJSON() {
    var jsonObj = [];
    $("#cartItems > .itemrow").each(function() {
        var pId = $(this).attr("data-pid");
        var pName = $(this).attr("data-name);
        var pPrice = $(this).attr("data-price);

        var item = {}
        item ["id"] = pId;
        item ["name"] = pName;
        item ["price"] = pPrice;

        jsonObj.push(item);
    });

    console.log(jsonObj);
    $("#allproductsjson").val(JSON.stringify(jsonObj));
}

В контроллере вы получите только одно поле, и вы можете просто выполнить анализ, чтобы получить вывод.

Дайте мне знать, если это работает для вас.

Answer 2

Это была проблема с именами переменных: /

Похоже, это проблема с именем переменной, которая возникает во время привязки. Не могли бы вы изменить имя переменной в методе public ActionResult Encomenda (SubmitFormModel produtos) и посмотреть, работает ли он? Например, Encomenda (SubmitFormModel formModel). - colinD

Это сработало. Спасибо