mvc ajax.actionlink с диалогом подтверждения jquery - PullRequest
Новая
       15

mvc ajax.actionlink с диалогом подтверждения jquery

5 голосов
/ 03 июня 2010

У меня есть таблица с несколькими строками элементов данных. Для каждой строки будет несколько ссылок на действия, которые будут вызывать некоторые методы (удалить элемент данных, изменить элемент данных и т. Д.) *

Перед тем, как каждый пользователь нажимает кнопку, я хочу, чтобы появился диалог jquery и дал пользователю диалог с некоторой информацией, кнопкой OK и Отмена.

Пример кода ajax.actionlink, который будет вызывать метод ChangeStatus: 

<%= Ajax.ActionLink(item.Status, "ChangeStatus", new { id = item.Id }, new AjaxOptions { UpdateTargetId = "ListReturns-Div", OnBegin = "StartChangeStatus", OnSuccess = "EndChangeStatus", OnFailure = "FailureChangeStatus" }, new { @class = "StatusBtn" })%>

Это функция jquery, которая вызывается: 

 function StartChangeStatus(e) {
            $('#dialog-confirm').dialog({
                resizable: false,
                height: 200,
                modal: true,
                buttons: {
                    'Continue': function () {
                        $(this).dialog('close');
                        $('#Loading-Div').show('slow');
                    },
                    Cancel: function () {
                        $(this).dialog('close');
                        e.preventDefault();
                    }
                }
            });
        }

Функции actionlink и jquery работают. Но проблема в том, что я не могу приостановить / остановить текущее действие при нажатии на ссылку действия. Когда кнопка нажата, процесс лунки запущен, и кнопка подтверждения диалога игнорируется. Поэтому мой вопрос заключается в том, как изменить actionlink или функцию jquery, чтобы они работали, как требуется, с подтверждением диалога перед продолжением?

Ответы [ 2 ]

4 голосов
/ 03 июня 2010

Я также попробовал ваш код, получая то же самое поведение. Я изменил ваш код для отображения окна подтверждения. 

<%= Ajax.ActionLink("Link", 
                    "ChangeStatus", 
                    new { id = 3 }, 
                    new AjaxOptions { UpdateTargetId = "ListReturns-Div", 
                                      HttpMethod = "Post", 
                                      Confirm = "confirmClick" }, 
                                      new { @class = "StatusBtn" }
                   )
%>

, и он отображает подтверждение JavaScript. Нужно найти причину, почему она не работает.

2 голосов
/ 16 ноября 2010

С мой сайт :

Теперь Ajax.ActionLink действительно полезен, а Confirm AjaxOption еще больше ... тем не менее, кто хочет эти дерьмовые Javascript Alert в эти дни? Я занимаюсь разработкой приложения с использованием Ms MVC 2 и использую фантастическую библиотеку JQueryUI для настройки визуальных элементов всех моих элементов. Одно из лучших преимуществ JQueryUI - это диалоговые окна ... типа "Вы уверены, что хотите удалить этот файл? Да / Нет" ... и я хочу использовать их в моем Ajax.ActionLink!

Поскольку я не нашел ответа в сети, я искал простой способ сделать это ... и теперь я публикую его здесь.

Во-первых: прочитайте и внедрите на своей странице приятное руководство, написанное Рикардо Ково: «Подтверждение удаления ASP MVC с помощью Ajax & JQuery UI Dialog» (просто Google)

Я сделал простые изменения в его коде Javascript, просто используя remove () вместо hide ('fast') и применив класс "item" к tr для удаления. 

deleteLinkObj.closest("tr").hide('fast')

становится 

deleteLinkObj.closest("tr.item").remove();

Теперь, после того, как вы следовали предыдущему уроку, вы готовы заменить 

<%: Html.ActionLink([LinkName],[ActionName], new { id = item.Id }, new { @class = "delete-link" })%>

строка с 

<%:Ajax.ActionLink([LinkName],[ActionName],[ControllerName],new { id = item.Id },new AjaxOptions{HttpMethod = "Delete" /*You can use Post though*/,OnBegin = "JsonDeleteFile_OnBegin" /*This is the main point!*/}, new { @class = "delete-link" } ) %>

Вы можете использовать метод Post, если хотите, важная вещь здесь - это опция OnBegin, которая вызывает javascript, который предотвращает вызов действия сервера перед Подтверждение диалога JQueryUI: 

<script language="javascript">function JsonDeleteFile_OnBegin(context) {return false;/*Prevent the Ajax.Action to fire before needed*/}</script>

Поместите JavaScript на страницу.

Итак, теперь, что произойдет: когда вы нажмете кнопку «Удалить», он откроет JQueryUI во время вызова функции OnBegin (которая отменяет обычное действие после публикации). В случае «Подтверждение» код Рикардо Ково запустит действие на стороне сервера, а в коде подтверждения «Рикардо Ково» в виде кода подтверждения вы сможете выполнить все действия в случае успеха (например, скрыть удаление строки).

Обратите внимание : с помощью этого метода вы должны управлять функцией для успеха / неудачи в коде JavaScript Ricardo Covo, так как OnSuccess и OnComplete AjaxOptions не будут запускаться вообще (возможно, перезаписаны некоторым кодом ).

...