将数据传递给 jQuery UI 对话框

IT技术 javascript jquery asp.net-mvc jquery-ui jquery-ui-dialog
2021-02-01 05:19:01

我正在开发一个ASP.Net MVC网站,并在其上列出了表中数据库查询中的一些预订,ActionLink以取消特定行上的预订,BookingId如下所示:

我的预订

<table cellspacing="3">
    <thead>
        <tr style="font-weight: bold;">
            <td>Date</td>
            <td>Time</td>
            <td>Seats</td>      
            <td></td>              
            <td></td>
        </tr>
    </thead>            
    <tr>
        <td style="width: 120px;">2008-12-27</td>
        <td style="width: 120px;">13:00 - 14:00</td>
        <td style="width: 100px;">2</td>
        <td style="width: 60px;"><a href="/Booking.aspx/Cancel/15">cancel</a></td>
        <td style="width: 80px;"><a href="/Booking.aspx/Change/15">change</a></td>
    </tr>            
    <tr>
        <td style="width: 120px;">2008-12-27</td>
        <td style="width: 120px;">15:00 - 16:00</td>
        <td style="width: 100px;">3</td>
        <td style="width: 60px;"><a href="/Booking.aspx/Cancel/10">cancel</a></td>
        <td style="width: 80px;"><a href="/Booking.aspx/Change/10">change</a></td>
    </tr>  
</table>

如果我可以使用jQuery Dialog来弹出一条消息,询问用户是否确定要取消预订,那就太好了。我一直在尝试让它工作,但我一直在纠结如何创建一个接受参数的 jQuery 函数,以便我可以替换

<a href="/Booking.aspx/Cancel/10">cancel</a>

<a href="#" onclick="ShowDialog(10)">cancel</a>.

ShowDialog然后函数将打开对话框并将参数 10 传递给对话框,以便如果用户单击是,则它将发布 href:/Booking.aspx/Change/10

我在这样的脚本中创建了 jQuery 对话框:

$(function() {
    $("#dialog").dialog({
        autoOpen: false,
        buttons: {
            "Yes": function() {
                alert("a Post to :/Booking.aspx/Cancel/10 would be so nice here instead of the alert");},
            "No": function() {$(this).dialog("close");}
        },
        modal: true,
        overlay: {
            opacity: 0.5,
            background: "black"
        }
    });
});   

和对话框本身:

   <div id="dialog" title="Cancel booking">Are you sure you want to cancel your booking?</div>

所以最后我的问题是:我怎样才能做到这一点?或者有更好的方法吗?

6个回答

jQuery 提供了一种为您存储数据的方法,无需使用虚拟属性或找到解决问题的方法。

绑定点击事件:

$('a[href*=/Booking.aspx/Change]').bind('click', function(e) {
    e.preventDefault();
    $("#dialog-confirm")
        .data('link', this)  // The important part .data() method
        .dialog('open');
});

还有你的对话:

$("#dialog-confirm").dialog({
    autoOpen: false,
    resizable: false,
    height:200,
    modal: true,
    buttons: {
        Cancel: function() {
            $(this).dialog('close');
        },
        'Delete': function() {
            $(this).dialog('close');
            var path = $(this).data('link').href; // Get the stored result
            $(location).attr('href', path);
        }
    }
});
这是一个绝妙的解决方案。我不知道你可以使用 .data 在对话框上设置数据 我一直在设置全局变量,从我的对话框访问它们然后销毁它们!
2021-03-16 05:19:01
非常感谢这个 .data() 魔法。请注意以下更新:“从 jQuery 1.7 开始,.on() 方法是将事件处理程序附加到文档的首选方法” api.jquery.com/bind
2021-03-18 05:19:01
.data 参数绝对是要走的路。谢谢!
2021-04-07 05:19:01
@boris-guery 嗨,我试过了,但没能成功。它只是不会阻止默认操作,因此它会转到链接而不是打开对话框。任何帮助将不胜感激:我做了一个 jsfiddle:jsfiddle.net/sebababi/9zKcZ
2021-04-11 05:19:01
+1 我搜索了 jquery ui 文档,直到我意识到这是 jQuery 核心本身的一种方法才找到它。很不错的收获
2021-04-12 05:19:01

你可以这样做:

  • <a>用一个class标记,说“取消”
  • 通过对 class="cancel" 的所有元素进行操作来设置对话框:

    $('a.cancel').click(function() { 
      var a = this; 
      $('#myDialog').dialog({
        buttons: {
          "Yes": function() {
             window.location = a.href; 
          }
        }
      }); 
      return false;
    });
    

(加上你的其他选择)

这里的关键点是:

  • 让它尽可能不引人注目
  • 如果您只需要 URL,那么您已经在 href 中拥有了它。

但是,我建议您将其设为 POST 而不是 GET,因为取消操作有副作用,因此不符合 GET 语义...

谢谢你的好答案。我会尝试一下,但有一个问题。您提到最好将其设为 POST 而不是 GET,这意味着像 href="/Booking.aspx/Cancel/10" 这样的常规 href 将是 GET 对吗?如果是这样,那么把它作为一个帖子会怎么样呢?
2021-03-17 05:19:01
你不具备使用后,但如果你使用获取一个数据库变更操作,你打开自己的“跨站请求伪造”攻击......看到:en.wikipedia.org/wiki/Cross- site_request_forgery
2021-03-18 05:19:01
这也称为hijax方法(domscripting.com/blog/display/41
2021-03-23 05:19:01
为了使它成为一个帖子,而不是更改 window.location,您可以使用 jQuery $.post() ajax 函数。请参阅docs.jquery.com/Ajax/jQuery.post#examples
2021-04-03 05:19:01
我不会使用 $.post(),这种方法不能很好地降级。只需编写一个没有任何 ajax 的标准 <form>,无需确认即可使其工作,然后在 <form> 的“顶部”添加确认
2021-04-07 05:19:01

就您使用 jQuery 所做的事情而言,我的理解是您可以像您拥有的那样链接函数,并且内部函数可以访问外部函数的变量。您的 ShowDialog(x) 函数是否包含这些其他函数,您可以在其中重复使用 x 变量,它将被视为对来自外部函数的参数的引用。

我同意 mausch,你真的应该考虑对这些操作使用 POST,这将<form>在每个元素周围添加一个标签,但使自动脚本或工具触发 Cancel 事件的可能性降低很多。Change 操作可以保持原样,因为它(大概只是打开一个编辑表单)。

我现在已经尝试了你的建议,发现它有点工作,

  1. 对话框 div 总是以纯文本形式写出
  2. 使用 $.post 版本,它实际上可以调用控制器并实际取消预订,但对话框保持打开状态并且页面不会刷新。使用 get 版本 window.location = h.ref 效果很好。

下面是我的“新”脚本:

$('a.cancel').click(function() {
        var a = this;               
        $("#dialog").dialog({
            autoOpen: false,
            buttons: {
                "Ja": function() {
                    $.post(a.href);                     
                },
                "Nej": function() { $(this).dialog("close"); }
            },
            modal: true,
            overlay: {
                opacity: 0.5,

            background: "black"
        }
    });
    $("#dialog").dialog('open');
    return false;
});

});

有什么线索吗?

哦,我的操作链接现在看起来像这样:

<%= Html.ActionLink("Cancel", "Cancel", new { id = v.BookingId }, new  { @class = "cancel" })%>
请参阅我对使用 $.post() 和 hijax 方法的回答的评论
2021-03-28 05:19:01

查看您的代码,您需要做的是添加关闭窗口和更新页面的功能。在你的“是”函数中,你应该写:

        buttons: {
            "Ja": function() {
                $.post(a.href);
                $(a). // code to remove the table row
                $("#dialog").dialog("close");
            },
            "Nej": function() { $(this).dialog("close"); }
        },

删除表格行的代码写起来并不有趣,所以我会让你处理细节,但基本上,你需要告诉对话框在你发布后要做什么。这可能是一个智能对话,但它需要某种方向。

我在想,如果你在 '<TR>' 标签中添加一个 id,那么你可能能够让 jQuery 轻松地删除该行。
2021-04-03 05:19:01
谢谢你的回答。我会尝试一下,并找到一种方法来删除该行...
2021-04-07 05:19:01