如何在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" })

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>

控制器

 [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

您可以从链接中获取网址。在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);