Блог

Главная - Вопросы по программированию - Реплицировать создание динамических элементов управления на страницах создания / РЕДАКТИРОВАНИЯ

Реплицировать создание динамических элементов управления на страницах создания / РЕДАКТИРОВАНИЯ

#jquery #asp.net-mvc #dynamic-controls

#jquery #asp.net-mvc #динамические элементы управления

Вопрос:

Я хочу отобразить список вложенных файлов (только имя файла), возможность добавлять новые вложения на странице СОЗДАНИЯ работает отлично. Я использую код из здесь, смотрите скриншот ниже..

Работает

 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>

Я пытаюсь воспроизвести этот тип сборки для страницы РЕДАКТИРОВАНИЯ, используя приведенный ниже код, однако нажатие на плюс (добавить) добавляет запись в середину списка, пожалуйста, смотрите Изображение ниже и скрипку здесь

Не работает

 <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>

Комментарии:

1. Пожалуйста, не могли бы вы рассказать подробнее?

2. Я добавил ссылку BootSnipp для работы, а jsFiddle не работает.

Ответ №1:

В вашем текущем коде 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>

Вместо этого вам нужно использовать here .controls:last-child , чтобы получить последний разделитель и добавить новую строку после этого.Кроме того, здесь я добавил дополнительный класс, т. е. somehting чтобы легко клонировать требуемый div, а затем при удалении я использую closest('.somehting') , чтобы получить ближайший div с этим именем класса и удалить его.

Демонстрационный код :

 $(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>