将函数应用于克隆的行字段asp.net mvc

时间:2017-07-28 15:21:16

标签: javascript jquery asp.net-mvc

我在asp.net mvc中有一个表单。表单是动态的,允许用户添加更多字段 - 实际上它用于将项目添加到发票中。我对javascript知之甚少,但在这些条件下,我已经碰到了它,到目前为止我所做的一切都是按照教程和本网站上标记的其他问题进行的。 要向发票添加行,我正在克隆该行。我有一个访问控制器的功能,并获得在文章下拉列表中选择的项目的价格。控制器返回价格,并将值添加到“Pret”字段。它适用于第一行,但是当我添加新行并在新行中选择一篇文章时,它会改变第一行的“Pret”值。您可以在下面找到我在视图中使用的代码:

@{
    ViewBag.Title = "Iesiri";
}

<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-sm-4">
        <h2>Iesire noua</h2>
    </div>
    <div class="col-sm-8">
        <div class="title-action">
            @Html.ActionLink("Inapoi", "Index", null, new { @class = "btn btn-primary" })
        </div>
    </div>
</div>


<div class="wrapper wrapper-content animated fadeInRight">

    <div class="row">
        @using (Html.BeginForm("Create", "Iesiri", FormMethod.Post, new { id = "iesiri" }))
        {
            @Html.AntiForgeryToken()
            @Html.ValidationSummary(true)
            <div class="col-lg-12">
                <div class="tabs-container">
                    <ul class="nav nav-tabs">
                        <li class="active"><a data-toggle="tab" href="#tab-1"> Detalii document</a></li>
                        <li class=""><a data-toggle="tab" href="#tab-2"> Articole / Servicii</a></li>
                    </ul>
                    <div class="tab-content">
                        <div id="tab-1" class="tab-pane active">
                            <div class="panel-body">

                                <fieldset class="form-horizontal">

                                    <div class="form-group">
                                        <label class="control-label col-md-2" for="FormTypeID">Tip document:</label>
                                        <div class="col-md-3">
                                            <select class="chosen-select" id="TipDocument" name="TipDocument" required="true" tabindex="2">
                                                <option value="Factura">Factura</option>
                                                <option value="Bon de casa">Bon de casa</option>
                                                <option value="Factura simplificata">Factura simplificata</option>
                                                <option value="Taxare inversa">Taxare inversa</option>
                                                <option value="Fara drept de deducere (partial)">Fara drept de deducere (partial)</option>
                                                <option value="Fara drept de deducere (integral)">Fara drept de deducere (integral)</option>
                                                <option value="Servicii art.311-312">Servicii art.311-312</option>
                                                <option value="Borderou de achizitii">Borderou de achizitii</option>
                                            </select>
                                            <span class="field-validation-valid text-danger" data-valmsg-for="TipDocument" data-valmsg-replace="true"></span>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-md-2" for="FormTypeID">Seria</label>
                                        <div class="col-md-3">
                                            @Html.DropDownList("SeriaID", (SelectList)ViewBag.SeriaID, new { @class = "chosen-select", @tabindex = "2", @required = "false" })
                                            @Html.ValidationMessageFor(model => model.SeriaID, "", new { @class = "text-danger" })
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        @Html.LabelFor(model => model.NrDocument, new { @class = "control-label col-md-2" })
                                        @Html.ValidationMessageFor(model => model.NrDocument)
                                        <div class="col-md-3">
                                            @Html.TextBoxFor(model => model.NrDocument, new { @class = "form-control" })

                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-md-2" for="FormTypeID">Client</label>
                                        <div class="col-md-3">
                                            @Html.DropDownList("ClientID", (SelectList)ViewBag.ClientID, new { @class = "chosen-select", @tabindex = "2", @required = "false" })
                                            @Html.ValidationMessageFor(model => model.ClientID, "", new { @class = "text-danger" })
                                        </div>
                                    </div>
                                    @*
                                        <div class="form-group">
                                            @Html.LabelFor(model => model.VatCollection, new { @class = "control-label col-md-2" })
                                            <div class="col-md-10">
                                                <div class="checkbox checkbox-primary">
                                                    <input data-val="true" data-val-required="Camp obligatoriu - TVA I" id="VatCollection" type="checkbox" name="VatCollection" value="true">
                                                    <label for="VatCollection">
                                                        Da
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    *@
                                    <div class="form-group" id="data_document">
                                        @Html.LabelFor(model => model.DataDocument, new { @class = "control-label col-md-2" })
                                        <div class="col-md-3">
                                            <div class="input-group date">
                                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span><input id="DataDocument" type="text" class="form-control" name="DataDocument">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group" id="data_scadenta">
                                        @Html.LabelFor(model => model.ScadentaDocument, new { @class = "control-label col-md-2" })
                                        <div class="col-md-3">
                                            <div class="input-group date">
                                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span><input id="ScadentaDocument" type="text" class="form-control" name="ScadentaDocument">
                                            </div>
                                        </div>
                                    </div>
                                </fieldset>


                            </div>
                        </div>
                        <div id="tab-2" class="tab-pane">
                            <div class="panel-body">

                                <div class="table-responsive">
                                    <table class="table table-stripped table-bordered">

                                        <thead>
                                            <tr>
                                                <th>
                                                    Gestiune
                                                </th>
                                                <th>
                                                    Articol
                                                </th>
                                                <th>
                                                    Cantitate
                                                </th>
                                                <th>
                                                    Pret
                                                </th>

                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr class="data-wrapper">
                                                <td>
                                                    @Html.DropDownList("GestiuniID", (SelectList)ViewBag.GestiuniID, new { @class = "chosen-select", @style = "width:100px;", @tabindex = "2", @required = "false" })
                                                    @Html.ValidationMessageFor(model => model.GestiuniID, "", new { @class = "text-danger" })
                                                </td>
                                                <td>
                                                    @Html.DropDownList("ArticolID", (SelectList)ViewBag.ArticolID, new { @class = "chosen-select", @style = "width:100px;", @tabindex = "2", @required = "false" })
                                                    @Html.ValidationMessageFor(model => model.ArticolID, "", new { @class = "text-danger" })
                                                </td>
                                                <td>
                                                    @Html.TextBoxFor(model => model.Cantitate, new { @class = "form-control" })
                                                    @Html.ValidationMessageFor(model => model.Cantitate)
                                                </td>
                                                <td>
                                                    @Html.TextBoxFor(model => model.Pret, new { @class = "form-control" })
                                                    @Html.ValidationMessageFor(model => model.Pret)
                                                </td>


                                            </tr>

                                        </tbody>

                                    </table><br /><br /><br /><br /><br /><br />
                                </div>

                                <div class="form-group">
                                    <div>
                                        <button type="button" class="btn btn-primary add-new-data"><i class="fa fa-plus"></i></button>
                                        <button type="button" class="btn btn-danger rem-new-data"><i class="fa fa-trash"></i></button>
                                        <button class="btn btn-success " id="submit" type="submit"><i class="fa fa-check"></i>&nbsp;Finalizeaza</button>
                                        @Html.ActionLink("Renunta", "Index", null, new { @class = "btn btn-white" })
                                    </div>

                                </div>
                            </div>

                        </div>
                    </div>

                </div>

            </div>

        }
    </div>

</div>



@section Styles {
    @Styles.Render("~/plugins/awesomeCheckboxStyles")
    @Styles.Render("~/plugins/clockpickerStyles")
    @Styles.Render("~/plugins/dateRangeStyles")
    @Styles.Render("~/Content/plugins/iCheck/iCheckStyles")
    @Styles.Render("~/Content/plugins/chosen/chosenStyles")
    @Styles.Render("~/plugins/switcheryStyles")
    @Styles.Render("~/plugins/jasnyBootstrapStyles")
    @Styles.Render("~/plugins/nouiSliderStyles")
    @Styles.Render("~/plugins/dataPickerStyles")
    @Styles.Render("~/Content/plugins/ionRangeSlider/ionRangeStyles")
    @Styles.Render("~/plugins/imagecropperStyles")
    @Styles.Render("~/Content/plugins/colorpicker/colorpickerStyles")
    @Styles.Render("~/plugins/select2Styles")
    @Styles.Render("~/plugins/touchSpinStyles")
}

@section Scripts {
    @Scripts.Render("~/plugins/iCheck")
    @Scripts.Render("~/plugins/dataPicker")
    @Scripts.Render("~/plugins/ionRange")
    @Scripts.Render("~/plugins/nouiSlider")
    @Scripts.Render("~/plugins/jasnyBootstrap")
    @Scripts.Render("~/plugins/switchery")
    @Scripts.Render("~/plugins/chosen")
    @Scripts.Render("~/plugins/knob")
    @Scripts.Render("~/plugins/imagecropper")
    @Scripts.Render("~/plugins/colorpicker")
    @Scripts.Render("~/plugins/clockpicker")
    @Scripts.Render("~/plugins/dateRange")
    @Scripts.Render("~/plugins/select2")
    @Scripts.Render("~/plugins/touchSpin")

    <script type="text/javascript">
        $(document).ready(function () {
            //$('.summernote').summernote();

            var date = new Date().toISOString().substr(0, 10);
            document.getElementById("DataDocument").value = date;
            document.getElementById("ScadentaDocument").value = date;

            $('#data_document .input-group.date').datepicker({
                defaultDate:'now',
                format: 'yyyy-mm-dd',
                defaultDate: new Date(),
                todayBtn: "linked",
                keyboardNavigation: false,
                forceParse: false,
                calendarWeeks: true,
                autoclose: true
            });
            $('#data_scadenta .input-group.date').datepicker({
                defaultDate: 'now',
                format: 'yyyy-mm-dd',
                defaultDate: new Date(),
                todayBtn: "linked",
                keyboardNavigation: false,
                forceParse: false,
                calendarWeeks: true,
                autoclose: true
            });



        });

        $("#FormTypeID").prop("selectedIndex", -1);


        jQuery(function ($) {

            var clone = $("table tr.data-wrapper:first").clone(true);

            $("#TipDocument").chosen({ width: "100%" });
            $("#SeriaID").chosen({ width: "100%" });
            $("#ClientID").chosen({ width: "100%" });
            $("#GestiuniID").chosen({ width: "100%" });
            $("#ArticolID").chosen({ width: "100%" });

            $('select.GestiuniID').chosen({ width: "100%" });
            $('select.ArticolID').chosen({ width: "100%" });

            $('.chosen-select').on("chosen:showing_dropdown", function () {

                $(this).parents("div").css("overflow", "visible");

            });





            $('body').on('click', '.add-new-data', function () {                
                var ParentRow = $("table tr.data-wrapper").last();
                clone.clone(true).insertAfter(ParentRow);
                $('tr.data-wrapper:last select').chosen({ width: "100%" });          
            });

            $('body').on('click', '.rem-new-data', function () {
                $('tr.data-wrapper').last().remove();
            });

            $('body').on('change', '#ArticolID', function (e, params) {
                getPrice(e.target.value, $('#DataDocument').val());
            });

            function getPrice(id, date) {
                var data = { id: id, date: date };
                $.get('/Iesiri/GetPrice/', 
                    data, 
                    function (response) { 
                        $('#Pret').last().val(response[0].PretVanzare);
                    },
                    'json' 
                );
            }


        });



    </script>
}

非常感谢帮助:)

1 个答案:

答案 0 :(得分:0)

我解决了......答案非常简单。我不得不改变这个:

$('#Pret').last().val(response[0].PretVanzare);

进入这个:

$('tr:last td:last #Pret').val(response[0].PretVanzare);