在MVC中使用Jquery附加元素

时间:2018-09-21 09:00:27

标签: jquery asp.net-mvc dom

我正在尝试申请发票。现在,在让用户向发票添加新行的地方,我提供了一个下拉列表,他们可以在其中选择产品,然后使用jquery从数据库中获取所有其他信息,例如价格,折扣等。一切正常。 现在保留其余信息,我必须提供ADD按钮来添加更多行产品,最后将所有信息插入db。 我已经能够部分使用jquery以多种方式做到这一点,例如“克隆”或“追加”方法。这样可以完美地创建新行。我也成功更改了元素的ID。 现在,由于生成的输出是DOM而不是实际的HTML标记,因此我无法实际使用新生成的控件ID或值进行进一步的更改。另外,我将如何获取所有新行的值并将其传递给控制器​​以插入数据库。我真的很困惑。 我知道对这些概念缺乏完全的了解,但是如果有人可以阐明一下,那就太好了。谢谢。

`

  

我用来添加局部视图的jQuery方法

function AddRows(e) {
            $.ajax({
                async: true,
                type: 'GET',
                dataType: 'html',
                url: '/CreateInvoices/Creator',
                data: { incr: e },
                success: function (data) {
                    $("#datarow").append(data);
                    alert(data);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                }
            });
        }
  

处理“产品”更改功能

 $('.Prods').change(function () {
                $.get("/CreateInvoices/GetProductInfo",
                    { ProductId: $("#prodid").val() },
                    function (data) {
                        $("#price").empty();
                        $.each(data, function (index, row) {
                            $("#price").val(row.PricePerUnit);
                            discid = row.DiscountId;
                        });

                        alert($('#price')[0].id);

                        $.get("/CreateInvoices/GetDiscountInfo",
                            { DiscountId: discid },
                            function (data) {
                                $("#disc").empty();
                                $.each(data, function (index, row) {
                                    $("#disc").val(row.DiscountNo);

                                });
                            });

                    });
            });
            });
  

调用局部视图

 <table id="datarow">
        @Html.Partial("_Inv")
    </table>
  

我的局部视图

<tr>
    <td>
        @Html.DropDownList("ProductId", null, "-- Select Product --", htmlAttributes: new { @id = "prodid" + @ViewBag.y, @class = "Prods" })
    </td>
    <td>@Html.TextBox("Price", "", htmlAttributes: new { @id = "price" + @ViewBag.y, @class = "my-form-control" })</td>
    <td>@Html.TextBox("Qty", "", htmlAttributes: new { @id = "qty" + @ViewBag.y, @class = "my-form-control" })</td>
    <td>@Html.TextBox("Discount", "", htmlAttributes: new { @id = "disc" + @ViewBag.y, @class = "my-form-control" })</td>
    <td><input type="text" class="my-form-control" /></td>
    <td>
        <input id="btnAdd" type="button" onclick="AddRows(@ViewBag.y)" value="+" />
        @if (ViewBag.y is null || ViewBag.y <= 0)
        {
//
        }
        else
        {
            <input id="btnRem1" type="button" value="-" onclick="RemoveTextBox(this)" />
        }
    </td>
</tr>`

0 个答案:

没有答案