将数据传递到一个jQuery用户界面对话框 [英] 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的对话框，如果用户确信自己想取消预订弹出一个消息，询问。我一直在试图得到这个工作，但我一直陷入如何创建一个接受参数的jQuery函数，这样我可以替换＆LT; A HREF =/ Booking.aspx /取消/ 10 ＆GT;取消＆LT; / A＆GT; 与＆LT; A HREF =＃的onclick =ShowDialog的（10）＆GT;取消＆LT; / A＆GT; 。随后的ShowDialog函数将打开对话框，并通过放慢参数10到对话框因此，如果用户点击是的话那么它会发布在href：/Booking.aspx/Change/10

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对话框中的脚本是这样的：

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?

推荐答案

您可以做到这一点是这样的：

You could do it like this:

• 标记＆LT; A＆GT; 一类，说取消



• 通过作用于带班=取消的所有元素设置对话框：

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