将Jquery UI对话框值发送到Url.Action

时间:2018-03-12 02:14:05

标签: jquery-ui razor asp.net-mvc-5

不确定如何将bool传递给我的(工作)C#方法DeleteTestuser。我已经用Google搜索了这一点,但里程因各种陷阱而异,即旧信息,语法错误。

如果用户确认操作,我需要返回bool,而不是将confirm确认为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>

1 个答案:

答案 0 :(得分:1)

基本上,您使用jQuery UI Dialog重新创建自己的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.");
  });
}