ajax - 从 UploadFile 和 ajax 发布后刷新 PartialView

Question

上传文件后如何刷新部分视图？

我的部分观点：

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

我在 Controller 中的方法：

  [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();说，但这不起作用。

你有想法吗？

标签： ajaxasp.net-coreasp.net-mvc-partialview

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);
                        }
                    }
                );