MVC 3 Razor PopUp Window

Question

I need to open a new pop up window on click of a button in a view. The new window should be redirect to a specific actionmethod in a specific controller. I also need to provide attributes for size of the new pop up window. I have been trying the following code:

<input type="button" name = "ClickMe" Value="ClickMe" onclick= "javascript:window.open('/Home/Create/','Customer Search',height='window.screen.height - 100', width='200',left='window.screen.width - 250' ,top='10',status='no',toobar='no',resizable='yes',scrollbars='yes')"/>

On click of button, nothing happens. I get following Javascript error:

Line: 19
Char: 1
Error: Invalid argument.
Code: 0

When I check the ViewSource of the HTML rendered, I find the line to be the one which is rendering the button. I am using Windows Vista with IE 7. I am working on MVC 3 with Razor Engine in VS 2010

Solution 1

Respect html. Respect javascript. Respect the framework that you are writing on, that has made two big changes (validation and ajaxity) from its 2nd version to 3rd to apply the newer, modern principle - Unobtrusive Javascript. You could manage to correct that error in less time you spent on asking question in here if you followed that principle (with the help of vs javascript synthax highlighting).

    <input type="button" id="ClickMe" name = "ClickMe" Value="ClickMe" />
...
    <script type="text/javascript">
            $(function () {
                $('#ClickMe').click(function () {
                   window.open('/Home/Create/', 'CustomerSearch', 'height=' + (window.screen.height - 100) + ',width=200,left=' + (window.screen.width - 250) + ',top=10,status=no,toolbar=no,resizable=yes,scrollbars=yes');
                });
            });
    </script>

And as I discovered, it's the issue with space in window name in IE - 'Customer Search'. If you remove that space - 'CustomerSearch', it'll start working in IE too

Solution 2

The HTML provided has some quirks on the ' characters in the onclick. Try and edit to the following (linebreaks added for readability):

<input type="button"
       name="ClickMe"
       value="ClickMe"
       onclick="javascript:window.open('/Home/Create/',
                                       'Customer Search',
                                       'height=' + (window.screen.height - 100) + ',width=200,left=' + (window.screen.width - 250) + ',top=10,status=no,toolbar=no,resizable=yes,scrollbars=yes');"/>

Notable changes:

• Third argument to window.open() is one JavaScript string with values from calculations inserted
• Arguments within the config string has ' removed
• toobar → toolbar.

---

Based on archil's update it appears that he has hit the nail:

var windowObjectReference = window.open(strUrl, strWindowName[, strWindowFeatures]);

strWindowName
This is the string that just names the new window. Such string can be used to be the target of links and forms when the target attribute of an <a> element or of a <form> is specified. This string parameter should not contain any blank space. strWindowName does not specify the title of the new window. (source)

Comments

[Vipul]

Thanks for the prompt reply. hate to say this but one "'" is missing immediately after "scrollbars=yes". Even after rectification , issue persists. Any other suggestions ?

[Vipul]

Thanks for the prompt response. But the issue persists.

[jensgram]

@Vipul Ouh, you're right. It's fixed now, but I believe that archil has hit the nail with the window name (CustomerSearch), cf. window.open on MDN: "This string parameter should not contain any blank space."

[Vipul]

Thanks. I now remember something I did 2 years ago where the window name had to supplied to open new window.