У меня есть галерея изображений, где пользователь может редактировать или добавлять изображение с описанием. Моя проблема в том, что когда пользователь добавляет, удаляет или обновляет изображение, мне нужно обновить страницу sh, чтобы увидеть изменения. Как я могу обновить мою галерею изображений без обратной передачи?
Вот визуально, как выглядит моя галерея изображений:
Это мой cs html
<div class="form-row">
@foreach (var archivo in Model.archivos)
{
string formatedId = "edit" + @archivo.archivo_id;
string formatedDeleteId = "delete" + @archivo.archivo_id;
<div class="gallery">
<a target="_blank" href="@archivo.file_URL">
<img src="@archivo.image_URL" alt="@archivo.description" width="400">
</a>
<div class="desc">
<p>@archivo.description</p>
<a id="@formatedId" class="popup-edit" data-url="@archivo.file_URL" data-description="@archivo.description" data-id="@archivo.archivo_id"><i class="material-icons" title="Detalles">edit</i></a>
<a id="@formatedDeleteId" class="popup btn-primary-delete" data-id="@archivo.archivo_id"><i class="material-icons" title="Eliminar">delete</i></a>
@*@Html.ActionLink("contratoArchivo", "AnadirEditar", new { ID = archivo.archivo_id }, new { @class = "material-icons-contrato-archivo" })*@
</div>
</div>
}
<div class="gallery">
<img src="https://cdn.pixabay.com/photo/2017/04/20/07/07/add-2244771_1280.png" alt="Añadir nueva" width="400">
<div class="desc">
<a id="btnAddImage" class="popup-edit" data-id="0"><i class="material-icons" title="Añadir nueva">add</i></a>
@*@Html.ActionLink("contratoArchivo", "AnadirEditar", new { ID = archivo.archivo_id }, new { @class = "material-icons-contrato-archivo" })*@
</div>
</div>
</div>
Вот мой Javascript / jQuery код:
<script type="text/javascript">
$(document).ready(function () {
var id = 0;
var description = "";
var url = "";
$('[id^=delete]').click(function () {
id = $(this).data('id');
var contratoArchivoModel = {
archivo_id: id,
contrato_id: @Model.contract_id
};
$.ajax({
type: "POST",
url: "/contratoArchivo/Eliminar",
data: JSON.stringify(contratoArchivoModel),
dataType: "json",
contentType: 'application/json; charset=utf-8',
success: function (data) {
alert(data.msg);
},
error: function () {
alert("Error occured!!")
}
});
})
$('[id^=edit]').click(function () {
id = $(this).data('id');
$('#txtDescription').val($(this).data('description'));
$('#txtUrl').val($(this).data('url'));
})
$('#btnAddImage').click(function () {
id = 0;
$('#txtDescription').val('');
$('#txtUrl').val('');
})
$('#btnSubmit').click(function (event) {
event.preventDefault();
var contratoArchivoModel = {
archivo_id: id,
contrato_id: @Model.contract_id,
file_URL: $('#txtUrl').val(),
description: $('#txtDescription').val()
};
$.ajax({
type: "POST",
url: "/contratoArchivo/AnadirEditar",
data: JSON.stringify(contratoArchivoModel),
dataType: "json",
contentType: 'application/json; charset=utf-8',
success: function (data) {
alert(data.msg);
},
error: function () {
alert("Error occurred!!")
}
});
});
});
</script>
Вот мои методы контроллера:
public ActionResult Eliminar(contratoArchivoModel archivoModel)
{
contratoArchivoModel contratoArchivoFound = new contratoArchivoModel();
contratoArchivoContext contratoArchivoContext = new contratoArchivoContext();
contratoArchivoContext.deleteFromDB(archivoModel);
return View();
}
public ActionResult AnadirEditar(contratoArchivoModel archivoModel)
{
contratoArchivoModel contratoArchivoFound = new contratoArchivoModel();
contratoArchivoContext contratoArchivoContext = new contratoArchivoContext();
if (archivoModel.archivo_id > 0)
{
contratoArchivoFound = contratoArchivoContext.GetAllArchivos(archivoModel.contrato_id).Find(obj => obj.archivo_id == archivoModel.archivo_id);// = context.InventoryLocations.Find(id);
if (contratoArchivoFound == null)
{
throw new HttpException(404, "Not found");
}
else
{
contratoArchivoContext.updateToDB(archivoModel);
return Json("chamara", JsonRequestBehavior.AllowGet).Success("El archivo ha sido actualizada");
}
}
else
{
contratoArchivoContext.addToDB(archivoModel);
return Json("chamara", JsonRequestBehavior.AllowGet).Success("El archivo ha sido actualizada");
}
}
Любая помощь будет очень ценится. Спасибо.