如何在 jQuery 对话框中获取 ActionLink 参数

Question

我正在从@Html.ActionLink 调用 jQuery 对话框，但我很困惑将操作参数传递给 jQuery 对话框。如何将 CommunicationLocation 和 CommunicationType 传递给 jQuery 对话框？

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

对话框分区

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

控制器

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

Answer 1

您可以使用 data- 属性将值附加到 ActionLink。

类似这样的：

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

您可以从链接中获取 URL。在click 操作中，

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

要解析 URL 并获取查询字符串参数，我建议您查看这篇非常受欢迎的 SO 帖子：How can I get query string values in JavaScript?

另一种方法是创建一个script 标记并将值写入 JS 变量：

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

您可以从那里使用 JS 脚本中的变量。

更新

要处理成行的项目，您需要一个索引值或一些唯一 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>

然后，当您创建操作链接时，将data-id 属性添加到链接（MVC3+）：

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

澄清一下，操作链接中的data_rowid 将转换为MVC3+ 中的<a data-rowid="">，可以通过jQuery 轻松检索，如下例所示。

在您的click 操作中：

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