我正在开发一个ASP.Net MVC
站点,在该站点上,我在一个表中列出了来自数据库查询的一些预订,其中包含一个ActionLink
,用于取消具有特定BookingId
的特定行上的预订,如下所示:
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>
如果我可以使用jQuery Dialog
弹出一条消息,询问用户是否确定要取消预订,那就太好了。我一直在尝试让它正常工作,但是我一直纠结于如何创建一个接受参数的jQuery函数,这样我就可以替换
<a href="/Booking.aspx/Cancel/10">cancel</a>
使用
<a href="#" onclick="ShowDialog(10)">cancel</a>
。
然后,href函数将打开对话框,并将参数10传递给对话框,以便如果用户单击yes,则它将发布ShowDialog
:/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>
最后是我的问题:我怎样才能做到这一点呢?或者有没有更好的方法呢?
发布于 2008-12-27 02:34:38
你可以这样做:
<a>
,说“cancel”$('a.cancel').click(function() { var a= this;$('#myDialog').dialog({ buttons:{ "Yes":function() { window.location = a.href;});return false;});
(加上您的其他选项)
这里的关键点是:
但是,我建议您将其设置为POST而不是GET,因为cancel操作有副作用,因此会导致doesn't comply with GET semantics……
发布于 2010-08-11 20:41:47
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);
}
}
});
发布于 2008-12-27 13:21:00
就你对jQuery所做的事情而言,我的理解是,你可以像你所拥有的那样链接函数,内部函数可以访问外部的变量。所以你的ShowDialog(x)函数包含这些其他函数,你可以在其中重用x变量,它将被当作外部函数中的参数的引用。
我同意mausch的观点,你真的应该考虑使用POST来执行这些操作,它会在每个元素周围添加一个<form>
标记,但会降低自动化脚本或工具触发取消事件的可能性。更改操作可以保持原样,因为它(可能只是打开一个编辑表单)。
https://stackoverflow.com/questions/394491
复制相似问题