将数据传递到jQuery UI对话框

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

我的预订

    

        

            
Date
            
Time
            
Seats
      
            
              
            

        
    
            
    

        
2008-12-27
        
13:00 - 14:00
        
2
        
cancel
        
change
    
            
    

        
2008-12-27
        
15:00 - 16:00
        
3
        
cancel
        
change
    
  

如果我可以使用jQuery Dialog弹出一条消息,询问用户是否确定要取消预订,那将会是一件好事.我一直在努力让这个工作,但我一直在坚持如何创建一个接受参数的jQuery函数,以便我可以替换

cancel

同

cancel.

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"
        }
    });
});   

和对话本身:

   
Are you sure you want to cancel your booking?

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

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);
        }
    }
});

你可以这样做:

用类标记,说"取消"

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