Recently, as part of my current project, I needed to open up a new browser window with HTML from an ASP.NET MVC PartialView.  As I looked online for examples on how to do this, most of the samples used the windows.open command with a well-known web site’s URL like www.microsoft.com or www.amazon.com.  That didn’t help me so I finally figured it out and thought I’d share here to help others who may need to do this.

The Code

The controller has a method to return the PartialView:

public PartialViewResult CreatePartialView()
{
    return PartialView("MyPartialView");
}

The MyPartialView code looks like this:

<h1>Hello World</h1>
<p>
    This is a very nice web page.
</p>

Add a button to the Index page:

<button id="NewBrowserBtn">New Browser</button>

Now for the magic that makes it happen using window.open:

$(document).ready(function () {
    $('#NewBrowserBtn').on('click', function () {
        window.open('/Home/CreatePartialView', '_blank', 'left=100,top=100,width=400,height=300,toolbar=1,resizable=0');
    });
});
  • Notice the first parameter of window.open is the URL of the action method we added in the controller.  You could easily pass a parameter by appending it to the URL.

the result

Output Window Open

 

Conclusion

It is very easy to display a new browser window loaded with whatever you’d like in an MVC PartialView.  You just need the normal MVC code and a little jQuery/javascript.