Refre sh галерея изображений без обратной передачи ASP. NET MVC - PullRequest
0 голосов
/ 11 апреля 2020

У меня есть галерея изображений, где пользователь может редактировать или добавлять изображение с описанием. Моя проблема в том, что когда пользователь добавляет, удаляет или обновляет изображение, мне нужно обновить страницу sh, чтобы увидеть изменения. Как я могу обновить мою галерею изображений без обратной передачи?

Вот визуально, как выглядит моя галерея изображений:

My image gallery

Это мой 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");
    }
}

Любая помощь будет очень ценится. Спасибо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...