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?

You're not providing the url, width or height properties when you call the function. Now I've formatted your question you can also see you have a syntax error in the ActionLink — Rory McCrossan
– Rory McCrossan, Commented Feb 10, 2016 at 20:31
Excuse me. It's my fault. My exact code is this: @Html.ActionLink( "Update", "#", 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')" }) I tried to use Html.Actionlink but I also want to set the new popup to the center of screen. — tdog
– tdog, Commented Feb 10, 2016 at 21:03
You can use the edit button to update the code in the question. — Rory McCrossan
– Rory McCrossan, Commented Feb 10, 2016 at 21:05

tdog · Accepted Answer · 2016-02-11 07:45:10Z

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.

Shyju · Accepted Answer · 2016-02-10 20:43:33Z

0

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

});

edited Feb 10, 2016 at 20:43

answered Feb 10, 2016 at 20:33

Shyju

220k106 gold badges421 silver badges499 bronze badges

2 Comments

tdog Over a year ago

I have my Html.ActionLink code block in foreach statement. So I couldn't give a spesific id. Add to that, I was wondering whether I use preventDefault, can I pass my parameters which I specified in ActionLink? I just want both pass my parameters to controller and open new window in the center of the screen.

Shyju Over a year ago

Then give a css class instead of the Id and use the css class to bind the click event.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related