CODEWITHSUNDEEP
c#asp.net
user3169822
user3169822

Reputation: 133

Insert array html in C# ASP.NET

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

Upvotes: 0

Views: 367

Answers (1)

Ifetayo
Ifetayo

Reputation: 73

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

Upvotes: 1

Related Questions