首页 > 解决方案 > 在 C# ASP.NET 中插入数组 html

问题描述

我有一个屏幕,可以在其中插入带有 js 的动态输入。我使用两张表,一张插入基本信息,另一张使用 FK 插入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));
    });

通过 JS 进行的每次插入都指向一个“产品”。在控制器中,我将数据插入到表“SOPA”中,然后我必须输入所有添加的产品,但只插入第一个产品。如何插入所有添加的“产品”?控制器如下所示:

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

标签: c#asp.net

解决方案


您可以尝试从您期望的对象中创建一个数组,然后在控制器中绑定到一个集合。我通常绑定到一个ICollection.

所以你的控制器看起来像

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

然后每个对象属性的 HTML 输入将有一个数组索引

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...

最终,您可以查看此链接


推荐阅读