Popup Window Open Without Page Refresh in Asp.net MVC Using javaScript

This article will show you how you can open popup window without page refresh on click of submit button in asp.net mvc using JavaScript.

Some of my previous articles are as follows: JavaScript Alert Message On Conditional Bases In Asp.Net MVC Using C#.Net, Javascript Confirm Message On Submit Button Click In Asp.Net MVC Using C#.Net, Dynamic Histogram Google Chart in asp.net MVC using C#.net, JavaScript, Gridview Selected Row Value Pass to JavaScript Function On Hyperlink Click in Asp.net Using C#.Net, Access Session Value at Client Side Using JavaScript In Asp.Net.

So for this article we will create a new mvc application and add a controller file in it. In this controller file add the below code.

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace MvcApplication8.Controllers {     public class HomeController : Controller     {         //         // GET: /Home/         public ActionResult Index()         {             return View();         }         [HttpPost]         public ActionResult Index(int id = 0)         {             return View();         }         public ActionResult WelcomePage()         {                       ViewBag.PopupValue = "THIS IS POPUP WINDOW";             return View();         }     } }

In above code I have index and welcome action result. In this article I will open the welcome window as popup window using javascript.

Now we will create view and add the below code in it.

INDEX

@{     ViewBag.Title = "Popup window open without page refresh in asp.net mvc using javascript"; } <script language="javascript">     function openPopupWindow() {         window.open('/Home/WelcomePage/', 'Page', "width=300, height=200");         return false;     } </script> @using (Html.BeginForm("Index", "Home")) {     <h4>         OPEN WINDOW</h4>     <br />     <div>         <input type="submit" value="Click To Open" onclick="javascript:return openPopupWindow();" />     </div> }

In above code check the javascript function.

WELCOMEPAGE

@{     ViewBag.Title = "WelcomePage"; } <div>     WELCOME</div> <div>     <h1>@ViewBag.PopupValue</h1> </div>

In welcome I am displaying the value of viewbag.

Now we have done run the application to check the output.

Now click on button

DOWNLOAD