0
我在asp.net mvc中有一个表单。该表格是动态的，并允许用户添加更多字段 - 实际上它用于将项目添加到发票。我对JavaScript的知识知之甚少，但在这些情况下，我碰到了它，并且到目前为止，我已经完成了以下教程和本网站上标记的其他问题。 要将行添加到发票，我正在克隆该行。我有一个访问控制器的功能，并获取在文章下拉列表中选择的项目的价格。控制器返回价格并将该值添加到“Pret”字段。它适用于第一行，但是当我添加新行并在新行中选择一篇文章时，它会改变第一行的“Pret”值。下面你可以找到我使用的视图代码：将函数应用到克隆的行字段asp.net mvc
@{
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> 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>
}
帮助将是非常赞赏:)