Javascript MVC 3 Razor 弹出窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6911134/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
MVC 3 Razor PopUp Window
提问by Vipul
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:
单击按钮时，没有任何反应。我收到以下 Javascript 错误：
Line: 19
Char: 1
Error: Invalid argument.
Code: 0
行：19
字符：1
错误：参数无效。
代码：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
当我检查呈现的 HTML 的 ViewSource 时，我发现该行是呈现按钮的那一行。我正在使用带有 IE 7 的 Windows Vista。我正在 VS 2010 中使用 Razor Engine 开发 MVC 3
回答by archil
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).
尊重html。尊重javascript。尊重您正在编写的框架，该框架从第二版到第三版进行了两个重大更改（验证和 ajaxity），以应用更新的现代原则 - Unobtrusive Javascript。如果您遵循该原则（在 vs javascript synthax 突出显示的帮助下），您可以设法在更短的时间内纠正该错误。
<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
正如我发现的那样，这是 IE 中窗口名称中的空格问题 - “客户搜索”。如果您删除该空间 - 'CustomerSearch'，它也将开始在 IE 中工作
回答by jensgram
The HTML provided has some quirks on the 'characters in the onclick. Try and edit to the following (linebreaks added for readability):
提供的 HTML'对onclick. 尝试编辑以下内容（为了可读性添加了换行符）：
<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 oneJavaScript string with values from calculations inserted - Arguments within the config string has
'removed toobar→toolbar.
- 第三个参数
window.open()是一个JavaScript 字符串，其中插入了来自计算的值 - 配置字符串中的参数已
'删除 toobar→toolbar。
Based on archil's updateit appears that he has hit the nail:
根据archil 的更新，他似乎已经做到了：
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.strWindowNamedoes not specify the title of the new window. (source)
strWindowName
这是仅命名新窗口的字符串。当指定<a>元素或 a的目标属性时，此类字符串可用作链接和表单的目标<form>。此字符串参数不应包含任何空格。strWindowName不指定新窗口的标题。（来源）
回答by Suraj Shrestha
<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>
