小编典典

将数据传递到jQuery UI对话框

javascript

我正在开发一个ASP.NetMVC网站,在该网站上,我在一个表中列出了来自数据库查询的一些预订,并带有ActionLink来取消特定行上的预订,BookingId例如:

我的预订

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

ShowDialog然后,该函数将打开对话框,并将参数10传递给对话框,以便如果用户单击“是”,它将发布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>

最后,我的问题是:我该如何完成?还是有更好的方法呢?


阅读 269

收藏
2020-05-01

共1个答案

小编典典

您可以这样:

  • <a>用一个班级标记“取消”
  • 通过对所有具有class =“ cancel”的元素进行操作来设置对话框:
    $('a.cancel').click(function() {
    

    var a = this;
    $(‘#myDialog’).dialog({
    buttons: {
    “Yes”: function() {
    window.location = a.href;
    }
    }
    });
    return false;
    });

(加上其他选项)

这里的关键点是:

  • 使它尽可能不引人注目
  • 如果您只需要URL,那么您已经在href中拥有它。

但是,我建议您将其设置为POST而不是GET,因为cancel操作具有副作用,因此不符合GET语义

2020-05-01