将数据传递到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 Dialog:

$(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

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

绑定click事件:

$('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);
        }
    }
});

Answer 2

你可以这样做:

• <a>用类标记,说"取消"

• 通过使用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语义 ...