MVC4的jQuery对话框？

Question

我打算使用“确定...”jquery对话框。但是在弹出对话框之前调用控制动作。

索引

<ul class="dropdown-menu">
    @{
          @Html.TryPartial("_actions", model)
          <li> @Html.ActionLink("Edit", "Edit", new {id =model.Id})</li>
           <li class="divider"></li>
           <li>@Html.ActionLink("Delete", "Delete", new {id =model.Id},new { @class = "delete-link" })</li>
      }
      </ul>
   </div> 

    }
  </td>
 </tr>
}
</table>

    <div id="delete-dialog" title="Confirmation" style="display:none">
            <p>Are you sure you want to delete this activity?</p>
    </div>
}


@section Scripts {
          @Styles.Render("~/Content/DataTables/css")
        @Scripts.Render("~/bundles/DataTables") 

    <script type="text/JavaScript">


        $(document).ready(function () {

            $('#volunteerlist').dataTable({
                "bSort": true,
                "bPaginate": false,
                "bAutoWidth": false
            });

            var deleteLinkObj;
            // delete Link
            $(".delete-link").button();

            $('.delete-link').click(function () {
                deleteLinkObj = $(this);  //for future use
                $('#delete-dialog').dialog('open');
                return false; // prevents the default behaviour
            });

            $('#delete-dialog').dialog({
                autoOpen: false,
                width: 400,
                resizable: false,
                modal: true, //Dialog options
                buttons: {
                    "Continue": function () {
                        $.post(deleteLinkObj[0].href, function (data) {  //Post to action
                            if (data == '<%= Boolean.TrueString %>') {
                                deleteLinkObj.closest("tr").hide('fast'); //Hide Row
                                //(optional) Display Confirmation
                            }
                            else {
                                //(optional) Display Error
                            }
                        });
                        $(this).dialog("close");
                    },
                    "Cancel": function () {
                        $(this).dialog("close");
                    }
                },
                show: {
                    effect: "blind",
                    duration: 1000
                },
                hide: {
                    effect: "explode",
                    duration: 1000
                }
            });


        });
    </script>

我遵循了Post。我不明白为什么控制器动作在对话框打开之前调用。

Answer 1

试试这个：

 var btn = $(".delete-link").button();

 btn.click(function () {
     deleteLinkObj = $(this);  //for future use
     $('#delete-dialog').dialog('open');
     return false; // prevents the default behaviour
 });

Answer 2

而不是return false尝试preventDefault()

$('.delete-link').click(function (event) {
    event.preventDefault();
    deleteLinkObj = $(this);  //for future use
    $('#delete-dialog').dialog('open');
    // with runtime errors you might not get here and will do normal href behavior
    // return false; // prevents the default behaviour
});

这是一个有效的jsfiddle，它与您的代码基本相同。