Refre sh PartialView после публикации из UploadFile и ajax

Question

Как обновить sh частичный просмотр после загрузки моего файла?

Мой частичный просмотр:

<form id="form" name="form" action="/uploader" enctype="multipart/form-data" method="post">
               <input id="files" name="files" type="file" size="1" multiple onchange="uploadFiles('files');" /> 
            <table>
                <tr>
                    @foreach (var item in Model.Vehicules.ImageVehicules)
                    {
                        <td>
                            <img id="img_1" src="~/Fichiers/@item.ImageAnnonceUrl" style="height:100px" />
                        </td>
                    }
                </tr>
            </table>     
</form>

Мой ajax вызов:

 <script>
            function uploadFiles(inputId) {
                var input = document.getElementById(inputId);
                var files = input.files;
                var formData = new FormData();

                for (var i = 0; i != files.length; i++) {
                    formData.append("p_files", files[i]);
                }

                formData.append("p_id", @Model.Vehicules.VehiculeId);
var _url = '@Url.Action("Edit", "Annonces")';
                $.ajax(
                    {
                        url: _url,
                        data: formData,
                        processData: false,
                        contentType: false,
                        type: "POST",
                        success: function (data) {
                            alert("Files Uploaded!");
                        }
                    }
                );
            }
</script>

Мой Метод в контроллере:

  [HttpPost]
    public async Task<IActionResult> Edit(IList<IFormFile> p_files, int p_id)
    {
        IList<IFormFile> files = p_files;
        if (Request.Form.Files.Count > 0)
        {                
                for (int i = 0; i < files.Count; i++)
                {
                    IFormFile file = files[i];
                    var filePath = _env.WebRootPath + @"\Fichiers\" + file.FileName;
                    using (var stream = new FileStream(filePath, FileMode.Create))
                        await file.CopyToAsync(stream);

                    ImageVehicules img = new ImageVehicules();
                    img.ImageAnnonceUrl = file.FileName;
                    img.VehiculeId = p_id;
                    M_ImageVehicules.Insert(img); 
                }
                ModelState.Clear();
                var annonce = await M_VM_Annonces.Charger_Annonces_By_Id(p_id);
                return PartialView("_Images1", annonce);

        }
        return PartialView();
    }

Загрузка работает правильно, но представление не обновляется. Моя модель обновлена. Я должен нажать F5, чтобы иметь изображения.

Я добавляю ModelState.Clear (); но не работа.

Если у вас есть идея?

Спасибо.

Answer 1

Это решено. Я добавляю div, чтобы охватить форму, содержащую картинки:

<div id="Liste_images">
    <form id="form" name="form" action="/uploader" enctype="multipart/form-data" method="post">
        <div class="buttons">
            <div class="upload-button">
                <div class="label">Click me!</div>
                <input id="files" name="files" type="file" size="1" multiple onchange="uploadFiles('files');" />
                <br />

                <table>
                    <tr>
                        @foreach (var item in Model.Vehicules.ImageVehicules)
                        {
                            <td>
                                <img id="img_1" src="~/Fichiers/@item.ImageAnnonceUrl" style="height:100px" />
                            </td>
                        }
                    </tr>
                </table>
            </div>
        </div>
    </form>
</div>

И изменение успеха ajax, как следует с $ ("# Liste_images"). html (data);

  $.ajax(
                    {
                        url: _url,
                        data: formData,
                        processData: false,
                        contentType: false,
                        type: "POST",
                        success: function (data) { 
                               $("#Liste_images").html(data);
                        }
                    }
                );