ASP.NET MVC – Hyperlinks – Open the Page in a New Browser Window

CodeProject

In the last blog post, we have discussed about DataType & DisplayColumn attributes in ASP.NET MVC. You can read that article here. In this article, we will look at how to open the page in a new browser window while clicking on a hyperlink.

Let’s understand this with an example. We will be using the same example which we have used in the previous article. First of all, change the Details action method in the Home controller like below.

public ActionResult Details(int id)
{
SampleDBContext db = new SampleDBContext();
tblEmployee employee = db.tblEmployees.Single(x => x.Id == id);
return View(employee);
}

Then, change the Details View like below:

Build the solution and run it. At this point, we should be able to see the employee’s full details.

Notice that PersonalWebSite property is rendered as a hyperlink. It is because within the tblEmployee class, we have decorated the PersonalWebSite property with DataType attribute.

Right click on the page and select View page source. Notice the anchor tag generated here. It has a href attribute, but doesn’t have a target attribute.

We know that if we want a Url to open in a new window, the target attribute needs to be set to _blank. Since this anchor tag doesn’t have a target attribute, when we click on the hyperlink, the target page is going to open in the same window.

Let’s see how to open the Url in a new window. Follow the below steps:

• Right click on Views folder and add Shared folder.
• Right click on Shared folder and add DisplayTemplates folder.
• Right click on DisplayTemplates folder and add a View. Set Url as the name and use Razor view engine.

Notice the name of the View here. It matches the enum value DataType.Url. Then copy and paste the following code in Url.cshtml view.

<a href="@ViewData.Model" target="_blank">@ViewData.Model</a>

Now build the solution and refresh the View. Let’s right click on the page and select View page source. Notice the anchor tag right here. Now we have a target attribute which is set to _blank.

If we click on the link now, the Url should be opened in a new window.

But the downside of this approach is that, from now onwards, all the links will be opened in a new window. But our requirement is such that only PersonalWebSite should be opened in a new window. Rest of the links within our application need to be opened in the same window. For this, 2 simple modifications have to be done.

1. Rename Url.cshtml to OpenInNewWindow.cshtml
2. Decorate PersonalWebSite property in EmployeeMetaData class with UIHint attribute and specify the name of the template to use. In our case, the name of the template is OpenInNewWindow.

public class EmployeeMetaData
{
    [DataType(DataType.Url)]
    [UIHint("OpenInNewWindow")]
    public string PersonalWebSite { get; set; }
}

Now run the application and we can see that except the PersonalWebSite, all the other links will be opened in the same window.

From the above example itself, it is clear that UIHint attribute is used to specify the name of the template to use to display the data field.

Reference

Arun Ramachandran (http://BestTEchnologyBlog.Com)