MVC Удаление записи с помощью всплывающего окна Javascript

Question

Я сделал создать, отредактировать функциональность и пытаюсь сделать удалить функциональность, но по умолчанию моя страница перенаправляется на Delete.aspx для подтверждения удаления. Я хочу, чтобы следующие шаги происходили при попытке удалить мою запись. В настоящее время я нахожусь на index.aspx и хотите остаться на той же странице и удалить запись из базы данных.

Изображение 1

Изображение 2

Изображение 3

Я не хочу это удаление из URL. например http://localhost:53402/Project/Delete/11, любому человеку будет очень легко удалить любую запись с идентификатором.

Answer 1

чтобы выполнить удаление с использованием JavaScript и всплывающего окна, вам необходимо: 1) Создайте действие в контроллере, как показано ниже:

[HttpPost]
public void DeleteItem(int id)

Декорируя метод действия аннотацией [HttpPost], вы избегаете нежелательного поведения пользователя, набирающего URL / Home / Delete / 1, потому что только POST вызовет действие.

2) Если вы удаляете элемент, входящий в список элементов, вам необходимо привязать свои элементы в разделе Просмотр идентификатора, используя пользовательские атрибуты HTML5, например:

@for (int i = 0; i < Model.Items.Count; i++)
{                            
     <a href="#" class="delete-button" data-id="@Model.Items[i].Id">Delete</a>        
}

3) Используя jQuery, например, привязать к вашей кнопке (кнопкам) удаления на странице всплывающее окно при нажатии

$().ready(function () {
    $(".delete-button").click(null, DeleteItem);  //DeleteItem is the callback      
    return false;
});

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

4) Использование, например, диалогового компонента jQuery UI:

Создать HTML для всплывающего текста

<div id="dialog-confirm" style="display:none;" title="Confirm">
<p>
    <span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
    Are you sure you want to proceed?
</p>
</div> 

Обработайте нажатие кнопки удаления и привяжите диалог к ​​HTML-тексту, чтобы всплывающее окно сообщало пользователю, что вы хотите

function confirmDeleteVersion() {        
    var recordToDelete = $(this).attr("data-id"); // now we need the data-id to retrieve the identifier for the item to delete              
    $("#dialog-confirm").dialog({
        resizable: false,
        height: 200,
        modal: true,
        buttons: {
            "Delete": function () {         
                $(this).dialog("close");        
                $.post("/Home/Delete", { id : recordToDelete}, DeleteSuccessfull);
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        }             
    });     
};

Итак, мы получаем идентификатор кнопки

var recordToDelete = $(this).attr("data-id");

где "this" - это элемент HTML, который вызвал событие, используя

В приведенной ниже строке фактически мы просим контроллер выполнить действие удаления, и мы используем идентификатор записи

$.post("/Home/Delete", { id : recordToDelete}, DeleteSuccessfull);

5) Поскольку сообщение jQuery асинхронно, нам необходим обратный вызов для обработки результата

function DeleteSuccessfull()
{
    //Do what you want...
};

Вот и все ... имейте в виду, что это всего лишь пример, и я использую компонент диалога jQuery, а вы можете использовать что-то другое.

Answer 2

Я не хочу это удаление из URL.напримерhttp://localhost:53402/Project/Delete/11, любому будет очень легко удалить любую запись с идентификатором.

Если вы не хотите, чтобы пользователи угадывали идентификатор, используйте Guid вместо int

http://localhost:53402/Project/Delete/30D4AAF1-3CF1-4514-A025-2DDE1C770CD5

Answer 3

Если вы пытаетесь достичь истинного MVC, как предполагает ваш вопрос, транзакция события будет отправлена ​​в контроллер, например index.aspx - у этого контроллера будет событие, которое указывает текущую страницу просмотра, на которой вы сидите, как

event = "displayGui" будет включать в себя файл представления "frmCreate.aspx" или "frmEdit.aspx"

когда файл представления (ов) "frmCreate.aspx" или "frmEdit.aspx" отправляет, он вызывает другое событие в контроллере, например

event = "submitAndConfirm"

Событие submitAndConfirm будет включать инструкции для обработки действия удаления, включая файл с именем actDelete.aspx. Когда работа была завершена actDelete.aspx, контроллер перезвонил event = "displayGui".

Это концептуальный пример, требующий конкретной реализации aspx.

Answer 4

Попробуйте это с помощью jquery:

<script type="text/javascript">

    $(function () {
        $(".delete").live("click", function (e) {
            e.preventDefault();
            if (confirm("Are you sure you wish to delete this article?")) {
                $.post(this.href);
            }
        });
    });
</script>

<a href="/Project/Delete/11" class="delete">Delete</a>

Answer 5

Вы должны сделать это по какому-то идентификатору, другого пути нет.

Если вы не хотите, чтобы пользователи манипулировали URL-адресом, вам нужна какая-то система входа / доступа.