Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

MVC-pop up windows

I need to create pop up windows in mvc(not new tab in browser). Does anyone know how to do this?

like image 797
Cipiripi Avatar asked Jan 26 '11 10:01

Cipiripi


People also ask

How show pop up in MVC?

Step 1 : Start a new ASP.NET MVC Web application. Add a new controller called Home and in the Home controller, the Index method is available to you but there is not a view with it so add a view by right-clicking in Index action. Step 2 : In index. aspx add one HTML button to open our modal popup window like below.

What is the difference between pop up and modal window?

Modals, like pop-ups, are components that pop up on a user's screen. The key difference, however, is that the user would have initiated the action as part of their journey. Modals are used for specific workflows such as adding users, deleting content, sharing content, adding content, and more.

How do I open multiple popup windows in asp net?

You can have multiple popups by changing the popup window name (pass the ID string as a second parameter, and make the ID the popup name, for example). They'll stay open, but they will not all stay on top of the main page.


2 Answers

One possibility is to use jquery ui dialog.

EDIT

The idea would be to have an ajax action that returns a partial view. The result of that action (html) is placed inside the container of the popup and on the success handler of the ajax call you open the popup. Here is some sample code:

@Ajax.ActionLink("Open popup", "SomeAction", new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "result", InsertionMode = InsertionMode.Replace, OnSuccess="openPopup" })<br />

<div id="result" style="display:none;"></div>

<script type="text/javascript">
$(document).ready(function() {
    $("#result").dialog({
        autoOpen: false,
        title: 'Title',
        width: 500,
        height: 'auto',
        modal: true
    });
});
function openPopup() {
    $("#result").dialog("open");
}
</script>

Then you have to add the action in the controller that returns the partial view

 [HttpGet]
 public PartialViewResult SomeAction()
 {
      return PartialView();
 }

Place whatever you need in the partial view, you may also include parameters in the action, etc.

Good luck!

like image 84
uvita Avatar answered Nov 24 '22 00:11

uvita


Most obvious way is using one of js frameworks. Personally I prefere jQuery UI dialog control.
Please check http://jqueryui.com/demos/dialog/ for detailed information about it.
Also you may check ASP.NET MVC modal dialog/popup best practice (it's question similar to yours)

Of course if you need some simple popup you always may use alert('Im popup');

Update according your latest request
To open some url in new window you may use next javascript:

function OpenDialog() {
window.open("some url", "DialogName", "height=200,width=200,modal=yes,alwaysRaised=yes");
}

But result really depends on browser. Most of them open this modal window not in new tab but in new browser instance.
This topic might help you aswell:
JavaScript open in a new window, not tab

like image 29
Igor V Savchenko Avatar answered Nov 24 '22 01:11

Igor V Savchenko