Open a link in new browser window in Asp.net MVC

Here we will understand How to open a link in new browser window in MVC. Before proceeding this,

Go through the this previous tutorial

In last tutorial we created a student class let’s change that class

public class StudentMetaData { [DataType(DataType.EmailAddress)]         public string EmailAddress { get; set; }         [DataType(DataType.Currency)]         public int? WinningPrize { get; set; }         // Generate a hyperlink         [DataType(DataType.Url)]         public string PersonalWebSite { get; set; }         [DataType(DataType.Date)]         public DateTime? AdmissionDate { get; set; } }

    

Change the detail action method in Home controller

public ActionResult Details(int id)         {             MVCVariousAttributeEntities _context = new MVCVariousAttributeEntities();            Student _studentDetail =  _context.Students.Where(c => c.Id == id).SingleOrDefault();            return View(_studentDetail);         }

And the code for Details.csHtml (View)

@model MVCApplicationWithVariousAttribute.Models.Student @{     ViewBag.Title = "Details"; } @Html.DisplayForModel()

At this point if we run our application and redirect to following link then student  detail will like.

localhost/MVCApplicationWithVariousAttribute/Home/Details/1

At this point if we click on link (PersonalWebsite) then it opens in same window if you want to open it in new window then there are some steps to do this

1.   Right click on View and add a new folder and it name as “Shared” . So anything you want to shared with all the view you can put here.

2.   Now right click on this shared folder and add a new folder with the name “DisplayTemplates”.

This “DisplayTempate” can be put in Home Folder but if we put it in Shared folder then this can be useful for all the View.

3.   Right click on “DisplayTemplates” and add a view and give the name it “Url” this name should be match with the  DataType attribute which we defined in student class.

// Generate a hyperlink         [DataType(DataType.Url)]         public string PersonalWebSite { get; set; }

It will create a view and generate a view code, so delete that auto generate code and write following code

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

Now Run your application and see the output, now this link will open in browser window .

But the thing is this approach will come for all the link means now all the links will open in new browser, So for some links we don’t want to open link in new window then there are some steps for this

1.   First Change the view name from Url to “OpenInNewWindow”

2.   Now change the Student.cs class

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

UIHint attribute is used to use the specific template .

Now Run you application and see the output.