将 Jquery UI Dialog 值发送到 Url.Action

Question

不确定如何将布尔值传递给我的（工作）C# 方法 DeleteTestuser。我已经用谷歌搜索过了，但里程因各种陷阱而异，即旧信息、错误语法。

如果用户确认操作，我需要返回一个布尔值，而不是将确认传递为 false。谢谢...

index.cshtml

<a href="@Url.Action("DeleteTestUser", "Home",
    new {id = testUser.TestUserId, confirm = false})" 
id="confirm-delete">

_layout.cshtml

    <script type="text/javascript">
    $(function () {

        $('#dialog-modal').dialog(
            {
                title: 'Test User',
                draggable: false,
                resizeable: false,
                closeOnEscape: true,
                modal: true,
                autoOpen: false,
                buttons: {
                    'Yes': function () {
                        $(this).dialog('close');
                        confirmResult(true);

                    },
                    'No': function () {
                        $(this).dialog('close');
                        confirmResult(false);
                    }
                }
            });

        $('#confirm-delete').click(function () {
            $('#dialog-modal').dialog("open");
        });

        function confirmResult(result) { return result }
    });

</script>

Answer 1

基本上，您正在使用 jQuery UI 对话框重新创建自己的 confirm()。我这样做了，这是一个类似的案例：confirm form submit with jquery UI

将此应用到您的场景中，您会得到类似的结果：

$(function() {
  function ui_confirm(message, callback) {
    var dfd = $.Deferred();
    var dialog = $("<div>", {
        id: "confirm"
      })
      .html(message)
      .appendTo($("body"))
      .data("selection", false)
      .dialog({
        autoOpen: false,
        resizable: false,
        title: 'Confirm',
        zIndex: 99999999,
        modal: true,
        buttons: [{
          text: "Yes",
          click: function() {
            $(this).dialog("close");
            dfd.resolve(true);
            if ($.isFunction(callback)) {
              callback.apply();
            }
          }
        }, {
          text: "No",
          click: function() {
            $(this).dialog("close");
            dfd.resolve(false);
          }
        }],
        close: function(event, ui) {
          $('#confirm').remove();
        }
      });
    dialog.dialog("open");
    return dfd.promise();
  }
  
  function deleteUser(id){
    // Code you will execute to delete a user or POST back.
  }
  
  $(".button").button();
  $('.del').click(function(e) {
    e.preventDefault();

    // your code

    $.when(ui_confirm("Are you sure?")).done(function(val) {
      if (val) {
        console.log("Delete User Confirmed.");
        deleteUser($(this).attr("id"));
      } else {
        console.log("Do not delete user.");
      }
    });
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
John Smith <a href="#del-user" class="del button" id="user-0001">Delete</a>

您可能只需执行特定的回调就可以摆脱困境。这取决于你。然后，此代码还可用于传递另一个函数或与 prompt() 类似的对话框一起使用。

更新

见：Using Url.Action in javascript

例如：

function deleteTestUser(uid, conf){
  var url = '@Url.Action("DeleteTestUser", "Home", new {id=' + uid + ', confirm=' + conf + '})';
  $.get(url, function(data){
    console.log("User " + uid + " Deleted.");
  });
}

如果可能，我会使用 POST。

function deleteTestUser(uid, conf){
  $.post('@Url.Action("DeleteTestUser", "Home")', { id: uid, confirm: conf }, function(data){
    console.log("User " + uid + " Deleted.");
  });
}