Click here to Skip to main content
Click here to Skip to main content
Technical Blog

Tagged as

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.
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 w

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

MVC1

Then change the Details View like below.

MVC2

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

MVC3

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.

MVC4

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.

MVC5

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.

MVC6

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.

MVC7

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>

MVC8

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.

MVC9

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

MVC10

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

MVC11

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)

 


License

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

Share

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 http://BestTEchnologyBlog.com. Along with 3 years of hands on experience he holds a Master of Computer Applications degree from Cochin University of Science & Technology (CUSAT).

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.141216.1 | Last Updated 4 Jun 2014
Article Copyright 2014 by Arun Ramachandran India
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid