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

Answer 1

<script type="text/javascript">
    //script for loading value to division
    $(function () {
        $('form').submit(function () {
            $.ajax({
                url: this.action, //you can redirect to your specific controller here..
                type: this.method,
                data: $(this).serialize(),
                success: function (result) {
                    $('#popUp').html(result);
                }
            });
            return false;
        });
    });
</script>

<script type="text/javascript">
    //Script for pop up dialog.
    $(function () {
        $('form').submit(function () {
            $("#popUp").dialog({
                modal: true,
                resizable: false
            });
        });
    });
</script>

<div id="popUp" >
</div>

Answer 2

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

Answer 3

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)