Динамическое добавление Input для формы ввода в ASP.NET Core

Question

Работаю над .Net Core приложением. Есть форма для добавления записи на сайт (и соответственно в БД) как на картинке. Мне нужно добавить возможность загрузить несколько файлов с названием, так, чтобы была кнопка "Добавить файл", при нажатии на которую появлялись бы еще два окошка "Название" и "Загрузить файл" (как обведено красным на картинке): Собственно, нужна помощь с написанием Javascript части, а также с написанием логики добавления файлов из получившегося списка в контроллере.
Код представления:

@model UralsPro.Models.DocCaseEntries
<body>
<form asp-controller="DocCase" asp-action="AddDocsTS" method="post" enctype="multipart/form-data">
    <div class="card border-primary mb-3">
      <div class="card-header bg-transparent border-primary" style="text-align:center"><h3>Добавление новой записи</h3></div>
      <div class="card-body">
        <label asp-for="Org">Организация:</label><br />
            <select asp-for="Org" class="custom-select col-md-4">
                <option disabled selected>Выберите организацию</option>
                <option value="Опция 1 и т.д.">Опция 1 и т.д.</option>
            </select>
        <span asp-validation-for="Org" class="text-danger"></span>
        <br/>
        <label asp-for="Gosnum">Введите гос. номер ТС:</label> <br/>
        <input type="text" class="form-control col-sm-3" asp-for="Gosnum"/>
        <span asp-validation-for="Gosnum" class="text-danger"></span>
        <br/>

        <label asp-for="DocType">Название документа:</label><br />
            <select asp-for="DocType" class="custom-select col-md-4">
                <option disabled selected>Выберите тип документа</option>
                <option value="Опция 1 и т.д.">Опция 1 и т.д.</option>
            </select>
        <span asp-validation-for="DocType" class="text-danger"></span>
        <br/>
        <label>Загрузите файл</label> <br/>
        <input type="file" name="uploadedFile" class="form-control"/>
        <br/>

      <div class="card-footer bg-transparent border-primary">
          <div class="form-group mb-2" style="text-align:center">
                <button class="btn btn-outline-primary btn-lg" type="submit">Внести данные</button>
           </div>
      </div>
    </div>
  </div>
</form>

Модель данных:

public class DocCaseEntries
{
    [Key]
    public int EntryID { get; set; }
    public string TS_ID { get; set; } 
    public string Gosnum { get; set; } 
    public string DocType { get; set; }
    public string FileName { get; set; }
    public string FilePath { get; set; }
    public string Org { get; set; }
}

Код контроллера (для удобства чтения опущены некоторые моменты вроде генерации ID и проверки имени загруженного файла):

public async Task<IActionResult> AddDocsTS(DocCaseEntries docs, IFormFile uploadedFile)
    {
        if (docs.Gosnum != null && docs.Org != null)
        {
            docs.TS_ID = Create16DigitId();

            if(uploadedFile != null)
            {
                string filePath = _appEnvironment.WebRootPath + $"\\{docs.Org}\\{docs.TS_ID}";
                string fileName = Path.GetFileName(uploadedFile.FileName);
                if (!Directory.Exists(filePath))
                {
                    Directory.CreateDirectory(filePath);
                }

                using (FileStream fileStream = new FileStream(Path.Combine(filePath, fileName), FileMode.Create))
                {
                    await uploadedFile.CopyToAsync(fileStream);
                }
                DocCaseEntries newDocs = new DocCaseEntries
                {
                    TS_ID = docs.TS_ID,
                    Gosnum = docs.Gosnum.Trim().ToUpper(),
                    DocType = docs.DocType,
                    FileName = fileName,
                    FilePath = Path.Combine(filePath, fileName),
                    Org = docs.Org
                };
                _db.DocCaseEntries.Add(newDocs);
                _db.SaveChanges();

                ViewBag.SuccessMessage = $"Документ \"{fileName}\" успешно загружен!";
                return View(docs);
            }
            else
            {
                ViewBag.ErrorMessage = "Не загружен файл!";
                return View(docs);
            }

        }
        else
        {
            ViewBag.ErrorMessage = "Не указан гос. номер ТС и/или организация!";
            return View(docs);
        }
    }

БЛОГ НА HUSL

Динамическое добавление Input для формы ввода в ASP.NET Core

Ответы (0 шт):