I'm developing an ASP.Net MVC site and on it I list some bookings from a database query in a table with an ActionLink to cancel the booking on a specific row with a certain BookingId like this:

My bookings

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

What would be nice is if I could use the jQuery Dialog to popup a message asking if the user is sure he wants to cancel the booking. I have been trying get this to work but I keep getting stuck on how to create a jQuery function that accepts parameters so that I can replace the

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

with

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

The ShowDialog function would then open the dialog and also pass the paramter 10 to the dialog so that if the user clicks yes then It will post the 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>

So finally to my question: How can I accomplish this? or is there a better way of doing it?

推荐答案

You could do it like this:

  • mark the <a> with a class, say "cancel"
  • 通过使用class="cancel"对所有元素进行操作来设置对话框:

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

(plus your other options)

The key points here are:

  • make it as unobtrusive as possible
  • if all you need is the URL, you already have it in the href.

However, I recommend that you make this a POST instead of a GET, since a cancel action has side effects and thus doesn't comply with GET semantics...

Jquery相关问答推荐

jQuery从JSON创建嵌套列表

DataTables - this.api 用于回调函数中的多个表

我正在try 使用 Jquery 打开与帖子相关的特定 comments

如何在 JavaScript 或 jQuery 中过滤 JSON 数据?

$.post 和 $.ajax 之间的区别?

jQuery:获取所选单选按钮的父 tr

jQuery 与 ExtJS

如何使用jQuery找到元素顶部的垂直距离(以px为单位)

实用的 javascript 面向对象设计模式示例

moment.js isValid 函数无法正常工作

jQuery中的Grep与过滤器?

用jquery替换锚文本

使用 MVC、C# 和 jQuery 导出为 CSV

DataTables:无法读取未定义的属性长度

如何使用 javascript (jquery) 将整数值添加到返回字符串的值中?

如何从所有元素jquery中删除类

删除除一个之外的所有类

更改 div 的内容 - jQuery

jquery - 成功时使用ajax结果返回值

清除表jquery