将数据传递给 jQuery UI 对话框 [英] Passing data to a jQuery UI Dialog

问题描述

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

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:

我的预订

<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 函数，以便我可以替换

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

取消

与

取消.

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

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 对话框:

I have created the jQuery Dialog in a script like this:

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

推荐答案

你可以这样做:

• 用一个类标记，说取消"

• 通过对 class="cancel" 的所有元素进行操作来设置对话框:

• mark the <a> with a class, say "cancel"

• set up the dialog by acting on all elements with class="cancel":

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

(加上您的其他选项)

这里的关键点是:

• 尽量不引人注目
• 如果您只需要网址，那么您已经在 href 中找到了.

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

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 UI 对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！