上传文件后如何刷新partialView?
我的局部视图:
<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();但不起作用。
[如果您有想法?
谢谢。
<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>
和$ {“#Liste_images”)。html(data)修改ajax的成功,
$.ajax( { url: _url, data: formData, processData: false, contentType: false, type: "POST", success: function (data) { $("#Liste_images").html(data); } } );