mvc ajax.actionlink с jquery диалогов прозорец за потвърждение

Имам таблица с няколко реда от елементи с данни. За всеки ред ще има някои връзки за действие, които ще извикват някои методи (изтриване на елемент от данни, промяна на елемент от данни за състояние и т.н.)

Преди всеки потребител да щракне върху бутона, искам да се покаже диалогов прозорец на 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 работят. Но проблемът е, че не мога да поставя на пауза/спра текущото действие, когато се щракне върху връзката за действие. Когато бутонът се щракне сега, процесът на дупка се изпълнява и диалоговият бутон за потвърждение се игнорира. Така че въпросът ми е как да променя връзката за действие или функцията jquery, за да работи както искам с диалогов прозорец за потвърждение, преди да продължа?


jquery asp.net-mvc actionlink jquery-ui-dialog
person Webking    schedule 03.06.2010    source източник
comment
в случай че някога се нуждаете от диалогов прозорец за потвърждение за тип въвеждане: подаване, можете да използвате този от тук awesome.codeplex. com   -  person Omu    schedule 10.10.2010

Отговори (2)


arrow_upward
4
arrow_downward

Също така опитах вашия код, получавайки същото поведение. Промених вашия код, за да показва поле за потвърждение.

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

и показва потвърждението на javascript. Трябва да се намери причината, поради която не работи.

person Elangovan    schedule 03.06.2010
comment
Толкова прост трябва да е избраният отговор - person jonprasetyo; 01.04.2015

arrow_upward
2
arrow_downward

От моя уебсайт:

Сега Ajax.ActionLink е наистина полезен, а опцията Confirm AjaxOption е още повече... все пак кой иска тези скапани Javascript предупреждения в наши дни? Разработвам приложение с 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 (която отменя нормалното действие за публикуване). В случай на „Потвърждаване“, кодът на Ricardo Covo ще задейства действието от страна на сървъра, а в javascript кода на Ricardo Covo за потвърждение ще можете да изпълните всички действия в случай на успех (като скриване на изтрития ред).

Обърнете внимание: С този метод трябва да управлявате функцията за успех/неуспех в javascript кода на Ricardo Covo, тъй като OnSuccess и OnComplete AjaxOptions изобщо няма да бъдат задействани (вероятно презаписани от някакъв код).

person fgpx78    schedule 16.11.2010
comment
Защо -1? Мисля, че това е полезен отговор и работи днес за мен като чар (също след миграция към MVC3). - person fgpx78; 28.04.2011