将数据传递到jQuery UI对话框

Question

我正在开发一个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>

最后，我的问题是：我该如何完成？还是有更好的方法呢？

Answer 1

您可以这样做：在<a>班级上标记“取消”通过对所有具有class =“ cancel”的元素进行操作来设置对话框：$('a.cancel').click(function() {&nbsp;&nbsp; var a = this;&nbsp;&nbsp; $('#myDialog').dialog({&nbsp; &nbsp; buttons: {&nbsp; &nbsp; &nbsp; "Yes": function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;window.location = a.href;&nbsp;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; });&nbsp;&nbsp; return false;});（加上其他选项）这里的关键点是：使它尽可能不引人注目如果您只需要URL，那么您已经在href中拥有了它。但是，我建议您将其设置为POST而不是GET，因为cancel操作具有副作用，因此不符合GET语义 ...

Answer 2

jQuery提供了一种为您存储数据的方法，无需使用虚拟属性或查找问题的解决方法。绑定点击事件：$('a[href*=/Booking.aspx/Change]').bind('click', function(e) {&nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; $("#dialog-confirm")&nbsp; &nbsp; &nbsp; &nbsp; .data('link', this)&nbsp; // The important part .data() method&nbsp; &nbsp; &nbsp; &nbsp; .dialog('open');});和您的对话框：$("#dialog-confirm").dialog({&nbsp; &nbsp; autoOpen: false,&nbsp; &nbsp; resizable: false,&nbsp; &nbsp; height:200,&nbsp; &nbsp; modal: true,&nbsp; &nbsp; buttons: {&nbsp; &nbsp; &nbsp; &nbsp; Cancel: function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).dialog('close');&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; 'Delete': function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).dialog('close');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var path = $(this).data('link').href; // Get the stored result&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(location).attr('href', path);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }});

Answer 3

就您使用jQuery所做的事情而言，我的理解是您可以像平常一样链接函数，而内部函数可以访问外部函数。所以您的ShowDialog（x）函数包含这些其他函数，您可以在其中重新使用x变量，它将用作外部函数对参数的引用。我同意mausch的观点，您应该真正考虑对这些操作使用POST，这将<form>在每个元素周围添加一个标签，但是使自动化脚本或工具触发Cancel事件的可能性大大降低。更改操作可以保持原样，因为它（大概只是打开一个编辑表单）。