How get ActionLink parameters in jQuery dialog

Question

I am calling jQuery dialog from @Html.ActionLink But I am confused to pass action parameters to jQuery dialog. How to pass them CommunicationLocation and CommunicationType to jQuery dialog?

 @Html.ActionLink("Delete", "DeleteEmail", null, new { CommunicationLocation 
    = commemail.CommunicationLocation, CommunicationType = "email" }, 
    new { @class = "modalDialog btn btn-success" })

Dialog Div

<div id="dialog-confirm" title="Delete the item?">
        <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>This item will be deleted. Are you sure?</p>
    </div>

JS

     <script type="text/javascript">
 $(document).ready(function () {
            $("#dialog-confirm").dialog({
                autoOpen: false,
                modal: true,
                resizable: false,
                height: 180,
            });
            $('.modalDialog').click(function () {
                $("#dialog-confirm").dialog({
                    buttons: {
                        "Confirm": function () {
                            $.ajax({
                                url: 'customer/DeleteEmail',
                                type: 'Post',
                                data: //Need to pass parameters here,
                                success: function (result) {
                                    $('#DivEmailContainer').html(result);
                                }
                            });
                            $(this).dialog('close');
                        },
                        "Cancel": function () {

                            $(this).dialog("close");
                        }
                    }
                });
                $("#dialog-confirm").dialog("open");
                return false;
            });
        </script>

Controller

 [HttpPost]
    public PartialViewResult DeleteEmail(string CommunicationLocation,  string CommunicationType)
    {
          //Code here
    }

Answer 1

You could attach the values to the ActionLink with data- attributes.

Something like this:

CSHTML:

@Html.ActionLink("Delete", "DeleteEmail", null, 
new { @class = "modalDialog btn btn-success", data_location 
= commemail.CommunicationLocation, data_type= "email" })

JS:

$('.modalDialog').click(function() {
  //Declare this variable to track the clicked button, so we could get its
  //data attributes after dialog confirmation
  var $button = $(this);
  $("#dialog-confirm").dialog({
    buttons: {
      "Confirm": function() {
        $.ajax({
          url: 'customer/DeleteEmail',
          type: 'Post',
          data: {
              CommunicationLocation: $button.data('location'),  
              CommunicationType: $button.data('type')
            },
            success: function(result) {
            $('#DivEmailContainer').html(result);
          }
        });
        $(this).dialog('close');
      },
      "Cancel": function() {

        $(this).dialog("close");
      }
    }
  });
  $("#dialog-confirm").dialog("open");
  return false;
});

Answer 2

You could get the URL from the link. In the click action,

var url = $(this).attr("href");

To parse the URL and get the querystring parameters, I would recommend checking out this very popular SO post: How can I get query string values in JavaScript?

An alternative would be to create a script tag and write the values to JS variables:

<script>
    var CommunicationLocation = "@commemail.CommunicationLocation";
    var CommunicationType = "email";
</script>
//or...
<script>
    var CommunicationInfo = {
        "CommunicationLocation": "@commemail.CommunicationLocation",
        "CommunicationType": "email"
    };
</script>

From there you can use the variables in your JS script.

UPDATE

To handle rows of items you will need either an index value or some unique id.

<script>
    var infoArray = []; //create this before the rows are created

    //in the row code...
    infoArray.push({
        "rowID": ###, //<--Some unique row id would be needed as a way to 
                      //look up the correct item.
        "CommunicationLocation": "@commemail.CommunicationLocation",
        "CommunicationType": "email"
    });
</script>

Then when you create your action link, add the data-id attribute to the link (MVC3+):

 @Html.ActionLink("Delete", "DeleteEmail", null, new { CommunicationLocation 
    = commemail.CommunicationLocation, CommunicationType = "email" }, 
    new { @class = "modalDialog btn btn-success", data_rowid = "some id value" })

To clarify, data_rowid in the action link will translate to <a data-rowid=""> in MVC3+, which can be easily retrieved by jQuery like in the example below.

In your click action:

var rowid = $(this).data("rowid");
var CommunicationInfo = $.grep(function(n) { return n.rowID == rowid; })[0];
alert(CommunicationInfo.CommunicationLocation);