带有JQuery UI对话框的MVC html.ActionLink，使用动态按钮进行确认 [英] MVC html.ActionLink with JQuery UI Dialog Confirm with dynamic buttons

问题描述

我正在尝试通过jQuery UI对话框实现对Html.ActionLink的确认.

我将从一个链接示例开始，以更好地进行解释.生成的操作链接将调用控制器函数以删除由id指定的项目:

I''m trying to implement confirmation for an Html.ActionLink via jQuery UI Dialog.

I''ll start from a link example to better explain; the actionlink generated will call the controller function to delete the item specified by id:

@Html.ActionLink("linkText", "actionName", "controller", new { id = Model.id }, new { @class = "action-confirm", title = "Confirmation Required", message = "Delete Item?", buttons = "btn1:btnAction1;btn2:Cancel" })
//buttons is a "csv" string that contains "button:action" pairs; Cancel is reserved and it means ''do nothing and close the dialog''

我想做的是在jQuery中编写一个可重用的函数，该函数读取一些指定的属性(标题，消息和按钮)，并将它们用作加载jQueryUI对话框的参数. />

what I want-to do is to write a reusable function in jQuery that reads some specified attributes (title, message and buttons) and use them as parameters to load the jQueryUI Dialog.. here''s that I''have done

$('.action-confirm').click(
       function (event) {
           event.preventDefault();

           actionLinkObj = $(this);
           
           //create the ConfirmDialog div with specified message
           ConfirmDialog = $("<div class='ConfirmDialog'>" + actionLinkObj.attr("message") + "</div>").insertAfter($("#center"));

           //split the buttons attribute in array containing each button text:action pair
           var buttons = actionLinkObj.attr("buttons");

           var stringButtons = new Array();
           stringButtons = buttons.split(";");

           
           var dialogButtons = {};

           for (i = 0; i < stringButtons.length; i++) {

               var btnName = stringButtons[i].split(":")[0];
               var callBackFunction = stringButtons[i].split(":")[1];

               //if function name is "Cancel", close the diolog without other actions
               if (callBackFunction == "Cancel") {
                   dialogButtons[btnName] = {
                       text: btnName,
                       click: function () {
                           ConfirmDialog.dialog("close");
                           ConfirmDialog.remove();
                       }
                   }
               }
               else {
                   dialogButtons[btnName] = {
                       text: btnName,
                       click: function () {
                           //execute the action specified by the Html.ActionLink
                           $.post(actionLinkObj[0].href, function (data) {
                                   //When done, execute the specified callBack Function 
                                   executeFunctionByName(callBackFunction, window, data);//here's the problem, callbak function is the "last" function defined in the "buttons" attribute, in the example he always tries to call "Cancel" function;
                               });
                           ConfirmDialog.dialog("close");
                           ConfirmDialog.remove();
                       }
                   }
               }
           }

           ConfirmDialog.dialog({ title: actionLinkObj.attr("title"), modal: true, buttons: dialogButtons });

       }
   );

该函数的逻辑"是正确的(也许不是最优雅的解决方案，但它可以工作)，唯一的问题是作为$ .post()的callBackFunction传递的函数:正如评论所说，回调函数是一个在button属性的最后一个元素中定义；

即:如果buttons属性为

The "logic" of the function is correct (maybe not the most elegant solution, but it works), the only problem is the function passed as callBackFunction for the $.post(): as the comment says, the callback function is the one defined in the last element of the buttons attribute;

I.e: if the buttons attribute is

Confirm:Function1; Cancel:Cancel; Confirm2: Action2

触发了callback函数的函数同时是Confirm和Confirm2按钮的Action2.

有什么建议可以纠正该功能吗?

预先感谢，
Alberto

the function the callbackfunction fired is Action2 both for Confirm and Confirm2 buttons.

Any suggestion to correct the function?

Thank''s in advance,
Alberto

推荐答案

(' .action-confirm'). 函数(事件){ 事件 .preventDefault(); actionLinkObj =

('.action-confirm').click( function (event) { event.preventDefault(); actionLinkObj =

(此); // 使用指定的消息创建ConfirmDialog div ConfirmDialog =

(this); //create the ConfirmDialog div with specified message ConfirmDialog =

(" + actionLinkObj.attr(" )+ </div>").insertAfter(

("<div class='ConfirmDialog'>" + actionLinkObj.attr("message") + "</div>").insertAfter(

这篇关于带有JQuery UI对话框的MVC html.ActionLink，使用动态按钮进行确认的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！