MVC 3 Razor PopUp-Fenster

Question

Ich muss ein neues Pop-up-Fenster öffnen, wenn ich in einer Ansicht auf eine Schaltfläche klicke. Das neue Fenster sollte zu einer bestimmten actionmethod in einem bestimmten Controller umgeleitet werden. Ich muss auch Attribute für die Größe des neuen Pop-up-Fensters bereitstellen. Ich habe den folgenden Code ausprobiert:

<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')"/>

Wenn Sie auf die Schaltfläche klicken, passiert nichts. Ich erhalte folgenden Javascript-Fehler:

Zeile: 19
Zeichen: 1
Fehler: Ungültiges Argument.
Code: 0

Wenn ich die ViewSource des gerenderten HTMLs überprüfe, finde ich die Zeile, in der die Schaltfläche gerendert wird. Ich verwende Windows Vista mit IE 7. Ich arbeite an MVC 3 mit Razor Engine in VS 2010

Answer 1

Html respektieren. Respektiere Javascript. Respektiere das Framework, auf dem du schreibst, das zwei große Änderungen (Validierung und Ajaxity) von der 2. zur 3. Version vorgenommen hat, um das neuere, moderne Prinzip anzuwenden. Unaufdringliches Javascript . Sie könnten es schaffen, diesen Fehler in kürzerer Zeit zu korrigieren, die Sie mit dem Stellen der Frage hier verbracht haben, wenn Sie diesem Prinzip folgen würden (mit Hilfe von 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>

Und wie ich herausgefunden habe, ist es das Problem mit dem Leerzeichen im Fensternamen im IE - "Kundensuche". Wenn Sie das Leerzeichen - 'CustomerSearch' - entfernen, wird es auch im IE funktionieren.

Answer 2

Das bereitgestellte HTML hat einige Macken in der ' Zeichen in der onclick . Versuchen Sie, den folgenden Text zu bearbeiten (Zeilenumbrüche zur besseren Lesbarkeit hinzugefügt):

<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');"/>

Bemerkenswerte Änderungen:

• Drittes Argument gegen window.open() es eine JavaScript-String mit eingefügten Werten aus Berechnungen
• Die Argumente innerhalb der Konfigurationszeichenfolge haben ' entfernt
• toobar → toolbar .

---

Basierend auf archil's update es scheint, dass er den Nagel auf den Kopf getroffen hat:

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

strWindowName
Dies ist die Zeichenkette, die das neue Fenster benennt. Diese Zeichenkette kann als Ziel von Links und Formularen verwendet werden, wenn das Zielattribut eines <a> Element oder eines <form> angegeben ist. Dieser String-Parameter sollte keine Leerzeichen enthalten. strWindowName gibt den Titel des neuen Fensters nicht an. ( Quelle )

Answer 3

<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>