在创建/编辑页面上复制创建动态控件
Replicate Creating Dynamic Controls on Create/ EDIT Pages
我想显示文件附件列表（仅文件名），在创建页面上添加新附件的功能非常好。我使用 here 中的代码，请参见下面的屏幕截图..
public IList<string> Docs { get; set; }
<div class="form-group">
<label class="control-label" for="SelectedRDIMSdocs"><span class="field-name">RDIMS Document(s)</span> </label>
<div class="controls">
<div>
<div class="entry input-group col-xs-3">
<input class="form-control" name="SelectedRDIMSdocs" type="text" placeholder="#999999" />
<span class="input-group-btn">
<button class="btn btn-default btn-add" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</div>
</div>
</div>
<script>
$(function () {
$(document).on('click', '.btn-add', function (e) {
e.preventDefault();
var controlForm = $('.controls div:first'),
currentEntry = $(this).parents('.entry:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('');
controlForm.find('.entry:not(:last) .btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('btn-success').addClass('btn-danger')
.html('<span class="glyphicon glyphicon-minus"></span>');
}).on('click', '.btn-remove', function (e) {
$(this).parents('.entry:first').remove();
e.preventDefault();
return false;
});
});
</script>
我正在尝试使用以下代码为编辑页面复制这种类型的构建，但是单击加号（添加）会将条目添加到列表中间，请参见下图和 Fiddle here
<div class="form-group">
<label asp-for="Docs" class="required"><span class="field-name">Documents</span> <strong class="required">(required)</strong></label>
<div class="controls">
@foreach (var item in Model.Docs)
{
<div>
<div class="entry input-group col-xs-3">
<input class="form-control" name="SelectedDocs" type="text" placeholder="#999999" value="@item.Number" />
<span class="input-group-btn">
<button class="btn btn-danger btn-remove" type="button">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
</div>
</div>
}
<div>
<div class="entry input-group col-xs-3">
<input class="form-control" name="SelectedDocs" type="text" placeholder="#999999" />
<span class="input-group-btn">
<button class="btn btn-default btn-add" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</div>
</div>
</div>
<script>
$(function () {
$(document).on('click', '.btn-add', function (e) {
e.preventDefault();
var controlForm = $('.controls div:first'),
currentEntry = $(this).parents('.entry:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('');
controlForm.find('.entry:not(:last) .btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('btn-success').addClass('btn-danger')
.html('<span class="glyphicon glyphicon-minus"></span>');
}).on('click', '.btn-remove', function (e) {
$(this).parents('.entry:first').remove();
e.preventDefault();
return false;
});
});
</script>
在您当前的 jquery 代码中，新行首先添加到 controls 内 div 即：div:first 因为当您查看 html 结构时即:
<div class="controls"><!-- controls-->
<div><!--first div-->
<div class="entry input-group col-xs-3">
<input class="form-control" name="SelectedDocs" type="text" placeholder="#999999" value="@item.Number" />
---
</div>
<!--new row was appending here-->
</div>
<!--other rows-->
</div>
相反，您需要在此处使用 .controls:last-child 以便它获得 last div 并附加新的在那之后的行。此外，我在这里添加了额外的 class 即：somehting 以轻松克隆所需的 div 然后在删除时我使用 closest('.somehting') 来获得最接近的 div 使用那个 class 名称并删除相同的名称。
演示代码 :
$(function() {
$(document).on('click', '.btn-add', function(e) {
e.preventDefault();
//get last child of div.controls
var controlForm = $('.controls:last-child'),
//get closest div with class name somehting
currentEntry = $(this).closest('div.somehting'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('');
controlForm.find('.entry:not(:last) .btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('btn-success').addClass('btn-danger')
.html('<span class="glyphicon glyphicon-minus"></span>');
}).on('click', '.btn-remove', function(e) {
//get closest div with class somehting and remove same
$(this).closest('.somehting').remove();
e.preventDefault();
return false;
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="form-group">
<label for="RDIMSdocs"><span class="field-name">RDIMS Documents</span> </label>
<div class="controls">
<!--added this class-->
<div class="somehting">
<div class="entry input-group col-xs-3">
<input class="form-control" name="SelectedRDIMSdocs" type="text" placeholder="#999999" value="2222222">
<span class="input-group-btn">
<button class="btn btn-danger btn-remove" type="button">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
</div>
</div>
<div class="somehting">
<div class="entry input-group col-xs-3">
<input class="form-control" name="SelectedRDIMSdocs" type="text" placeholder="#999999" value="11111">
<span class="input-group-btn">
<button class="btn btn-danger btn-remove" type="button">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
</div>
</div>
<div class="somehting">
<div class="entry input-group col-xs-3">
<input class="form-control" name="SelectedRDIMSdocs" type="text" placeholder="#999999">
<span class="input-group-btn">
<button class="btn btn-default btn-add" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</div>
</div>
</div>
我想显示文件附件列表（仅文件名），在创建页面上添加新附件的功能非常好。我使用 here 中的代码，请参见下面的屏幕截图..
public IList<string> Docs { get; set; }
<div class="form-group">
<label class="control-label" for="SelectedRDIMSdocs"><span class="field-name">RDIMS Document(s)</span> </label>
<div class="controls">
<div>
<div class="entry input-group col-xs-3">
<input class="form-control" name="SelectedRDIMSdocs" type="text" placeholder="#999999" />
<span class="input-group-btn">
<button class="btn btn-default btn-add" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</div>
</div>
</div>
<script>
$(function () {
$(document).on('click', '.btn-add', function (e) {
e.preventDefault();
var controlForm = $('.controls div:first'),
currentEntry = $(this).parents('.entry:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('');
controlForm.find('.entry:not(:last) .btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('btn-success').addClass('btn-danger')
.html('<span class="glyphicon glyphicon-minus"></span>');
}).on('click', '.btn-remove', function (e) {
$(this).parents('.entry:first').remove();
e.preventDefault();
return false;
});
});
</script>
我正在尝试使用以下代码为编辑页面复制这种类型的构建，但是单击加号（添加）会将条目添加到列表中间，请参见下图和 Fiddle here
<div class="form-group">
<label asp-for="Docs" class="required"><span class="field-name">Documents</span> <strong class="required">(required)</strong></label>
<div class="controls">
@foreach (var item in Model.Docs)
{
<div>
<div class="entry input-group col-xs-3">
<input class="form-control" name="SelectedDocs" type="text" placeholder="#999999" value="@item.Number" />
<span class="input-group-btn">
<button class="btn btn-danger btn-remove" type="button">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
</div>
</div>
}
<div>
<div class="entry input-group col-xs-3">
<input class="form-control" name="SelectedDocs" type="text" placeholder="#999999" />
<span class="input-group-btn">
<button class="btn btn-default btn-add" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</div>
</div>
</div>
<script>
$(function () {
$(document).on('click', '.btn-add', function (e) {
e.preventDefault();
var controlForm = $('.controls div:first'),
currentEntry = $(this).parents('.entry:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('');
controlForm.find('.entry:not(:last) .btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('btn-success').addClass('btn-danger')
.html('<span class="glyphicon glyphicon-minus"></span>');
}).on('click', '.btn-remove', function (e) {
$(this).parents('.entry:first').remove();
e.preventDefault();
return false;
});
});
</script>
在您当前的 jquery 代码中，新行首先添加到 controls 内 div 即：div:first 因为当您查看 html 结构时即:
<div class="controls"><!-- controls-->
<div><!--first div-->
<div class="entry input-group col-xs-3">
<input class="form-control" name="SelectedDocs" type="text" placeholder="#999999" value="@item.Number" />
---
</div>
<!--new row was appending here-->
</div>
<!--other rows-->
</div>
相反，您需要在此处使用 .controls:last-child 以便它获得 last div 并附加新的在那之后的行。此外，我在这里添加了额外的 class 即：somehting 以轻松克隆所需的 div 然后在删除时我使用 closest('.somehting') 来获得最接近的 div 使用那个 class 名称并删除相同的名称。
演示代码 :
$(function() {
$(document).on('click', '.btn-add', function(e) {
e.preventDefault();
//get last child of div.controls
var controlForm = $('.controls:last-child'),
//get closest div with class name somehting
currentEntry = $(this).closest('div.somehting'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('');
controlForm.find('.entry:not(:last) .btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('btn-success').addClass('btn-danger')
.html('<span class="glyphicon glyphicon-minus"></span>');
}).on('click', '.btn-remove', function(e) {
//get closest div with class somehting and remove same
$(this).closest('.somehting').remove();
e.preventDefault();
return false;
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="form-group">
<label for="RDIMSdocs"><span class="field-name">RDIMS Documents</span> </label>
<div class="controls">
<!--added this class-->
<div class="somehting">
<div class="entry input-group col-xs-3">
<input class="form-control" name="SelectedRDIMSdocs" type="text" placeholder="#999999" value="2222222">
<span class="input-group-btn">
<button class="btn btn-danger btn-remove" type="button">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
</div>
</div>
<div class="somehting">
<div class="entry input-group col-xs-3">
<input class="form-control" name="SelectedRDIMSdocs" type="text" placeholder="#999999" value="11111">
<span class="input-group-btn">
<button class="btn btn-danger btn-remove" type="button">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
</div>
</div>
<div class="somehting">
<div class="entry input-group col-xs-3">
<input class="form-control" name="SelectedRDIMSdocs" type="text" placeholder="#999999">
<span class="input-group-btn">
<button class="btn btn-default btn-add" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</div>
</div>
</div>