如何在ASP.NET MVC 4中使用Html.Actionlink触发window.open？

Question

我有一个如下的代码块：

@foreach (System.Data.DataRow drEquipment in Model.EquipmentList.Rows)
    {
         <tr>
             <td valign="top">@drEquipment["ColumnName"]<br /></td>
             <td valign="top">@drEquipment["ColumnName"] - @drEquipment["ColumnName"]<br /></td>
             <td valign="top">@drEquipment["ColumnName"]</td>
             <td valign="top">@drEquipment["ColumnName"] - @drEquipment["ColumnName"]</td>
             <td>@Html.ActionLink("Güncelle", "UpdateAction", new { SerialNumber = drEquipment["ColumnName"], StockSpecCd = drEquipment["ColumnName"], ResourceSpecTypeCd = drEquipment["ColumnName"] }, new { popup="{\"height\":250, \"width\":350}" })</td>  
         </tr>
    }
@Html.ActionLink("Update", "UpdateAction", new { SerialNumber = drEquipment["ColumnName"], StockSpecCd = drEquipment["ColumnName"], ResourceSpecTypeCd = drEquipment["ColumnName"], new { popup="{\"height\":250, \"width\":350}" })

目前这个功能已经正常工作，但我无法将弹出窗口定位于屏幕中心。因此，我添加了以下的onclick事件：

onclick="MyPopup('/Account/UpdateAction', '350', '250')"

因为有一个foreach语句，所以我不能使用像id这样的变量来使用e.preventDefault。

我在按钮点击事件上解决了这个问题，它很好地工作：

<button onclick="MyPopup('/Account/UpdateAction', '350', '250')">Update</button>

function MyPopup(url, width, height) {
var leftPosition, topPosition;
//Allow for borders.
leftPosition = (window.screen.width / 2) - ((width / 2) + 10);
//Allow for title and status bars.
topPosition = (window.screen.height / 2) - ((height / 2) + 50);
//Open the window.
window.open(url, "_blank",
"status=no,height=" + height + ",width=" + width + ",resizable=yes,left="
+ leftPosition + ",top=" + topPosition + ",screenX=" + leftPosition + ",screenY="
+ topPosition + ",toolbar=no,menubar=no,scrollbars=no,location=no,directories=no");

但是我无法使用我的函数和Html.Actionlink。我将一个onclick事件作为html属性放置，但它不起作用。

我需要做的是将我的参数传递给控制器并在“屏幕中央的网站”上打开新的_blank窗口。我已经满足了所有需求，除了最后一个。

我该如何解决这个问题？

- tdog

---

当您调用该函数时，您没有提供“url”，“width”或“height”属性。现在我已经格式化了您的问题，您还可以看到ActionLink中存在语法错误。 - Rory McCrossan

对不起，是我的错。我的确切代码如下：@Html.ActionLink( "更新", "#", new { SerialNumber = drEquipment["SERIAL_NUMBER"], StockSpecCd = drEquipment["STOCK_SPEC_CD"], ResourceSpecTypeCd = drEquipment["RESOURCE_SPEC_TYPE_CD"], new { popup = "{"height":250, "width":350}", onclick = "MyPopup('/Account/EquipmentEdit', '350', '250')" }) 我尝试使用Html.Actionlink，但我还想将新的弹出窗口设置在屏幕中央。 - tdog

您可以使用“编辑”按钮更新问题中的代码。 - Rory McCrossan

谢谢您的评论。我已经完成了。 - tdog

Answer 1

我用了不同的方式做了我想要的事情：

 @{
      long WarehouseId = string.IsNullOrWhiteSpace(drEquipment["WAREHOUSE_ID"].ToString()) ? 0 : Convert.ToInt64(drEquipment["WAREHOUSE_ID"]);
      string link = "/Account/EquipmentEdit?SerialNumber=" + drEquipment["SERIAL_NUMBER"] + "&StockCode=" + drEquipment["STOCK_CODE"] + "&WarehouseId=" + WarehouseId + "&WarehouseTypeCode=" + drEquipment["WAREHOUSE_TYPE_CODE"].ToString() + "&WhsStatusType=" + drEquipment["WHS_STATUS_TYPE"].ToString();
  }

  <td><a href="#" onclick="MyPopup('@link', '350', '250');">Update</a></td>

function MyPopup(url, width, height) {
    var leftPosition, topPosition;
    //Allow for borders.
    leftPosition = (window.screen.width / 2) - ((width / 2) + 10);
    //Allow for title and status bars.
    topPosition = (window.screen.height / 2) - ((height / 2) + 50);
    //Open the window.
    window.open(url, "_blank",
    "status=no,height=" + height + ",width=" + width + ",resizable=yes,left="
    + leftPosition + ",top=" + topPosition + ",screenX=" + leftPosition + ",screenY="
    + topPosition + ",toolbar=no,menubar=no,scrollbars=no,location=no,directories=no");
}

如果有一种使用Html.ActionLink的方式，我想知道它。我不想在我的cshtml页面中看到像"a href"这样的属性。

- tdog

Answer 2

当前代码中，您没有将3个参数（url、width和height）传递给MyPopup()方法！

您需要获取并传递目标URL、宽度和高度到您的MyPopup方法中，一种方法是给链接一个ID，并使用非侵入式JavaScript来处理click事件。您可以将高度和宽度保留为html 5数据属性链接。

@Html.ActionLink("Update", "EquipmentEdit", 
               new { SerialNumber = drEquipment["SERIAL_NUMBER"],
                     StockSpecCd = drEquipment["STOCK_SPEC_CD"],
                     ResourceSpecTypeCd = drEquipment["RESOURCE_SPEC_TYPE_CD"] },
                     new { id="updateLink", data_height="300", data_width="300" } )

在您的JavaScript代码中（使用jQuery），监听此链接的click事件。

$(function(){

  $("#updateLink").click(function(e){
     e.preventDefault();

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

     alert(height);
     // execute your custom code for window.open here
     // call MyPopup(url,width,height);
  });

});

- Shyju

---

我在foreach语句中有我的Html.ActionLink代码块。因此，我无法给出特定的id。除此之外，我想知道如果我使用preventDefault，我是否可以传递我在ActionLink中指定的参数？我只想将我的参数传递给控制器并在屏幕中央打开新窗口。 - tdog

然后给一个CSS类而不是ID，并使用CSS类来绑定点击事件。 - Shyju