如何在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

您可以從鏈接中獲取URL。在click動作，

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

爲了解析URL並獲得查詢字符串參數我會建議檢查出這個非常受歡迎的，所以交：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腳本中使用變量。

UPDATE

要處理的項目行你需要或者指數值或者一些獨特的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將轉化爲<a data-rowid="">在MVC3 +，它可以可以像下面的例子那樣通過jQuery輕鬆地檢索。

在你click行動：

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

Answer 2

您可以用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; 
});