вы представили элемент управления Syncfusion в качестве компонента оболочки.нажимая кнопку «Добавить», вы клонировали уже отрендеренные компоненты обертки и снова перерисовали как новый набор.Таким образом, клонированный элемент снова отображается в компоненте-обертке (так что вы можете получить двойную рамку и значки в компонентах).Следовательно, чтобы избавиться от этой проблемы, рекомендуется отображать компоненты Syncfusion в качестве элементов ввода, а не компонентов-оболочек.Вот измененный фрагмент кода,
[Clone.cshtml]
<form method="post">
<div id="abc" class="row">
<div id="xyz" class="col-md-3">
<div class="card">
<div class="card-header applicant-title">
<span>Applicant 1</span>
</div>
<div class="card-body">
<div class="form-group row">
<label asp-for="Applicants[0].SocialSecurityNumber" class="col-sm-4 col-form-label"></label>
<div class="col-sm-8">
@* Render the masked edit component as input *@
<input type="text" id="Applicants_0__SocialSecurityNumber" name="Applicants[0].SocialSecurityNumber" />
<span asp-validation-for="Applicants[0].SocialSecurityNumber" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<label asp-for="Applicants[0].Birthdate" class="col-sm-4 col-form-label"></label>
<div class="col-sm-8">
@* Render the datepicker component as input *@
<input type="text" id="Applicants_0__Birthdate" name="Applicants[0].Birthdate" />
<span asp-validation-for="Applicants[0].Birthdate" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<label asp-for="Applicants[0].PhoneNumber" class="col-sm-4 col-form-label"></label>
<div class="col-sm-8">
@* Render the masked edit component as input *@
<input type="text" id="Applicants_0__PhoneNumber" name="Applicants[0].PhoneNumber" />
<span asp-validation-for="Applicants[0].PhoneNumber" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<label asp-for="Applicants[0].WorkPhoneNumber" class="col-sm-4 col-form-label"></label>
<div class="col-sm-8">
@* Render the masked edit component as input *@
<input type="text" id="Applicants_0__WorkPhoneNumber" name="Applicants[0].WorkPhoneNumber" />
<span asp-validation-for="Applicants[0].WorkPhoneNumber" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<label asp-for="Applicants[0].Points" class="col-sm-4 col-form-label"></label>
<div class="col-sm-8">
@* Render the numeric text box component as input *@
<input type="text" id="Applicants_0__Points" name="Applicants[0].Points" />
<span asp-validation-for="Applicants[0].Points" class="text-danger"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-md-12">
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
@ Сценарии раздела {
<script type="text/javascript">
// Copy the clone element of the Syncfusion controls
var xyz = $("#xyz").clone();
// store the DOM string and assign the value to "xyz"
xyz = xyz[0].outerHTML;
// Take the another one copy of the outer HTML element into "copy" for further reference
var copy = xyz;
var i = 0;
$("#btnAdd").click(function () {
i++;
// convert the outer HTML string into the HTML DOM object.
xyz = $(xyz);
// Assign the unique ID for the each card control
xyz[0].setAttribute('id', 'xyz' + i);
xyz.find('label').each(function () {
var attr = $(this).attr("for");
if (attr != null) {
$(this).attr("for", attr.replace('_0_', '_' + i + '_'));
}
});
xyz.find('input').each(function () {
this.name = this.name.replace('[0]', '[' + i + ']');
this.id = this.id.replace('_0_', '_' + i + '_');
$(this).val(null);
});
xyz.find('span').each(function () {
var attr = $(this).data("valmsg-for");
if (attr != null) {
$(this).attr("data-valmsg-for", attr.replace('[0]', '[' + i + ']'));
}
});
var divTitle = xyz.find('.applicant-title span')[0];
divTitle.innerText = divTitle.innerText.replace('1', i + 1);
$("#abc").append(xyz);
// Declare new instance for Syncfusion control settings will helps to render the component as a new set without any issues.
// Render masked text box component
var MaskedTextBox1 = new ejs.inputs.MaskedTextBox({
"mask": "000-00-0000"
});
// Render the datepicker component
var DatePicker1 = new ejs.calendars.DatePicker({
"placeholder": "Choose a Date"
});
// Render the masked text box component
var MaskedTextBox2 = new ejs.inputs.MaskedTextBox({
"mask": "(999)-999-9999"
});
// Render the masked text box component
var MaskedTextBox3 = new ejs.inputs.MaskedTextBox({
"mask": "(999)-999-9999"
});
// Render the numeric text box component
var NumericTextBox1 = new ejs.inputs.NumericTextBox({
"format": "n",
"max": 50,
"min": 0,
"showSpinButton": false,
"step": 1.0
});
// APPEND Syncfusion settings to copied controls
MaskedTextBox1.appendTo("#Applicants_" + i + "__SocialSecurityNumber");
DatePicker1.appendTo("#Applicants_" + i + "__Birthdate");
MaskedTextBox2.appendTo("#Applicants_" + i + "__PhoneNumber");
MaskedTextBox3.appendTo("#Applicants_" + i + "__WorkPhoneNumber");
NumericTextBox1.appendTo("#Applicants_" + i + "__Points");
// Assign the reference copy of outer element to the "xyz" again
xyz = copy;
});
// Render the initially defined masked text box component
var mask = new ejs.inputs.MaskedTextBox({
"mask": "000-00-0000"
});
mask.appendTo("#Applicants_0__SocialSecurityNumber");
// Render the initially defined datepicker component
var datepicker = new ejs.calendars.DatePicker({
"placeholder": "Choose a Date"
});
datepicker.appendTo("#Applicants_0__Birthdate");
// Render the initially defined masked text box component
var mask2 = new ejs.inputs.MaskedTextBox({
"mask": "(999)-999-9999"
});
mask2.appendTo("#Applicants_0__PhoneNumber");
// Render the initially defined masked text box component
var mask3 = new ejs.inputs.MaskedTextBox({
"mask": "(999)-999-9999"
});
mask3.appendTo("#Applicants_0__WorkPhoneNumber");
// Render the initially defined numeric text box component
var numeric = new ejs.inputs.NumericTextBox({
"format": "n",
"max": 50,
"min": 0,
"showSpinButton": false,
"step": 1.0,
"showClearButton": false
});
numeric.appendTo("#Applicants_0__Points");
</script>
}
Вы можете обратиться к образцу от здесь .