MVC jquery对话框无法正常工作

时间:2014-12-16 10:00:39

标签: javascript jquery model-view-controller

当我单击删除按钮时,弹出对话框显示然后消失。它没有停留

以下是代码:

.cshtml:

@Html.ActionLink("Delete", "DeleteOrder", "Order", new { id = item.OrderID }, new { @class = "btn btn-primary btn-delete"} );


<div id="dialog-confirm" title="Confirmation Dialog" style="display:none">Delete this Order? Confirm </div>

 <script>
  $(document).ready(function () {

        $(".btn-delete").click(function () {
            var result;                

            $("#dialog-confirm").dialog({
                resizable: false,
                height: 140,
                modal: true,
                buttons: {
                    "Yes": function () {
                        $(this).dialog("close"); 
                    },
                    "No": function () {
                        $(this).dialog("close");
                        return false;
                    }
                }
            });                 

        });
});
</script>

1 个答案:

答案 0 :(得分:0)

处理你的锚点击并打开对话框,如果是,则设置浏览器网址以锚定href属性

$(".btn-delete").click(function(e) {
 var ahref = $(this)
  $("#dialog-confirm").dialog({
    resizable: false,
    height: 140,
    modal: true,
    buttons: {
      "Yes": function() {
        $(this).dialog("close");
       
        window.location = $(ahref).prop("href");
      },
      "No": function() {
        $(this).dialog("close");
      }
    }
  });

    e.preventDefault();
});
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

<a href="http://example.com" class="btn-delete">delete item</a>
<div id="dialog-confirm"></div>