如何通过MVC中的jquery将值从弹出窗口传递到父窗口答案

【问题标题】：How to pass values from pop up window to parent window through jquery in MVC如何通过MVC中的jquery将值从弹出窗口传递到父窗口
【发布时间】：2011-06-21 09:15:41
【问题描述】：

我的视图页面中有三个按钮，分别是 "Button1"、"Button2" 和 "Button3"，并且我有三个 TextBoxes 对应每个按钮都写着 "TextBox1","TextBox2" & "TextBox3" 。单击任何一个按钮时，我都可以打开一个弹出窗口。现在我想将一些值从弹出视图传递给父视图，并将该值传递给与正在单击的按钮关联的 TextBox。我该怎么做？

编辑

<input type="button" value="Buuton1" id="Button1" style="width:100px;font-family:Verdana; font-size:9px; onclick="window.open( '<%= Url.Action( "Popup", "Home" ) %>');" /> 
<input type="button" value="Button2" id="Button2" style="width:100px;font-family:Verdana; font-size:9px;" onclick="window.open( '<%= Url.Action( "Popup", "Home" ) %>');" /> 
<input type="button" value="Button3" id="Button3" style="width:100px;font-family:Verdana; font-size:9px;" onclick="window.open( '<%= Url.Action( "Popup", "Home" ) %>');" />

【问题讨论】：

嗨@Saloni，我们需要一些代码来帮助你。
');" /> ');" /> ');" />
我在视图页面上有三个 texbox： ,TextBox2, Textbox3 现在，当我点击任何一个按钮时，我都能得到一个弹出窗口名称“Popup”。在那个弹出窗口中，我有一个按钮和一个文本框。当我在文本框，单击按钮后，我想将文本框值填充到父窗口并关闭弹出窗口。

标签： javascript jquery asp.net-mvc model-view-controller

【解决方案1】：

给文本框一个 id（例如 textBox1），然后试试这个。这是一个简单的 JavaScript。
为此，您不需要 jQuery。

window.opener.document["nameForm"].getElementById("textBox1 ").value = "your some values will go here"

【讨论】：

给出错误：Microsoft JScript 运行时错误：无法获取属性“getElementById”的值：对象为空或未定义
您是否将 id 添加到文本框，然后将此 id 传递给 'getElementById' 函数？
正如你所说的那样，window.opener.document["nameForm"].getElementById("textBox1").value = "你的一些值会放在这里"我也这样做了跨度>
我已经告诉我页面上只有三个按钮和三个文本框不超过。

【解决方案2】：

我们可以通过使用 jquery 或 Javascript 来做到这一点。在这里，我们将讨论电子邮件 ID 更新。

在下面的示例中，将打开一个弹出窗口，其中包含来自父窗口的自动填充电子邮件 ID。更新后，邮件会在父窗口文本框中自动更新，弹出窗口会自动关闭。

例子：

1) 创建文件 index.html 作为父窗口

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<title></title>
<head></head>

<body>
<table>

<tr>
<td colspan=”2″>Example for update email id.</td>
</tr>
<tr>
<td>Email Id:</td>
<td>
<input type=’text’ name=”emailID” id=”emailId” value=”demo@demo.com”></td>
</tr>
<tr>
<td>
<input type=”button” name=”update” value=”Update”
onClick=’window.open(“update_popup.html”, “”, “width=400, height=300″)’>
</td>
</tr>
</table>
</body>
</html>

2) 创建 file update_popup.html 作为一个弹出窗口，其中电子邮件 ID 从父窗口自动填充以进行更新。

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<title></title>
<head></head>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js”></script>
<script>
$(document).ready(function(){

//== pre fill parent window email id in popup window for update

var emailId = window.opener.document.getElementById(“emailId”).value;
$(“#emailId”).val(emailId);

//=== update updated email id in to parent window

$(“#Save”).on(‘click’,function(){

var updated_emailId = $(“#emailId”).val();
window.opener.document.getElementById(“emailId”).value = updated_emailId;
window.close();
});
});
</script>

<body>
<table>
<tr>
<td>Email Id:</td>
<td>
<input type=’text’ name=”emailID” id=”emailId” value=””></td>
</tr>
<tr>
<td><input type=”button” name=”Save” id=”Save” value=”Save”></td>
</tr>
</table>
</body>
</html>

【讨论】：