How to trigger window.open by Html.Actionlink in ASP.NET MVC 4

Question

I have a code block as follows:

@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}" })

It is working well like this but I couldn't site popup center of the screen. That's why I have an onclick event as follows:

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

So I couldn't use a variable like id to use e.preventDefault because there is a foreach statement.

I solve this problem on button click event and it works well:

<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");

}

But I couldn't use my function with Html.Actionlink. I put an onclick event as an htmlAttritube but it didn't work.

What I exactly need is pass my parameters to controller and open new _blank window "site center of the screen". I have all my needs without last one.

How do I fix this problem?

Answer 1

I did what I want in a different way:

 @{
      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");
}

If there is a way to do with Html.ActionLink, I would like to know it. I don't want to see attributes like "a href" in my cshtml page.

Answer 2

With the current code you are not passing the 3 parameters ( url , width and height ) to the MyPopup() method !

You need to get and pass the target url, width and height to your MyPopup method, One way to do that is, give an id to the link and use unobutrisuve javascript to handle the click event. You can keep the height and width as html 5 data attributes to the link.

@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" } )

And in your javascript(using jQuery), listen to the click event of this link

$(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);
  });

});