Send Jquery UI Dialog value to Url.Action

Question

Not sure how to pass along a bool to my (working) C# method DeleteTestuser. I've Googled the heck out of this but mileage varies with all kinds of pitfalls, i.e. old information, bad syntax.

Rather than passing confirm as false, below, I need to return a bool if the user confirms the action. Thanks...

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>

@Twisty As is, nothing is wrong strictly speaking, but I need to pass along a bool from the dialog to DeleteTestUser, but I'm not sure how to do that. — Steve
– Steve, Commented Mar 12, 2018 at 2:33
You need to alter the href value using javascript . But you may as well just use href="#" in the link, and then your script uses location.href = ".." to do the redirect — user3559349
– user3559349, Commented Mar 12, 2018 at 4:09
First, your button format is not correct. buttons: [{ text: "Yes", click: function(){} }, { text: "No", click: function(){} }] — Twisty
– Twisty, Commented Mar 12, 2018 at 7:11

Twisty · Accepted Answer · 2018-03-12 18:23:52Z

1

Basically, you're recreating your own confirm() with jQuery UI Dialog. I did this and here is a similar case: confirm form submit with jquery UI

Apply this to your scenario and you have something like:

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

You may be able to get away with just executing specific callbacks. That's up to you. This code can then also be used to pass along another function or to use with a prompt() like dialog.

Update

See: Using Url.Action in javascript

For example:

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

I would use POST if possible.

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

edited Mar 12, 2018 at 18:23

answered Mar 12, 2018 at 7:16

Twisty

31k2 gold badges30 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Steve Over a year ago

Thanks. I will delve into this more later today but I may have been unclear. My essential need is to pass along the confirmation dialog selection (true or false) ultimately to a C# method via razor. I'm not sure what you've provided does that, precisely. So js --> razor -- C#

Twisty Over a year ago

@Steve I did not provide that since you did not indicated how you wanted to do that. I suspect a POST back would be best. This is akin to an AJAX Post to a backend Razor or C# script.

Twisty Over a year ago

@Steve updated my answer a bit. Looks like you can use GET. I do not use Razor nor do a lot with C#, so had to look it up.

Steve Over a year ago

Thank you Twisty. I will give that a try. Also I realized I may just be looking at this the wrong way. Rather than trying to pass around a bool, maybe I just need to redirect away if the user cancels the delete operation.

Steve Over a year ago

Your answer may indeed work, but really I was asking the wrong question. I need to either cancel or post to the Url.Action. I don't need to pass a boolean around. Thanks

Collectives™ on Stack Overflow

Send Jquery UI Dialog value to Url.Action

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related