Insert array html in C# ASP.NET

Question

I've a screen where I insert dynamic inputs with js. I work with two tables, where one I insert basic information and the other I use a FK to insert the Products.

function AddItem() {
    var nItem = Number($("#nItem").val()) + 1;
    $("#nItem").val(nItem);

    var div = document.createElement('DIV');
    div.innerHTML = '<label for="Item" class="item-label">Item:</label>';
    div.innerHTML += '<input type="text" class="item-control" id="Item" name="Item" value="'+nItem+'" style="width:32px;background-color: #e9e9e9;text-align: center" readonly/>';
    div.innerHTML += '<label for="Qtd" class="item-label">Qtd:</label>';
    div.innerHTML += '<input type="text" class="item-control Vlr" data-val-required="Campo obrigatório" id="Qtd'+nItem+'" name="Qtd" value="0" style="width:100px;text-align: center"/>';
    div.innerHTML += '<label for="Vlr" class="item-label">Valor Un:</label>';
    div.innerHTML += '<input type="text" class="item-control Vlr" data-val-required="Campo obrigatório" id="Vlr'+nItem+'" name="Vlr" value="0" style="width:100px;text-align: center"/>';
    div.innerHTML += '<label for="VlrItem" class="item-label">Valor Item:</label>';
    div.innerHTML += '<input type="number" min="1" class="item-control VlrTotal" id="VlrItem'+nItem+'" name="VlrItem" value="0.00" style="width:100px;text-align: center;background-color: #e9e9e9" readonly/>';
    div.innerHTML += '<label for="Descricao" class="item-label" >Descrição:</label>';
    div.innerHTML += '<input type="text" class="item-control Validar" data-val="true" data-val-required="Campo obrigatório" id="Descricao" name="Descricao" value="" style="width:200px;text-align: center" maxlength="200"/>';
    div.innerHTML +=    '<input type="button" value="X" class="btn btn-danger" onclick="RemoveItem(this)"/>';

    document.getElementById("tabs-3").appendChild(div);
    $("#Qtd").mask('999');
    $(".Vlr").mask('0.000.000,00', { reverse: true });

    $(".Vlr").blur(function () {
        var Vlr = $("#Vlr" + nItem).val().replace(".", "");
        Vlr = Vlr.replace(",", ".");
        var VlrItem = parseFloat(Vlr) *  parseFloat($("#Qtd" + nItem).val());
        $("#VlrItem" + nItem).val(VlrItem.toFixed(2));
    });

Each insertion via JS refers to a "Product". In the controller I insert data into the table "SOPA" and after I have to enter all the added products, but only the first one is being inserted. How do I get all added "Products" to be inserted? The controller looks like this:

public ActionResult Create(SopaItens obj)
    {
        //if (ModelState.IsValid)
        //{
            SOPA s = new SOPA();
            s.DataSolicitacao = obj.DataSolicitacao;
            s.NumSolicitacao = obj.NumSolicitacao;
            s.EmitenteId = obj.EmitenteId;
            s.AprovadorID = obj.AprovadorID;
            s.AprovadorFinalID = obj.AprovadorFinalID;
            s.CostCenterId = obj.CostCenterId;
            s.DocTypeId = obj.DocTypeId;
            s.NumDoc = obj.NumDoc;
            s.SerieDoc = obj.SerieDoc;
            s.EmitenteDoc = obj.EmitenteDoc;
            s.RetISS = obj.RetISS;
            s.StatesId = obj.StatesId;
            s.CitiesId = obj.CitiesId;
            s.AliISS = obj.AliISS;
            s.RetIRRF = obj.RetIRRF;
            s.AliIRRF = obj.AliIRRF;
            s.RetCPP = obj.RetCPP;
            s.AliCPP = obj.AliCPP;
            s.VlrLiq = obj.VlrLiq;
            s.Juros = obj.Juros;
            s.Multa = obj.Multa;
            s.Desconto = obj.Desconto;
            s.VlrFinal = obj.VlrFinal;
            s.DataVencimento = obj.DataVencimento;
            s.DataPrevista = obj.DataPrevista;
            s.ModPagId = obj.ModPagId;
            db.SOPAs.Add(s);
            db.SaveChanges();
        try
        {
            ItemSOPA i = new ItemSOPA();
            i.SOPAId = s.SOPAId;
            i.Item = obj.Item;
            i.Descricao = obj.Descricao;
            i.Qtd = obj.Qtd;
            i.Vlr = obj.Vlr;
            i.VlrItem = obj.VlrItem;
            i.VlrTotal = obj.VlrTotal;
            db.ItemSOPAs.Add(i);
            db.SaveChanges();
        }
        catch (DbEntityValidationException e)
        {
            Console.WriteLine(e);
        }

        return RedirectToAction("Index");
    }

What are s and obj? Show the full method that is supposed to do the processing, not just a fragment. — Peter B
– Peter B, Commented Nov 27, 2019 at 12:36
This does not really make sense. Also this does not help us recreate the problem. Please refactor! Try and explain what each routine is doing. It seems the js add item is creating the form. This is not the ajax call. — panoskarajohn
– panoskarajohn, Commented Nov 27, 2019 at 12:39

Ifetayo · Accepted Answer · 2019-11-27 13:32:27Z

you can try making an array off the objects you are expecting, and in the controller, bind to a collection. I usually bind to an ICollection.

So your controller would look like

public ActionResult Create(ICollection<Product> objs) { //do controller work here }

Then your HTML inputs for each object property would have an array index

var div = document.createElement('DIV');
div.innerHTML = '<label for="Item" class="item-label">Item:</label>';
div.innerHTML += '<input type="text" name="Product[0].ItemProperty" />';
div.innerHTML += '<label for="Qtd" class="item-label">Qtd:</label>';
div.innerHTML += '<input name="Product[0].QTDProperty" />';

//remaining innerhtml for first array item 0 here...

div.innerHTML = '<label for="Item" class="item-label">Item:</label>';
div.innerHTML += '<input type="text" name="Product[1].ItemProperty" />';
div.innerHTML += '<label for="Qtd" class="item-label">Qtd:</label>';
div.innerHTML += '<input name="Product[1].QtdProperty" />';
//remaining innerhtml here...

Ultimately you can check out this link

Collectives™ on Stack Overflow

Insert array html in C# ASP.NET

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related