Click here to Skip to main content
12,560,367 members (48,793 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


7 bookmarked

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

, 3 Jun 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
ASP.NET MVC – Hyperlinks – Open the page in a new browser window

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=&rdquo;@ViewData.Model&rdquo; target=&rdquo;_blank&rdquo;>@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
    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.


Arun Ramachandran (http://BestTEchnologyBlog.Com)


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Arun Ramachandran India
Software Developer
India India
Arun Ramachandran is a Software Engineer having hands on experience in different Microsoft Technologies who is presently working in Experion Technologies, India. He has written over 95 articles on the subject on his blog at Along with 3 years of hands on experience he holds a Master of Computer Applications degree from Cochin University of Science & Technology (CUSAT).

You may also be interested in...


Comments and Discussions

GeneralWhat happens for Partial View? Pin
FaizanMubasher7-Sep-16 4:20
professionalFaizanMubasher7-Sep-16 4:20 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.161026.1 | Last Updated 4 Jun 2014
Article Copyright 2014 by Arun Ramachandran India
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid